61985c1062
- docs/pos-design/: эталон-макет (pos-mockup.html + mockup-*.png) и сверка
«макет | касса» рядом — compare-sale.png, compare-payment.png (данные те же:
4 позиции, 3 362 ₸, получено 5 000 → сдача 1 638 ₸). Расхождений
выравнивания/размеров > 4px нет.
- Перегенерированы скриншоты «Стало» (1920×1080 + 1366×768) и галерея.
- Реальное окно Windows 11 (software-рендер на VM): экран продажи и оплаты
(docs/pos-screenshots/windows/windows11-{sale,payment}.png).
- Обновлены docs/pos-design.md (раздел сверки) и docs/pos-ui-progress.md (итог).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
75 lines
7.3 KiB
Markdown
75 lines
7.3 KiB
Markdown
# Новый внешний вид кассы — прогресс
|
||
|
||
Задача владельца (08.10.2026): «визуально выглядит ужасно, фон мрачный — сделай
|
||
интерфейс более стильным, светлым, удобным». Светлая тема по умолчанию,
|
||
ориентиры Square/Loyverse/Poster. Скорость не ухудшать.
|
||
|
||
## Замеры скорости (до/после)
|
||
| Метрика | До (dark) | После (light) |
|
||
|---|---|---|
|
||
| Холодный старт (процесс→логика), Linux | 146 мс | 149 мс (в пределах шума) |
|
||
| Поиск по штрихкоду | 13,9 мс | 11,2 мс |
|
||
| Поиск по имени на 30 000 | 41,9 мс | 33,2 мс |
|
||
|
||
Скорость не ухудшилась (светлая тема — только ресурсы/стили, логика та же).
|
||
|
||
## План
|
||
1. [x] Токены светлой темы в `Styles/Tokens.axaml` (ThemeDictionaries Light/Dark) + docs/pos-design.md.
|
||
2. [x] Светлая тема по умолчанию (`RequestedThemeVariant=Light`); тёмная — те же токены (вариант Dark).
|
||
3. [x] Экран продажи: белая верхняя полоса (лого/точка/кассир/чипы смены+связи),
|
||
поиск со скан-иконкой, корзина-карточки со степпером [−]N[+] и удалением,
|
||
белая карточка чека с крупным зелёным ИТОГО и «Оплатить · F12», вторичные
|
||
кнопки-контуры, пустая корзина-заглушка, капсулы горячих клавиш.
|
||
4. [x] Оплата (светлое модальное 880px): сегменты Нал/Карта/Смешанная с векторными
|
||
иконками (активный зелёный, иконка белая), быстрые суммы 3×2
|
||
(без сдачи/4000/5000/10000/20000/своя сумма), клавиатура 3×4 по 72px, крупная «Сдача».
|
||
5. [x] Остальные экраны в стиле: вход (логин + PIN-пад), регистрация/выбор точки,
|
||
смена/Z-отчёт (разница цветом), возврат (степперы). Нет связи — чип в шапке.
|
||
6. [x] Избранные товары: сервер Product.IsFavorite/FavoriteOrder (миграция Phase37),
|
||
POS-синк + карточка товара (ProductInput); PosStore.GetFavorites + плитки
|
||
(сворачиваемая сетка 3 колонки) на экране продажи. Unit-тест.
|
||
7. [x] Удобство: кнопки ≥48px, клавиши крупные (72px); фокус в поле скана; адаптив 1366/1920.
|
||
8. [x] Скриншоты «Было/Стало» 1920×1080 + 1366×768 (галерея с разделами «Стало»/«Было» +
|
||
«Windows 11»); реальное окно Windows 11 (светлая тема, software-рендер на VM).
|
||
9. [x] --uitest OK; unit 82 зелёные; скорость не хуже (старт 74мс, скан 13.7мс, поиск 1.1мс).
|
||
Smoke Linux OK, Windows OK. Сверка с макетом `--compare` → расхождений > 4px нет.
|
||
10. [x] Коммиты тематические в main; push origin. global.json не коммитил.
|
||
|
||
### Эталон-макет Mac-Claude (1:1) — выполнено
|
||
Владелец: «вёрстка кривая». Перенёс макет `docs/pos-design/pos-mockup.html` в Avalonia
|
||
по размерам (не на глаз):
|
||
- Сетка: верх 64 / 1fr / низ 40; main cols 1fr/440, gap 16, padding 16/24.
|
||
- Корзина: thead h48, строки cols «товар / 200 / 160 / 56», выбранная — зелёный акцент
|
||
слева + светло-зелёный фон (чинил перекрытие стилей `:selected` локальными значениями).
|
||
- Степпер слитный 44/1fr/44; правая панель — 2-кол. сетка, «Очистить чек» во всю ширину.
|
||
- Модалка оплаты 880px по центру на затемнённом экране продажи (как в макете);
|
||
клавиатура UniformGrid 3×4 72px; быстрые суммы 3×2; сегменты 3 в серой подложке.
|
||
- Иконки везде векторные (`Path`, stroke), эмодзи убраны.
|
||
- Бейдж «Отложенные · N» как в макете.
|
||
- Сверка: `--compare` (CompareRunner, SkiaSharp) → `docs/pos-design/compare-sale.png`,
|
||
`compare-payment.png` («макет | касса» рядом, данные те же: 4 позиции, 3 362 ₸, 5 000 → сдача 1 638 ₸).
|
||
Расхождений выравнивания > 4px нет.
|
||
- Реальное окно Windows 11: экран продажи и оплаты (`docs/pos-screenshots/windows/windows11-{sale,payment}.png`).
|
||
|
||
### Замечания Mac-Claude по скриншотам — исправлены
|
||
1. Текст во всех кнопках по центру (Button.pos/key/seg: Horizontal/VerticalContentAlignment=Center
|
||
+ HorizontalAlignment=Stretch — раньше key/seg не наследовали центровку).
|
||
2. Клавиатура оплаты — ровная сетка 3×4 одинаковых крупных клавиш (72px).
|
||
3. Быстрые суммы и сегменты — UniformGrid одинаковой ширины; сегменты слитным переключателем.
|
||
4. Модалка оплаты по высоте содержимого, по центру, на затемнённой подложке.
|
||
5. Правая панель — ровная 2-кол. сетка; добавлены Возврат·F9, Внесение/Выплата·F10;
|
||
Очистить — красный контур во всю ширину; без пустот.
|
||
6. Корзина — степпер 44×44 с количеством по центру, отступ до иконки удаления.
|
||
7. Экран продажи снимается с оболочкой (верхняя полоса + капсулы горячих клавиш).
|
||
8. «Избранное» — шеврон ▾/▸.
|
||
|
||
НЕ трогать: прод, shared-postgres, global.json, gateway nginx, sklad, другие VM.
|
||
|
||
## Журнал
|
||
- 08.10 — старт; сохранены «до»-скриншоты (22), замерен baseline; планы зафиксированы.
|
||
- 08.10 — светлая тема + избранное + правки выравнивания (коммиты 7a93c19, ac55da8, 29ef769, 85e486a).
|
||
- 08.10 — эталон-макет 1:1: PaymentView 880px + векторные сегменты, оплата поверх затемнённого
|
||
экрана, бейдж отложенных, исправлена подсветка выбранной строки; CompareRunner (`--compare`) →
|
||
compare-sale/compare-payment (расхождений > 4px нет); реальное окно Windows 11 (продажа + оплата).
|
||
Проверено: --uitest OK, 82 unit зелёные, smoke OK, скорость не хуже (старт 74мс, скан 13.7мс).
|