c8c0be56b4
- Реальное окно Windows 11 заново: продажа (1280×800, компактный уровень — «Очистить чек» виден, ничего не перекрывается) и оплата. - docs/pos-screenshots/density/: экран продажи в 1280×720/800, 1366×768, 1920×1080 (подтверждает адаптив панели по высоте и шапки по ширине) + раздел в галерее. - Перегенерированы «Стало»-кадры и compare-*.png — вёрстка 1:1 с макетом сохранена. - docs/pos-ui-progress.md: раздел «Полировка» 7/7. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
100 lines
10 KiB
Markdown
100 lines
10 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.
|
||
|
||
## Полировка по реальному окну Windows 11 (Mac-Claude, 08.10)
|
||
Замечания по `windows/windows11-sale.png` (VM 1280×800, maximized → высоты меньше, чем в headless):
|
||
1. [x] Правая панель не влезала по высоте → адаптив по высоте в `SaleView.axaml.cs`
|
||
(подписка на Bounds): уровни normal/compact/tiny — меньше отступы (margin 24→18→12,
|
||
spacing 16→10→8), скрыт блок «Последний чек», ИТОГО 52→46→40, Оплатить 76→64→56,
|
||
кнопки 52→46→42; `ClipToBounds` на панели. Проверено 1280×720/800, 1366×768, 1920×1080
|
||
(docs/pos-screenshots/density/) + реальное окно VM 1280×800 — «Очистить чек» виден, ничего не
|
||
перекрывается. 125% = меньше логическое разрешение → уровень tiny (та же логика по высоте).
|
||
2. [x] Шапка — Grid вместо StackPanel; чипы в отдельной колонке (никогда не обрезаются).
|
||
Адаптив по ширине в `MainWindow.axaml.cs`: <1400 — короткие чипы («Смена открыта»,
|
||
«На связи» без очереди); <1100 — скрыт «Магазин …».
|
||
3. [x] Иконка «Выплата» (одиночная горизонталь) схлопывалась при Stretch=Uniform → Stretch=None
|
||
с координатами в 18-боксе; «Внесение» выровнял так же. Остальные Path — 2D, в порядке.
|
||
4. [x] Hover строки — светлый #F7FBF8 (PosSelRow) вместо тёмного из темы; тема-hover на
|
||
ContentPresenter погашен.
|
||
5. [x] Плитки избранного — Grid `*,Auto`: название по центру сверху, цена прибита к низу —
|
||
у всех плиток цена на одной линии; высота 84 едина.
|
||
6. [x] Полоса горячих клавиш — `HorizontalAlignment=Left` (как в макете).
|
||
7. [x] Реальное окно Windows 11 заново (продажа компактная 1280×800 + оплата) + compare + density;
|
||
просмотрел каждый кадр — обрезок нет.
|
||
|
||
## Журнал
|
||
- 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мс).
|
||
- 08.10 — полировка по реальному окну Windows 11 (7 пунктов): адаптив правой панели по высоте
|
||
(normal/compact/tiny) и шапки по ширине, fix иконки «Выплата», светлый hover, выравнивание
|
||
плиток избранного, hotkey-полоса влево. `--density` рендерит продажу в 4 разрешениях.
|
||
Реальное окно VM 1280×800 — ничего не перекрывается. --uitest OK, 82 unit, smoke OK (старт 147мс).
|