Design QA: Client Handler Issue Detail

final result: passed

Evidence

source visual truth path: docs/design/images2/client-03-issue-detail-handler.png
implementation screenshot path: docs/design/implementation-screenshots/client-03-issue-detail-handler.png
viewport: desktop 1600x1000
route/state: /#/handler-detail, platform admin role, selected assigned issue
full-view comparison evidence: opened the source design and refreshed implementation screenshots in the same QA pass.
focused region comparison evidence: checked left issue summary, risk/SLA/status metadata, problem description, attachments, middle process tabs, timeline, comment composer, linked task, right AI recommendation, similar history, and next action stack.

No actionable P0/P1/P2 findings remain for this screen.
Typography: selected issue title, metadata labels, timeline events, AI recommendations, and action labels now use a dense handler-workspace hierarchy instead of the previous sparse summary/time-line/action split.
Spacing and layout rhythm: implementation now follows the target's three-column handler detail surface: issue context rail, process workspace, and AI/action rail.
Colors and visual tokens: high-risk/SLA states, timeline nodes, AI confidence, similar issue tags, and primary handler actions stay inside the existing semantic token system.
Image and asset fidelity: this screen is pure app UI; no raster assets are required. Timeline, comment, task, attachment, AI, and action icons use lucide-react.
Copy/content: visible labels match the product domain: 问题详情, 处理过程, 关联信息, SLA 详情, AI 处理建议, 相似历史问题, 下一步动作, 接单处理, 请求协作, 转派, 提交处理结果.

Split handler issue detail UI into focused components under src/features/client/components/handler.
Added HandlerIssueSummaryAside for left-side issue context, metadata, description, and attachments.
Added HandlerTimelineWorkspace for process tabs, event timeline, comment composer, linked task, and submit result action.
Added HandlerInsightPanel for AI recommendation, root-cause notes, similar history, and next actions.
Reworked HandlerIssueDetailPage so it coordinates selected issue data, triage data, permissions, and existing action handlers.
Fixed AI confidence display to normalize both ratio-style and percent-style values.
Refreshed implementation screenshots with npm run capture:pages.

The linked task and attachment rows are currently demo metadata. Production task/attachment collections can be wired into the same layout components later.

Keep handler-specific UI under components/handler to avoid returning to a single large detail page.
Preserve action button labels because browser smoke verifies the handler workflow by text: 接单处理, 请求协作, 转派, 提交处理结果.
Continue the next fidelity pass on the remaining client workbench density.

P3: add a mobile-specific capture for handler detail after the client workbench pass is finalized.