feat(product): remember active Vue tab across page reloads#120
Conversation
- Add product_remember_tabs system setting (default: true) - Persist active tab key to localStorage on tab change - Restore saved tab on component mount - Add ms3_product_remember_tabs config to Vue app Closes #111
biz87
left a comment
biz87
left a comment
There was a problem hiding this comment.
Ревью PR #120
Чистый, хорошо ограниченный PR. Функциональность корректна, архитектура правильная.
Что хорошо:
- Переиспользует существующую настройку
ms3_product_remember_tabs - Сохранение по ключу вкладки, а не по индексу — устойчиво к реордеру
- ExtJS (
ms3-product-update-tabpanel) и Vue (ms3-product-vue-active-tab) ключи не пересекаются - Graceful degradation: try/catch на записи, fallback на tab 0 при невалидном ключе
1. Мигание вкладки при восстановлении (UX)
Текущий порядок в onMounted:
onMounted(() => {
tabsReady.value = true // ← Tabs рендерятся с activeTab='0'
if (props.config.product_remember_tabs) {
nextTick(() => { // ← На следующий тик переключаемся на сохранённую
const savedKey = ...
activeTab.value = String(idx)
})
}
})Это два цикла рендера: сначала видна первая вкладка, потом переключение. Может быть заметный flash, особенно при восстановлении ExtJS-таба (галерея, ссылки).
tabConfig — computed от props, доступен синхронно в onMounted. Можно инициализировать activeTab до tabsReady = true, тогда nextTick не нужен:
onMounted(() => {
if (props.config.product_remember_tabs) {
try {
const savedKey = localStorage.getItem(STORAGE_KEY)
if (savedKey) {
const idx = tabConfig.value.findIndex(t => t.key === savedKey)
if (idx >= 0) activeTab.value = String(idx)
}
} catch (_e) {}
}
tabsReady.value = true // ← Рендерится сразу с правильной вкладкой
})2. Нет try/catch на чтении localStorage
Запись обёрнута в try/catch, а чтение — нет. В большинстве браузеров getItem не бросает исключений, но для консистентности и на случай строгих security-политик стоит обернуть.
3. Несвязанные изменения в ProductData.vue
Пересортировка импорта и переформатирование toast.add() — formatting-only, не связаны с фичей. Не вредят, но засоряют diff. В идеале отдельным коммитом.
…revert ProductData noise - Init activeTab before tabsReady so first render shows saved tab (no flash) - Wrap localStorage.getItem in try/catch for consistency with write - Revert unrelated ProductData.vue changes (import order, toast.add formatting)
…nent - Extracted tab restoration logic into a separate function for clarity - Simplified onMounted lifecycle hook to enhance readability - Maintained existing functionality for restoring active tab from localStorage
2 participants
Описание
Реализовано запоминание активной вкладки панели товара при перезагрузке страницы. При переключении вкладки её ключ сохраняется в
localStorage, при следующей загрузке страницы восстанавливается последняя активная вкладка. Поведение аналогично ExtJS-вкладкам и управляется системной настройкойms3_product_remember_tabs.Тип изменений
Связанные Issues
Closes #111
Как это было протестировано?
Конфигурация тестирования:
Скриншоты (если применимо)
Чеклист
Дополнительные заметки
ms3_product_remember_tabsпо умолчанию включена (true)localStorage(quota, private mode) сохранение игнорируется без падения