feat(admin): redesign ticket handling dialog as conversation workspace

Render the original question and replies as one chat-style timeline, merge editor and toolbar into a shared composer for replies and notes, and refresh sidebar cards. Remove superseded renderers and selectors. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-10-31 12:02:49 +08:00
1 parent 09f3a94cea
commit d7616b193e
@@ -1,5 +1,5 @@
 <?php
-/** 工单处理弹窗：会话、回复、处理信息与内部备注。@package AKSRT */
+/** 工单处理弹窗：左侧会话与回复输入，右侧处理信息与内部备注。@package AKSRT */

 namespace AKSRT\Admin\Native;

@@ -16,81 +16,77 @@ trait UsersMenusTicketsDetail {

    private function render_ticket_detail_panel(array $ticket): string {
        $id = (int) $ticket['id'];
-        $replies = TicketRepository::get_instance()->replies($id);
-        $notes = TicketNoteService::for_ticket($id);
-        $closed = !empty($ticket['is_closed']);
        $html = '<div class="aksrt-ticket-detail" data-aksrt-ticket-detail="' . $id . '"><div class="aksrt-ticket-detail__main">';
-        $html .= '<section class="aksrt-ticket-conversation" aria-label="' . esc_attr__('问题与沟通记录', 'aksrt') . '">';
-        $html .= '<div class="aksrt-ticket-section-head"><h3>' . esc_html__('沟通记录', 'aksrt') . ' <span class="aksrt-ticket-hint">' . esc_html(sprintf(__('%d 条记录', 'aksrt'), count($replies))) . '</span></h3>';
-        if ($replies !== []) {
-            $html .= '<button type="button" class="button-link" data-aksrt-ticket-latest>' . esc_html__('查看最新记录', 'aksrt') . '</button>';
-        }
-        $html .= '</div><div class="aksrt-ticket-conversation__scroll" tabindex="0" role="region" aria-label="' . esc_attr__('可滚动的沟通记录', 'aksrt') . '">';
-        $html .= '<article class="aksrt-ticket-detail__origin">';
-        $html .= $this->ticket_message_head((int) $ticket['user_id'], (string) $ticket['user_name'], !empty($ticket['post_admin_id']) ? __('代客提交', 'aksrt') : __('提交了工单', 'aksrt'), (string) $ticket['post_time']);
-        $html .= '<div class="aksrt-ticket-detail__body">' . wpautop(esc_html((string) $ticket['content'])) . '</div>';
-        $html .= $this->ticket_attachments_html((array) $ticket['attachment']) . '</article>';
-        if ($replies === []) {
-            $html .= '<p class="aksrt-ticket-detail__empty">' . esc_html__('暂无回复，请核对问题后联系用户。', 'aksrt') . '</p>';
-        } else {
-            $html .= '<ol class="aksrt-ticket-detail__replies">';
-            foreach ($replies as $reply) {
-                if ((string) $reply['author_type'] === 'system') {
-                    $html .= '<li class="aksrt-ticket-detail__system"><span>' . esc_html((string) $reply['content']) . '</span><time>' . esc_html((string) $reply['created_at']) . '</time></li>';
-                    continue;
-                }
-                $admin = (string) $reply['author_type'] === 'admin';
-                $html .= '<li class="aksrt-ticket-detail__reply is-' . ($admin ? 'admin' : 'user') . '">';
-                $html .= $this->ticket_message_head((int) $reply['author_id'], (string) $reply['author_name'], $admin ? __('客服', 'aksrt') : __('用户', 'aksrt'), (string) $reply['created_at']);
-                if (is_array($reply['quote'] ?? null)) {
-                    $quote = $reply['quote'];
-                    $html .= '<blockquote class="aksrt-ticket-detail__quote">' . esc_html(!empty($quote['is_deleted']) ? __('原回复已删除', 'aksrt') : (string) $quote['content']) . '</blockquote>';
-                }
-                $html .= '<div class="aksrt-ticket-detail__body">' . wpautop(esc_html((string) $reply['content'])) . '</div>';
-                $html .= $this->ticket_attachments_html((array) $reply['attachment']) . '</li>';
-            }
-            $html .= '</ol>';
-        }
-        $html .= '</div></section>';
-        $html .= $closed
+        $html .= $this->ticket_conversation($ticket, TicketRepository::get_instance()->replies($id));
+        $html .= !empty($ticket['is_closed'])
            ? '<p class="aksrt-ticket-detail__closed"><span class="dashicons dashicons-lock" aria-hidden="true"></span>' . esc_html__('工单已关闭，不能继续回复或变更处理信息；仍可添加内部备注。', 'aksrt') . '</p>'
            : $this->ticket_reply_form($id);
        $html .= '</div><aside class="aksrt-ticket-detail__side" aria-label="' . esc_attr__('工单信息与内部备注', 'aksrt') . '">';
-        $html .= $this->ticket_info_card($ticket);
-        $html .= '<section class="aksrt-ticket-detail__card aksrt-ticket-detail__private"><h3 class="aksrt-ticket-detail__heading">' . esc_html__('内部备注', 'aksrt') . '</h3><p class="aksrt-ticket-hint">' . esc_html__('仅管理员可见，不会发送给用户。', 'aksrt') . '</p>';
-        if ($notes !== []) {
-            $html .= '<ul class="aksrt-ticket-detail__notes">';
-            foreach ($notes as $note) {
-                $html .= '<li><div class="aksrt-ticket-detail__note-head"><strong>' . esc_html((string) $note['admin_name']) . '</strong><time>' . esc_html((string) $note['created_at']) . '</time></div><div>' . nl2br(esc_html((string) $note['content'])) . '</div></li>';
-            }
-            $html .= '</ul>';
+        return $html . $this->ticket_info_card($ticket) . $this->ticket_notes_card($id) . '</aside></div>';
+    }
+
+    /** 原始问题与回复同属一条时间线：用户在左、客服在右、系统事件居中。 */
+    private function ticket_conversation(array $ticket, array $replies): string {
+        $html = '<section class="aksrt-ticket-conversation" aria-label="' . esc_attr__('问题与沟通记录', 'aksrt') . '">';
+        $html .= '<div class="aksrt-ticket-section-head"><h3>' . esc_html__('沟通记录', 'aksrt') . ' <span class="aksrt-ticket-pill">' . esc_html(sprintf(__('%d 条记录', 'aksrt'), count($replies))) . '</span></h3>';
+        if ($replies !== []) {
+            $html .= '<button type="button" class="button-link" data-aksrt-ticket-latest>' . esc_html__('查看最新记录', 'aksrt') . '</button>';
        }
-        $html .= $this->ticket_form_open('note', $id, 'aksrt-ticket-detail__note-form');
-        $html .= $this->ticket_editor('aksrt-ticket-note-' . $id, __('备注内容', 'aksrt'), __('记录处理进展、排查结论…', 'aksrt'), 3);
-        $html .= '<button type="submit" class="button">' . esc_html__('添加内部备注', 'aksrt') . '</button></form></section></aside></div>';
-        return $html;
+        $html .= '</div><div class="aksrt-ticket-conversation__scroll" tabindex="0" role="region" aria-label="' . esc_attr__('可滚动的沟通记录', 'aksrt') . '"><ol class="aksrt-ticket-detail__thread">';
+        $html .= $this->ticket_message('origin', (int) $ticket['user_id'], (string) $ticket['user_name'], !empty($ticket['post_admin_id']) ? __('代客提交', 'aksrt') : __('提交了工单', 'aksrt'), (string) $ticket['post_time'], (string) $ticket['content'], (array) $ticket['attachment']);
+        if ($replies === []) {
+            $html .= '<li class="aksrt-ticket-detail__empty">' . esc_html__('暂无回复，请核对问题后联系用户。', 'aksrt') . '</li>';
+        }
+        foreach ($replies as $reply) {
+            if ((string) $reply['author_type'] === 'system') {
+                $html .= '<li class="aksrt-ticket-detail__event"><span>' . esc_html((string) $reply['content']) . '</span><time>' . esc_html((string) $reply['created_at']) . '</time></li>';
+                continue;
+            }
+            $admin = (string) $reply['author_type'] === 'admin';
+            $quote_html = '';
+            if (is_array($reply['quote'] ?? null)) {
+                $quote = $reply['quote'];
+                $quote_html = '<blockquote class="aksrt-ticket-detail__quote">' . esc_html(!empty($quote['is_deleted']) ? __('原回复已删除', 'aksrt') : (string) $quote['content']) . '</blockquote>';
+            }
+            $html .= $this->ticket_message($admin ? 'admin' : 'user', (int) $reply['author_id'], (string) $reply['author_name'], $admin ? __('客服', 'aksrt') : __('用户', 'aksrt'), (string) $reply['created_at'], (string) $reply['content'], (array) $reply['attachment'], $quote_html);
+        }
+        return $html . '</ol></div></section>';
+    }
+
+    private function ticket_message(string $variant, int $user_id, string $name, string $role, string $time, string $content, array $attachments, string $quote_html = ''): string {
+        $avatar = function_exists('aksrt_get_avatar_url') ? aksrt_get_avatar_url($user_id, 64) : '';
+        return '<li class="aksrt-ticket-detail__message is-' . esc_attr($variant) . '">'
+            . ($avatar !== '' ? '<img class="aksrt-ticket-detail__avatar" src="' . esc_url($avatar) . '" alt="" width="32" height="32">' : '<span class="aksrt-ticket-detail__avatar" aria-hidden="true"></span>')
+            . '<div class="aksrt-ticket-detail__bubble"><header class="aksrt-ticket-detail__meta"><strong>' . esc_html($name !== '' ? $name : '#' . $user_id) . '</strong>'
+            . '<span class="aksrt-ticket-detail__role">' . esc_html($role) . '</span><time>' . esc_html($time) . '</time></header>'
+            . $quote_html . '<div class="aksrt-ticket-detail__body">' . wpautop(esc_html($content)) . '</div>'
+            . $this->ticket_attachments_html($attachments) . '</div></li>';
    }

    private function ticket_reply_form(int $id): string {
        $field = 'aksrt-ticket-reply-' . $id;
-        $html = $this->ticket_form_open('reply', $id, 'aksrt-ticket-detail__reply-form');
-        $html .= $this->ticket_editor($field, __('回复用户', 'aksrt'), __('填写回复内容，发送后用户将收到通知', 'aksrt'), 5);
-        $html .= '<div class="aksrt-ticket-detail__reply-foot">';
+        $tools = '';
        $prereplies = TicketPrereplyService::all();
        if ($prereplies !== []) {
-            $html .= '<label class="screen-reader-text" for="' . $field . '-pre">' . esc_html__('插入预设回复', 'aksrt') . '</label><select id="' . $field . '-pre" data-aksrt-ticket-prereply="' . $field . '"><option value="">' . esc_html__('插入预设回复…', 'aksrt') . '</option>';
+            $tools = '<label class="screen-reader-text" for="' . $field . '-pre">' . esc_html__('插入预设回复', 'aksrt') . '</label><select id="' . $field . '-pre" data-aksrt-ticket-prereply="' . $field . '"><option value="">' . esc_html__('插入预设回复…', 'aksrt') . '</option>';
            foreach ($prereplies as $row) {
-                $html .= '<option value="' . esc_attr((string) $row['content']) . '">' . esc_html(mb_strimwidth((string) $row['content'], 0, 40, '…')) . '</option>';
+                $tools .= '<option value="' . esc_attr((string) $row['content']) . '">' . esc_html(mb_strimwidth((string) $row['content'], 0, 40, '…')) . '</option>';
            }
-            $html .= '</select>';
+            $tools .= '</select>';
        }
-        return $html . '<button type="submit" class="button button-primary">' . esc_html__('发送回复', 'aksrt') . '</button></div></form>';
+        return $this->ticket_composer('reply', $id, $field, __('回复用户', 'aksrt'), __('发送后用户将收到通知', 'aksrt'), __('填写回复内容…', 'aksrt'), 4, $tools, __('发送回复', 'aksrt'), true);
    }

-    private function ticket_editor(string $id, string $label, string $placeholder, int $rows): string {
-        return '<label class="aksrt-ticket-detail__heading" for="' . esc_attr($id) . '">' . esc_html($label) . '</label>'
-            . '<textarea id="' . esc_attr($id) . '" name="content" rows="' . $rows . '" maxlength="' . TicketSettings::reply_max() . '" required data-aksrt-ticket-editor aria-describedby="' . esc_attr($id) . '-count" placeholder="' . esc_attr($placeholder) . '"></textarea>'
-            . '<span id="' . esc_attr($id) . '-count" class="aksrt-ticket-counter" data-aksrt-ticket-counter="' . esc_attr($id) . '">0 / ' . TicketSettings::reply_max() . '</span>';
+    /** 输入框与工具栏合为一个整体：预设回复、字数与提交按钮同排。 */
+    private function ticket_composer(string $action, int $id, string $field, string $label, string $hint, string $placeholder, int $rows, string $tools, string $submit, bool $primary): string {
+        $max = TicketSettings::reply_max();
+        return $this->ticket_form_open($action, $id, 'aksrt-ticket-composer aksrt-ticket-composer--' . $action)
+            . '<div class="aksrt-ticket-composer__head"><label for="' . esc_attr($field) . '">' . esc_html($label) . '</label>'
+            . ($hint !== '' ? '<span class="aksrt-ticket-hint">' . esc_html($hint) . '</span>' : '') . '</div>'
+            . '<div class="aksrt-ticket-composer__box"><textarea id="' . esc_attr($field) . '" name="content" rows="' . $rows . '" maxlength="' . $max . '" required data-aksrt-ticket-editor aria-describedby="' . esc_attr($field) . '-count" placeholder="' . esc_attr($placeholder) . '"></textarea>'
+            . '<div class="aksrt-ticket-composer__bar">' . $tools
+            . '<span id="' . esc_attr($field) . '-count" class="aksrt-ticket-counter" data-aksrt-ticket-counter="' . esc_attr($field) . '">0 / ' . $max . '</span>'
+            . '<button type="submit" class="button' . ($primary ? ' button-primary' : '') . '">' . esc_html($submit) . '</button></div></div></form>';
    }

    private function ticket_info_card(array $ticket): string {
@@ -109,7 +105,7 @@ trait UsersMenusTicketsDetail {
        }
        $rows[] = [__('提交时间', 'aksrt'), esc_html((string) $ticket['post_time'])];
        if ((int) $ticket['urge_count'] > 0) {
-            $rows[] = [__('催单', 'aksrt'), esc_html(sprintf(__('%1$d 次，最近 %2$s', 'aksrt'), (int) $ticket['urge_count'], (string) $ticket['last_urge_time']))];
+            $rows[] = [__('催单', 'aksrt'), '<span class="aksrt-ticket-urge">' . esc_html(sprintf(__('%1$d 次，最近 %2$s', 'aksrt'), (int) $ticket['urge_count'], (string) $ticket['last_urge_time'])) . '</span>'];
        }
        $html = '<section class="aksrt-ticket-detail__card"><div class="aksrt-ticket-section-head"><h3>' . esc_html__('工单信息', 'aksrt') . '</h3>';
        if ($editable) {
@@ -179,11 +175,21 @@ trait UsersMenusTicketsDetail {
        return $options;
    }

-    private function ticket_message_head(int $user_id, string $name, string $role, string $time): string {
-        $avatar = function_exists('aksrt_get_avatar_url') ? aksrt_get_avatar_url($user_id, 64) : '';
-        return '<header class="aksrt-ticket-detail__msg-head">'
-            . ($avatar !== '' ? '<img src="' . esc_url($avatar) . '" alt="" width="32" height="32">' : '')
-            . '<strong>' . esc_html($name !== '' ? $name : '#' . $user_id) . '</strong><span class="aksrt-ticket-hint">' . esc_html($role) . '</span><time>' . esc_html($time) . '</time></header>';
+    private function ticket_notes_card(int $id): string {
+        $notes = TicketNoteService::for_ticket($id);
+        $html = '<section class="aksrt-ticket-detail__card aksrt-ticket-detail__private"><div class="aksrt-ticket-section-head"><h3>' . esc_html__('内部备注', 'aksrt');
+        if ($notes !== []) {
+            $html .= ' <span class="aksrt-ticket-pill">' . count($notes) . '</span>';
+        }
+        $html .= '</h3></div><p class="aksrt-ticket-hint">' . esc_html__('仅管理员可见，不会发送给用户。', 'aksrt') . '</p>';
+        if ($notes !== []) {
+            $html .= '<ol class="aksrt-ticket-detail__notes">';
+            foreach ($notes as $note) {
+                $html .= '<li><div class="aksrt-ticket-detail__note-head"><strong>' . esc_html((string) $note['admin_name']) . '</strong><time>' . esc_html((string) $note['created_at']) . '</time></div><div>' . nl2br(esc_html((string) $note['content'])) . '</div></li>';
+            }
+            $html .= '</ol>';
+        }
+        return $html . $this->ticket_composer('note', $id, 'aksrt-ticket-note-' . $id, __('添加备注', 'aksrt'), '', __('记录处理进展、排查结论…', 'aksrt'), 2, '', __('添加内部备注', 'aksrt'), false) . '</section>';
    }

    private function ticket_attachments_html(array $urls): string {