From 7da691e4c661805cff5323a1b2a584ab5a93dad4 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Wed, 12 Aug 2026 18:11:43 +0800
Subject: [PATCH] docs: add mobile OA detail actions fold implementation plan

Break the folded footer and default-remark work into helper tests plus OaDetail.vue tasks.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 ...026-08-12-mobile-oa-detail-actions-fold.md | 399 ++++++++++++++++++
 1 file changed, 399 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-08-12-mobile-oa-detail-actions-fold.md

diff --git a/docs/superpowers/plans/2026-08-12-mobile-oa-detail-actions-fold.md b/docs/superpowers/plans/2026-08-12-mobile-oa-detail-actions-fold.md
new file mode 100644
index 00000000..1ae0a803
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-12-mobile-oa-detail-actions-fold.md
@@ -0,0 +1,399 @@
+# Mobile OA Detail Actions Fold 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:** Collapse approve-mode footer on mobile OA detail to `⋯` + 打回 + 同意, put other actions in an ActionSheet, and prefill default remarks for comment / add-sign / transfer.
+
+**Architecture:** Extract pure helpers (`defaultComment`, `buildMoreActions`) for defaults and more-menu items; change only `OaDetail.vue` approve footer + sheet wiring. Non-approve footers stay as today. Visual authority: `mobile-ui/zkxw-mobile-oa-detail-actions-demo.html` scheme A.
+
+**Tech Stack:** Vue 3, Vant 4 (`van-action-sheet`, existing `van-dialog` / `van-popup`), Vite; Node built-in `node:test` for pure helper tests (no new test deps).
+
+**Spec:** `docs/superpowers/specs/2026-08-12-mobile-oa-detail-actions-fold-design.md`
+
+---
+
+## File map
+
+| File | Responsibility |
+|------|----------------|
+| Create: `mobile-oa-h5/src/oa/oa-action-defaults.js` | Default remark strings + `buildMoreActions(detail)` |
+| Create: `mobile-oa-h5/src/oa/oa-action-defaults.test.js` | Node tests for helpers |
+| Modify: `mobile-oa-h5/src/views/OaDetail.vue` | Approve footer fold, ActionSheet, wire defaults |
+| Unchanged: `mobile-ui/zkxw-mobile-oa-detail-actions-demo.html` | Visual reference only |
+
+---
+
+### Task 1: Pure helpers for defaults and more actions
+
+**Files:**
+- Create: `mobile-oa-h5/src/oa/oa-action-defaults.js`
+- Create: `mobile-oa-h5/src/oa/oa-action-defaults.test.js`
+
+- [ ] **Step 1: Write the failing test**
+
+Create `mobile-oa-h5/src/oa/oa-action-defaults.test.js`:
+
+```js
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { defaultComment, buildMoreActions } from './oa-action-defaults.js'
+
+describe('defaultComment', () => {
+  it('returns fixed defaults by kind', () => {
+    assert.equal(defaultComment('approve'), '同意')
+    assert.equal(defaultComment('reject'), '拒绝')
+    assert.equal(defaultComment('return'), '请修改后重新提交')
+    assert.equal(defaultComment('addSign'), '加签')
+    assert.equal(defaultComment('transfer'), '转交')
+  })
+
+  it('returns empty string for unknown kind', () => {
+    assert.equal(defaultComment('x'), '')
+  })
+})
+
+describe('buildMoreActions', () => {
+  it('orders reject, addSign, transfer, print, close when all allowed', () => {
+    const keys = buildMoreActions({ allowAddSign: true }).map((a) => a.key)
+    assert.deepEqual(keys, ['reject', 'addSign', 'transfer', 'print', 'close'])
+  })
+
+  it('omits addSign when allowAddSign is false', () => {
+    const keys = buildMoreActions({ allowAddSign: false }).map((a) => a.key)
+    assert.deepEqual(keys, ['reject', 'transfer', 'print', 'close'])
+  })
+
+  it('includes addSign when allowAddSign is undefined', () => {
+    const keys = buildMoreActions({}).map((a) => a.key)
+    assert.ok(keys.includes('addSign'))
+  })
+
+  it('sets name and optional color on actions', () => {
+    const reject = buildMoreActions({}).find((a) => a.key === 'reject')
+    assert.equal(reject.name, '拒绝')
+    assert.equal(reject.color, '#ee0a24')
+  })
+})
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+```bash
+cd mobile-oa-h5 && node --test src/oa/oa-action-defaults.test.js
+```
+
+Expected: FAIL (module not found / cannot resolve `./oa-action-defaults.js`)
+
+- [ ] **Step 3: Write minimal implementation**
+
+Create `mobile-oa-h5/src/oa/oa-action-defaults.js`:
+
+```js
+const DEFAULT_COMMENTS = {
+  approve: '同意',
+  reject: '拒绝',
+  return: '请修改后重新提交',
+  addSign: '加签',
+  transfer: '转交'
+}
+
+/** @param {string} kind */
+export function defaultComment(kind) {
+  return DEFAULT_COMMENTS[kind] || ''
+}
+
+/**
+ * More ActionSheet items for approve mode (spec order).
+ * @param {{ allowAddSign?: boolean } | null | undefined} detail
+ * @returns {{ key: string, name: string, color?: string }[]}
+ */
+export function buildMoreActions(detail) {
+  const list = [{ key: 'reject', name: '拒绝', color: '#ee0a24' }]
+  if (detail?.allowAddSign !== false) {
+    list.push({ key: 'addSign', name: '加签' })
+  }
+  list.push(
+    { key: 'transfer', name: '转交' },
+    { key: 'print', name: '打印' },
+    { key: 'close', name: '关闭' }
+  )
+  return list
+}
+```
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+```bash
+cd mobile-oa-h5 && node --test src/oa/oa-action-defaults.test.js
+```
+
+Expected: PASS (all tests)
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add mobile-oa-h5/src/oa/oa-action-defaults.js mobile-oa-h5/src/oa/oa-action-defaults.test.js
+git commit -m "$(cat <<'EOF'
+feat(oa): add mobile detail action defaults helpers
+
+Centralize default approval remarks and more-menu action order for the folded footer.
+EOF
+)"
+```
+
+---
+
+### Task 2: Fold approve footer + ActionSheet + default remarks in OaDetail
+
+**Files:**
+- Modify: `mobile-oa-h5/src/views/OaDetail.vue`
+- Test: manual checklist below + re-run helper tests
+
+- [ ] **Step 1: Import helpers and add sheet state**
+
+Near other imports in `<script setup>`, add:
+
+```js
+import { defaultComment, buildMoreActions } from '../oa/oa-action-defaults.js'
+```
+
+After existing refs (`transferComment` etc.), add:
+
+```js
+const moreVisible = ref(false)
+
+const moreActions = computed(() => buildMoreActions(detail.value))
+```
+
+- [ ] **Step 2: Prefill defaults in openers**
+
+Replace `openComment` / `openAddSign` / `openTransfer` bodies so they prefill (keep other logic):
+
+```js
+function openComment(kind) {
+  if (!myPendingTask.value) return
+  commentKind.value = kind
+  commentText.value = defaultComment(kind)
+  commentVisible.value = true
+}
+
+function openAddSign() {
+  if (!myPendingTask.value) return
+  addSignUsers.value = []
+  addSignComment.value = defaultComment('addSign')
+  addSignVisible.value = true
+}
+
+function openTransfer() {
+  if (!myPendingTask.value) return
+  transferUser.value = null
+  transferComment.value = defaultComment('transfer')
+  transferVisible.value = true
+}
+```
+
+- [ ] **Step 3: Add more-sheet handlers**
+
+```js
+function openMore() {
+  if (acting.value || printing.value) return
+  moreVisible.value = true
+}
+
+function onMoreSelect(action) {
+  moreVisible.value = false
+  const key = action?.key || ''
+  if (key === 'reject') openComment('reject')
+  else if (key === 'addSign') openAddSign()
+  else if (key === 'transfer') openTransfer()
+  else if (key === 'print') void onPrint()
+  else if (key === 'close') onClose()
+}
+```
+
+- [ ] **Step 4: Replace approve-mode footer template**
+
+Replace the entire `<footer class="oa-detail__ft">...</footer>` block with:
+
+```vue
+      <footer class="oa-detail__ft">
+        <template v-if="canApprove">
+          <van-button
+            class="oa-detail__btn oa-detail__btn--more"
+            :disabled="acting || printing"
+            aria-label="更多"
+            @click="openMore"
+          >
+            ⋯
+          </van-button>
+          <van-button
+            v-if="detail?.allowReturn !== false"
+            class="oa-detail__btn oa-detail__btn--ghost"
+            :loading="acting"
+            :disabled="acting || printing"
+            @click="openComment('return')"
+          >
+            打回
+          </van-button>
+          <van-button
+            class="oa-detail__btn oa-detail__btn--primary"
+            type="primary"
+            :loading="acting"
+            :disabled="acting || printing"
+            @click="openComment('approve')"
+          >
+            同意
+          </van-button>
+        </template>
+        <template v-else>
+          <van-button class="oa-detail__btn oa-detail__btn--close" @click="onClose">
+            关闭
+          </van-button>
+          <van-button
+            class="oa-detail__btn oa-detail__btn--ghost oa-detail__btn--print"
+            :loading="printing"
+            :disabled="acting || printing"
+            @click="onPrint"
+          >
+            打印
+          </van-button>
+          <van-button
+            v-if="canWithdraw"
+            class="oa-detail__btn oa-detail__btn--ghost"
+            :loading="acting"
+            :disabled="acting"
+            @click="withdraw"
+          >
+            撤销
+          </van-button>
+          <van-button
+            v-if="canCopyRestart"
+            class="oa-detail__btn oa-detail__btn--primary"
+            type="primary"
+            :disabled="acting"
+            @click="goCopyRestart"
+          >
+            复制并重新发起
+          </van-button>
+        </template>
+      </footer>
+```
+
+- [ ] **Step 5: Add ActionSheet markup**
+
+Place after the transfer popup (before closing `</div>` of root), still inside root template:
+
+```vue
+    <van-action-sheet
+      v-model:show="moreVisible"
+      :actions="moreActions"
+      cancel-text="取消"
+      close-on-click-action
+      @select="onMoreSelect"
+    />
+```
+
+- [ ] **Step 6: Add `.oa-detail__btn--more` styles**
+
+In the existing `<style scoped>` next to `.oa-detail__btn--close`, add:
+
+```css
+.oa-detail__btn--more {
+  flex: 0 0 auto;
+  width: 44px;
+  min-width: 44px;
+  padding: 0 !important;
+  border: 1px solid #e2e8f0 !important;
+  background: #fff !important;
+  color: #334155 !important;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  line-height: 1;
+}
+```
+
+Also tighten approve body bottom padding if needed: keep `.oa-detail__body--approve { padding-bottom: 128px; }` (single-row footer is shorter; optional reduce to `96px` if content feels too padded — prefer `96px` after fold).
+
+Change:
+
+```css
+.oa-detail__body--approve {
+  padding-bottom: 96px;
+}
+```
+
+- [ ] **Step 7: Re-run helper tests + build**
+
+```bash
+cd mobile-oa-h5 && node --test src/oa/oa-action-defaults.test.js && npm run build
+```
+
+Expected: tests PASS; Vite build succeeds.
+
+- [ ] **Step 8: Manual UI checklist (dev)**
+
+```bash
+cd mobile-oa-h5 && npm run dev
+```
+
+Open an approve-mode detail URL (`?instanceId=…&taskId=…&mode=approve&token=…`). Verify:
+
+1. Footer shows only `⋯` / 打回 / 同意 (no flat 拒绝/加签/转交/打印/关闭).
+2. More sheet order: 拒绝 → 加签 → 转交 → 打印 → 关闭.
+3. 同意 dialog text starts as `同意`; 打回 as `请修改后重新提交`; 拒绝 as `拒绝`.
+4. Clear 打回 text → confirm shows Toast「打回意见必填」, dialog stays.
+5. 加签 / 转交 sheets open with description prefilled `加签` / `转交`.
+6. Non-approve view still shows 关闭 / 打印 (+ 撤销 / 复制重开 when applicable).
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add mobile-oa-h5/src/views/OaDetail.vue
+git commit -m "$(cat <<'EOF'
+feat(oa): fold mobile detail approve actions into more sheet
+
+Show only return and approve on the footer, move secondary actions to ActionSheet, and prefill default remarks.
+EOF
+)"
+```
+
+---
+
+### Task 3: Spec self-check + graph (if required)
+
+**Files:** none required if only `mobile-oa-h5` Vue/JS touched; graph update is optional for this leaf UI change. Per AGENTS.md, run graph update when function signatures / imports change.
+
+- [ ] **Step 1: Confirm coverage against spec §7**
+
+Map:
+
+| Spec验收 | Covered by |
+|----------|------------|
+| 1 默认只见 ⋯/打回/同意 | Task 2 Step 4 |
+| 2 更多顺序与条件 | Task 1 `buildMoreActions` + Task 2 Step 5 |
+| 3 默认备注与打回必填 | Task 1 + Task 2 Step 2 + existing `onCommentBeforeClose` |
+| 4 加签/转交预填 | Task 2 Step 2 |
+| 5 closeToMini 不变 | No change to submit success paths |
+
+- [ ] **Step 2: Optional graph refresh**
+
+```bash
+./scripts/update-graph.sh backend
+```
+
+Skip if script only tracks backend/web-admin; this change is mobile-oa-h5 only — **skip** unless project policy requires it.
+
+- [ ] **Step 3: Done**
+
+No extra commit if nothing changed.
+
+---
+
+## Self-review (plan vs spec)
+
+1. **Spec coverage:** §4.1–4.3 footer/more/non-approve → Task 2; §5 defaults → Task 1+2; §7 acceptance → Task 2 Step 8 + Task 3. Demo already committed. Non-goals (mobile-h5 / API / web-admin) not in plan.
+2. **Placeholders:** None; full code in steps.
+3. **Consistency:** Keys `reject|addSign|transfer|print|close` match `onMoreSelect` and `buildMoreActions`; default kinds match `openComment` / add-sign / transfer.
+
+---