[598][@ant] docs(marketplace): дизайн-система Эпик 10 — 3 e2e скриншота витрины

- сценарий marketplace/chairman/design-system (chairman, 3 кадра прокрутки страницы) - проза chairman/design-system.md: список 13 custom-компонентов, UX-DR19/20/21/22/23/29/30/31 - покрыт последний marketplace-маршрут /market/design-system (виден только chairman/member) - mkdocs.yml: добавлен пункт «Дизайн-система Стола заказов» под Стол председателя (Marketplace)
2026-05-20 23:33:21 +00:00
parent 4d150f6140
commit 4bf9d3cd7b
6 changed files with 136 additions and 0 deletions
@@ -0,0 +1,62 @@
+// Сценарий: Стол председателя → Дизайн-система marketplace (Эпик 10).
+// Витрина 13 custom-компонентов для утверждения председателем/советом
+// до их применения в эпиках 1-9. Не выходит в production-меню пайщикам.
+
+import { cleanViteOverlays, env } from '../../../lib/harness.mjs';
+
+export const meta = {
+  title: 'Дизайн-система Стола заказов',
+  docPath: 'new/marketplace/chairman/design-system.md',
+  assetsDir: 'assets/new/marketplace/chairman/design-system',
+  role: 'chairman',
+};
+
+export default async ({ page, shot }) => {
+  // Login as chairman через стандартный pattern.
+  await page.goto(`${env.BASE_URL}/${env.COOPNAME}/auth/signin`, { waitUntil: 'domcontentloaded', timeout: 60000 });
+  await page.evaluate(() => localStorage.setItem('harness:noBranchOverlay', '1'));
+  await page.waitForSelector('button:has-text("Войти")', { timeout: 60000 });
+  await cleanViteOverlays(page);
+  await page.locator('label:has-text("электронную почту")').locator('input').fill(env.CHAIRMAN_EMAIL);
+  await page.locator('label:has-text("ключ доступа")').locator('input').fill(env.CHAIRMAN_WIF);
+  await cleanViteOverlays(page);
+  await page.locator('button:has-text("Войти")').click();
+  await page.waitForFunction(
+    () => !/auth\/signin/.test(window.location.href),
+    { timeout: 30000 },
+  ).catch(() => {});
+  await page.waitForLoadState('networkidle', { timeout: 15000 }).catch(() => {});
+
+  // Дизайн-система — длинная скроллящаяся страница; снимем 3 проекта
+  // через window.scrollTo, чтобы пройтись по верху, середине и низу.
+  await page.goto(`${env.BASE_URL}/${env.COOPNAME}/market/design-system`, { waitUntil: 'domcontentloaded', timeout: 45000 });
+  await page.waitForLoadState('networkidle', { timeout: 20000 }).catch(() => {});
+  await page.waitForTimeout(3000);
+  await cleanViteOverlays(page);
+
+  await shot(
+    page,
+    '01-top',
+    'Дизайн-система Стола заказов — верхняя часть витрины компонентов',
+  );
+
+  // Прокрутить вниз на 1 viewport
+  await page.evaluate(() => window.scrollTo({ top: window.innerHeight, behavior: 'instant' }));
+  await page.waitForTimeout(1500);
+  await cleanViteOverlays(page);
+  await shot(
+    page,
+    '02-middle',
+    'Дизайн-система: средняя часть витрины (после первой прокрутки)',
+  );
+
+  // Прокрутить ещё ниже
+  await page.evaluate(() => window.scrollTo({ top: window.innerHeight * 2.5, behavior: 'instant' }));
+  await page.waitForTimeout(1500);
+  await cleanViteOverlays(page);
+  await shot(
+    page,
+    '03-bottom',
+    'Дизайн-система: нижняя часть витрины',
+  );
+};
@@ -0,0 +1,73 @@
+---
+title: Дизайн-система Стола заказов
+generated_by: docs-harness
+scenario: marketplace/chairman/design-system
+---
+
+# Дизайн-система Стола заказов
+
+Внутренний раздел для технической команды и совета: витрина 13 custom-компонентов и фундаментальных дизайн-токенов **«Стола заказов»**. Открывается только председателю и членам совета (роль `chairman` или `member` в системе access-matrix). Из меню обычного пайщика скрыта.
+
+!!!info "Зачем эта страница"
+    Дизайн-система — это **источник правды для всех других экранов marketplace**. До применения компонентов в эпиках 1–9 (Каталог, Создание предложения, Выдача и т. д.) их утверждает совет — здесь, на единой витрине. Эпик 10 — последний эпик в плане marketplace, он закрывает визуальную совместимость всех экранов.
+
+URL раздела: `/<coopname>/market/design-system` (в нашем стенде — `voskhod`).
+
+## 1. Верх витрины — токены и палитра
+
+![Витрина дизайн-системы: левый sidebar со списком 13 компонентов, главное окно — секции «Дизайн-токены», «Палитра» и «Статусные чипы»](/assets/new/marketplace/chairman/design-system/01-top.png)
+
+Слева — навигация по 13 компонентам:
+
+1. **TakeoverDialog**
+2. **WalletTimeline**
+3. **OrderCard**
+4. **CatalogOfferCard**
+5. **BarcodeLabel**
+6. **ExpeditionShippingBox**
+7. **PvzPicker**
+8. **TTNPreview**
+9. **WarehouseSummaryGrid**
+10. **IssuanceFlowCard**
+11. **KUMapWithList**
+12. **MetadataInline**
+13. *(и связанные подкомпоненты)*
+
+Каждый пункт sidebar'а содержит маркер статуса (зелёный «UX-DR» — утверждено / красный — на доработке). Это позволяет совету визуально оценить, какие компоненты уже готовы к применению в эпиках.
+
+Главная зона страницы открывается с верхней секции — **«Дизайн-токены — Story 10.1»**:
+
+- **Палитра (UX-DR19)** — pri-coop цвета и кастомизация. Видны базовые цвета: primary, secondary, accent, dark, positive, info, warning, negative, neutral.
+- **Статусные чипы (UX-DR20)** — состояния (готов / в работе / ошибка), которые применяются в OrderCard, IssuanceFlowCard и фильтрах «Моих заказов».
+
+## 2. Середина — типографика, spacing, touch-targets, per-роль layout
+
+![Дизайн-система: секции «Типографика (UX-DR21)», «Spacing (UX-DR22)», «Touch-targets (UX-DR23)», «Per-роль layout (UX-DR31)»](/assets/new/marketplace/chairman/design-system/02-middle.png)
+
+- **Типографика (UX-DR21)** — иерархия заголовков: `H1`, `H2 — заголовок страницы`, `H3 — заголовок блока`, `H6 — карточка`, `Body — основной текст пайщика`. Указано, что подписи под формами идут стилем `Body` без жирности.
+- **Spacing (UX-DR22)** — единицы отступов и сетка межблочных расстояний.
+- **Touch-targets (UX-DR23)** — минимальные размеры кликабельных областей: **44PX (MOBILE-ORDER)** и **44PX (OPERATOR-POS)**. Это обязательный минимум для мобильного UX (палец на тач-экране).
+- **Per-роль layout (UX-DR31)** — четыре эталонных раскладки: «Стол заказчика», «Стол поставщика», «Стол ПВЗ», «Стол админа». Каждая раскладка обоснована: что в центре, что в правой панели, какие кнопки primary/secondary.
+
+## 3. Нижняя часть — grid и icons
+
+![Дизайн-система: продолжение спецификации; секции «Per-роль layout» с кнопками действий и «Grid (UX-DR29) / Icons (UX-DR30)»](/assets/new/marketplace/chairman/design-system/03-bottom.png)
+
+В нижней части видна детализация раскладок:
+
+- В **Столе заказчика** primary-кнопка — «Заказать» (зелёная).
+- В **Столе поставщика** primary — «Опубликовать» (синяя).
+- В **Столе ПВЗ** primary — «Выдать» / «Принять» (зависит от статуса заказа).
+
+И финальная секция — **Grid (UX-DR29) / Icons (UX-DR30)**:
+
+- Сетка реализована на стандартной 12-column flexbox-сетке Quasar.
+- Иконки — **Font Awesome free** (см. атрибут `icon` у каждого route в `extensions/market/install.ts`).
+
+!!!warning "Не редактировать без обновления документации"
+    Любое изменение токенов, палитры, размеров touch-targets или сетки в дизайн-системе должно сопровождаться обновлением документации в эпиках 1–9. Совет проверяет визуальную целостность Стола заказов именно по этой странице.
+
+!!!note "Связанные документы"
+    - Спецификации компонентов лежат в `_bmad-output/planning-artifacts/<UX-DR>.md`.
+    - Технические требования — Story 10.1 (Дизайн-токены), 10.2–10.14 (по каждому из 13 компонентов).
+    - Полный обзор маршрутов — [«Разделы Стола заказов»](./market-tour.md).
@@ -209,6 +209,7 @@ nav:
    - Стол председателя кооператива (Marketplace):
      - Обзор Стола председателя: new/marketplace/chairman/dashboard.md
      - Экскурсия по разделам Стола заказов: new/marketplace/chairman/market-tour.md
+      - Дизайн-система Стола заказов: new/marketplace/chairman/design-system.md
      - Модерация предложений: new/marketplace/chairman/offer-moderation.md
      - Категории ЦПП: new/marketplace/chairman/category-whitelist.md
      - Сеть ПВЗ: new/marketplace/chairman/branches.md