zkxw/docs/superpowers/plans/2026-08-13-oa-detail-header-stamp.md

OA Detail Header Stamp Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Remove duplicate title on mobile OA detail and show a 72px dingding-style status stamp at the form top-right.

Architecture: Extract resolveStamp to a shared module; add OaStatusStamp.vue; overlay it in OaDetail.vue over the form host.

Tech Stack: Vue 3, mobile-oa-h5, Node assert tests

Spec: docs/superpowers/specs/2026-08-13-oa-detail-header-stamp-design.md

---

Task 1: Extract resolveStamp

Files:

• Create: mobile-oa-h5/src/oa/oa-status-stamp.js

• Create: mobile-oa-h5/src/oa/oa-status-stamp.test.js

• Modify: mobile-oa-h5/src/oa/print/exportOaApprovalPdf.js (re-export / import)

• Write failing tests for stamp mapping

• Implement resolveStamp

• Point print module at shared export

Task 2: OaStatusStamp component

Files:

• Create: mobile-oa-h5/src/oa/components/OaStatusStamp.vue

• Dingding stamp DOM + 72px CSS (demo .sm)

• Props: status → uses resolveStamp

Task 3: Wire OaDetail

Files:

• Modify: mobile-oa-h5/src/views/OaDetail.vue

• Remove header title + status tag

• Wrap form in relative host; render stamp when detail.status

• Drop unused statusText / statusTone imports if unused