Files
vmall/openspec/specs/frontend-shop-admin/spec.md
T
Chengdong Zhang 0d0e10b97b feat(ui): adopt Tailwind v4 design system and archive change
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin
- Add @vmall/shared/theme.css tokens with html[data-accent] presets
- Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage,
  VAccentSwatch, useAccent) as a Nuxt module
- Convert all three apps to kit + utilities; delete ui.css/mall.css and
  every <style scoped>; consoles get accent presets, mall locked to red
- Fix VCard boolean prop default (padding) and PDP/store stale
  useAsyncData keys on param navigation
- Archive adopt-tailwind-design-system; new frontend-ui capability spec
2026-09-22 18:22:50 +08:00

3.7 KiB

frontend-shop-admin Specification

Purpose

The merchant console for managing a shop's products and fulfilling its orders.

Requirements

Requirement: Merchant product management

Shop users SHALL manage only their own shop's products: create/edit bilingual content, manage SKUs, publish/unpublish with immediate effect on the storefront.

Scenario: publish visible in mall

  • WHEN a merchant publishes a product in shop-admin
  • THEN it appears in the mall product list for the matching locale

Requirement: Merchant fulfillment

Shop users SHALL see incoming orders, create shipments, mark them shipped, and issue requested invoices.

Scenario: ship an order

  • WHEN a merchant creates a shipment for a paid order and marks it shipped
  • THEN the shopper sees the shipment with tracking info

Requirement: Merchant coupon management

Shop users SHALL manage only their shop's coupon templates from shop-admin, including localized title, amount and threshold in minor units, currency, claim stock, active window, and enabled state. Shop-admin SHALL expose a coupons navigation entry beside existing shop operations.

Scenario: create an active template

  • WHEN a shop owner creates a valid coupon template
  • THEN the template is available for eligible customers to claim during its active window

Scenario: coupons appear in shop navigation

  • WHEN an authenticated shop user opens shop-admin
  • THEN a coupons management entry is reachable without leaving the shop-scoped console

Requirement: Merchant flash-sale management

Shop users SHALL manage only their flash-sale sessions and items in shop-admin, choosing their own SKU, active window, minor-unit sale price, reserved stock, and per-customer limit. Shop-admin SHALL expose a flash-sale navigation entry beside existing shop operations.

Scenario: configure item

  • WHEN a merchant creates an active valid flash-sale item for its SKU
  • THEN it appears to customers through active flash-sale discovery

Scenario: flash sales appear in shop navigation

  • WHEN an authenticated shop user opens shop-admin
  • THEN a flash-sale management entry is reachable without leaving the shop-scoped console

Requirement: Merchant group-buying management

Shop users SHALL manage only their shop's group-buying activities in shop-admin, configuring an owned SKU, localized display content, minor-unit group price, required paid-member count, active window, and group lifetime. Shop-admin SHALL expose a group-buying navigation entry beside existing shop operations.

Scenario: publish activity

  • WHEN a merchant publishes a valid group-buying activity
  • THEN shoppers can discover it during its active window

Scenario: group buying appears in shop navigation

  • WHEN an authenticated shop user opens shop-admin
  • THEN a group-buying management entry is reachable without leaving the shop-scoped console

Requirement: Shared design system in the merchant console

The shop-admin console SHALL use @vmall/ui primitives and @vmall/shared theme tokens for chrome (buttons, fields, cards, tables, page headers, nav). It MUST NOT depend on Element Plus or the removed ui.css stylesheet.

Scenario: console chrome from the kit

  • WHEN an authenticated shop user opens shop-admin
  • THEN primary actions and page chrome render through the shared kit with the current accent preset

Requirement: Accent preset switcher

Shop-admin SHALL expose the shared accent preset control (red, blue, teal, violet) in the authenticated shell header.

Scenario: switcher visible

  • WHEN an authenticated shop user opens shop-admin
  • THEN they can select an accent preset without leaving the current page