64 lines
5.6 KiB
Markdown
64 lines
5.6 KiB
Markdown
# A01 Complete Button Assets Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:subagent-driven-development` or `superpowers:executing-plans` task by task. Steps use checkbox syntax for tracking.
|
||
|
||
**Goal:** Replace A01's temporary CSS-and-corner construction with two audited, complete opaque button images that match the approved A01 button proportion.
|
||
|
||
**Architecture:** `pages/auth/a01-entry.vue` remains the owner of button text, icons, agreement gating, and navigation. `a01-primary-button.png` and `a01-secondary-button.png` own each button's paper/vermillion surface, double border, and all four corner ornaments; they render as one non-interactive image beneath the DOM content.
|
||
|
||
**Tech Stack:** uni-app Vue 3, scoped SCSS, local opaque PNG assets, PowerShell/System.Drawing audits.
|
||
|
||
## Global Constraints
|
||
|
||
- Use the approved `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` only as the visual reference; never crop it into a runtime asset.
|
||
- Both final assets are opaque, complete button skins at a 4.492:1 native ratio; preserve DOM labels, icons, events, and agreement behaviour.
|
||
- Do not use CSS, SVG, or four independently placed corner images to render the final visible border or ornament.
|
||
- Work directly in the current checkout. Do not commit, push, or upload Git changes; the user will do that.
|
||
- Change only A01 assets, its page, focused audits, and the affected asset ledger/record.
|
||
|
||
---
|
||
|
||
### Task 1: Define the complete-button contracts
|
||
|
||
**Files:**
|
||
- Modify: `tests/a01-asset-alpha-audit.ps1`
|
||
- Modify: `tests/a01-a02-ui-contract.ps1`
|
||
|
||
**Interfaces:** Produces assertions for `a01-primary-button.png`, `a01-secondary-button.png`, and a single `.entry-button__skin` image per A01 button.
|
||
|
||
- [x] Add a `$buttons` list containing the two final assets. For each, load the bitmap, require fully opaque four corners, require an aspect ratio within `0.01` of `4.492`, and output a pass message. Do not add these assets to the transparent-icon loop.
|
||
- [x] Require `a01-primary-button.png`, `a01-secondary-button.png`, and `entry-button__skin`; reject `auth-button-corner.png`, `button-corner-asset`, `.entry-button::after`, and the button CSS `background`/`border` construction.
|
||
- [x] Verify RED with `powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1` and `powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1`. Both failed because the final assets and page structure did not exist.
|
||
|
||
### Task 2: Generate and audit complete opaque button skins
|
||
|
||
**Files:**
|
||
- Create: `static/assets/foundation/opaque/a01-primary-button.png`
|
||
- Create: `static/assets/foundation/opaque/a01-secondary-button.png`
|
||
|
||
**Interfaces:** Each asset is a complete opaque PNG skin at 4.492:1. Primary uses muted cinnabar with antique-gold double rules and compact symmetrical corner curls; secondary uses warm rice paper with antique-gold double rules and matching curls. Neither contains copy, icons, a screenshot crop, watermark, or transparency.
|
||
|
||
- [x] Generate one source for each skin from the approved A01 visual reference. The sources contain no Chinese text, icon, shadow, or external background in the final crop.
|
||
- [x] Crop only the generated source's own button surface. The central paper/vermillion field and vertical side rules were extended without scaling the corner artwork; both skins are within `0.01` of `4.492` and contain no cropped A01 reference pixels.
|
||
- [x] Verify asset GREEN with `powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1`; all transparent-asset checks and both opaque-button checks pass.
|
||
|
||
### Task 3: Replace the A01 temporary construction and document ownership
|
||
|
||
**Files:**
|
||
- Modify: `pages/auth/a01-entry.vue`
|
||
- Modify: `docs/design/P00_页面结构与资产清单.md`
|
||
- Modify: `docs/交接记录.md`
|
||
|
||
**Interfaces:** `openLogin`, `prepareWechatLogin`, `prepareRegister`, `prepareAgreement`, and `toggleAgreement` remain unchanged. Each `.entry-button` contains one `.entry-button__skin` image below `.entry-button__content`.
|
||
|
||
- [x] Delete the eight `button-corner-asset` images and their CSS. Add the primary/secondary `.entry-button__skin` image as the visual layer inside each button. Remove button borders, pseudo-element inner borders, and button CSS backgrounds; keep dimensions, text, icons, event handlers, and `entry-button__content` stacking unchanged.
|
||
- [x] Replace the two unapproved candidate rows in P00 with the two final opaque assets, their actual dimensions, A01 ownership, page reference, and retained status. Update the handoff record to say that the candidates were replaced locally and that runtime screenshot regression remains pending.
|
||
- [x] Verify page GREEN with `powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1`, `powershell -ExecutionPolicy Bypass -File tests\a01-asset-alpha-audit.ps1`, `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`, `powershell -ExecutionPolicy Bypass -File tests\compile-audit.ps1`, and `git diff --check`. Every command exits `0`.
|
||
|
||
### Task 4: Complete local verification
|
||
|
||
**Files:** None unless a focused audit exposes a defect.
|
||
|
||
- [x] Run `Get-ChildItem -LiteralPath tests -Filter *.ps1 | Sort-Object Name | ForEach-Object { & powershell -ExecutionPolicy Bypass -File $_.FullName; if ($LASTEXITCODE -ne 0) { exit $LASTEXITCODE } }` and `git diff --check`. All scripts pass and diff check exits `0`.
|
||
- [ ] The user captures unchecked A01 screenshots at `412 × 915` and `320 × 568` in HBuilderX/Android. Do not mark visual acceptance complete until those screenshots confirm the button borders, text placement, and small-screen agreement row.
|