avandClaude Opus 4.8
4e2593ac31
Новая capability web-ui: презентационный перенос готового дизайна
(семантический HTML + единый jellybit.css, тёмная тема по настройке ОС)
в html/template без шага сборки.
- Встроенная (go:embed) отдача статики под /static с Cache-Control и
cache-busting (?v=<hash> по содержимому css/js).
- Шрифты IBM Plex self-hosted (@font-face, cyrillic+latin), без CDN.
- Наколеночный менеджер зависимостей: вендор (htmx + шрифты) не хранится
в репо (gitignore), идемпотентно добывается `task assets` по
web/assets.manifest с проверкой sha256; task build/run зависят от assets.
- Общие партиалы: шапка, бейдж статуса (карта всех 14 состояний),
виджет «файл источника → раскладка» (общий для review и download).
- Страницы: список с фильтром/поиском, ревью, новая страница просмотра
загрузки (/download/{id}). deleted скрыт по умолчанию.
- Превью раскладки берётся из единой логики internal/layout
(buildFileRows), без дублирования правил имён в шаблонах.
- Убраны meta-refresh и инлайн-стили; copyHash на vanilla с fallback
на execCommand и честной индикацией (целевой деплой — HTTP LAN).
Вне scope (отдельный change): живые обновления прогресса и раздел
раздачи, клиентский режим ручной раскладки файл→серия (с Alpine.js).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
4.2 KiB
4.2 KiB
1. Статика и встраивание
- 1.1 Создать структуру
web/static/{css,js,vendor}/;web/static/vendor/в gitignore - 1.2 Шрифты IBM Plex Sans + IBM Plex Mono (cyrillic+latin, нужные начертания) — в манифест, фетч в
web/static/vendor/fonts/ - 1.3 Перенести
jellybit.cssизtmp/design/вweb/static/css/, добавить@font-faceна../vendor/fonts/(убрать ссылки на Google Fonts) - 1.4 Манифест
web/assets.manifest(путь/URL/sha256) + идемпотентныйtask assets(нет файла или хеш не сошёлся → качаем, иначе с диска);task build/runзависят отassets - 1.5 Вынести
copyHashвweb/static/js/app.js(vanilla) - 1.6 Расширить
go:embedвweb/web.goнаstatic/* - 1.7 Добавить роут
/static/*(http.FileServer+StripPrefix) сCache-Control; решить cache-busting CSS (хеш при старте)
2. Общие партиалы
- 2.1 Партиал
web/templates/partials/header.html(.app-header) - 2.2 Партиал
partials/status_badge.html— картаstate→class/подписьдля всех 14 состояний (один источник) - 2.3 Партиал
partials/layout_widget.html— виджет «файл источника → раскладка» (общий для review и download) - 2.4 Перенастроить
template.ParseFSвhttpapiна загрузку партиалов; сохранить/дополнить FuncMap
3. Страница списка (index)
- 3.1 Перенести вёрстку
index.htmlизtmp/design/вweb/templates/index.html(карточкиrange, единое окно добавления, фильтр/поиск) - 3.2 Подключить
jellybit.cssи htmx; убрать<meta http-equiv="refresh">и инлайн-<style> - 3.3 Бейдж статуса через партиал; блок
.card-acts— условия поstate(соответствиеdownloadView) - 3.4
deletedскрыт по умолчанию + переключатель «показать всё» - 3.5 Проставить
nameполей форм действий под существующие хендлеры; сверить каждое действие по состоянию
4. Страница ревью (review)
- 4.1 Перенести вёрстку
review.html(догадка, кандидатыrange, причины, уточнение, действия) - 4.2 Строка «нейронка» (
.nn-cand) — обычный кандидат, не особый режим - 4.3 Превью путей через серверное поле
reviewView.Preview(единаяinternal/layout) - 4.4 Сверить поля форм (
apply/refine/rerecognize/type/candidate/provider/nobase/defer) с хендлерами
5. Страница просмотра (download)
- 5.1 View-структура
downloadDetailView(распознавание, файлы, раскладка, раздача, история) - 5.2 Хендлер
GET /download/{id}+ роут; 404 на отсутствующую загрузку - 5.3 Шаблон
web/templates/download.html(переиспользует партиал виджета и бейдж) - 5.4 Таймлайн истории (
.timeline) и действия по состоянию
6. Проверка и завершение
- 6.1
task lintиtask testзелёные - 6.2 Ручная проверка: все действия по каждому состоянию срабатывают, превью на ревью = реальная раскладка
- 6.3 Проверить отсутствие внешних сетевых запросов (шрифты/стили только с
/static/) - 6.4
openspec validate --strict web-ui-design-port - 6.5 Ревью кода (до archive) — пройдено; находки MEDIUM-1/2, LOW-2/3 исправлены