Refactor UI + улучшение линтеров и форматирования кода#71
Conversation
- Added PrimeIcons CSS to various manager controllers for consistent icon usage. - Updated color styles in multiple Vue components to use CSS variables for better theming. - Enhanced UI consistency by replacing hardcoded colors with variable references across components.
- Integrated eslint-config-prettier and eslint-plugin-simple-import-sort for improved code quality. - Updated package.json with new scripts for formatting and linting checks. - Refactored various Vue components for consistent code style and organization. - Added new dependencies for stylelint and prettier to maintain code formatting standards.
…mponents - Replaced text remove icon with PrimeIcons in OptionsChips for improved visual consistency. - Adjusted padding and font size for status badges in StatusesGrid to enhance UI uniformity. - Added new styles for compact badges and unified height for various input controls in formStyles.js.
…tency - Updated multiple components to replace Dropdown with Select from PrimeVue for a unified user experience. - Adjusted related imports and properties to align with the new Select component usage. - Enhanced the overall UI consistency across the application by standardizing component types.
…nality - Changed attribute names in various Vue components from camelCase to kebab-case for uniformity. - Enabled installation in the config file to streamline deployment. - Adjusted event handling and property bindings to enhance component behavior and maintain consistency across the application.
Критические замечания1. Изменение префикса лексикона в
|
| Переменная | Значение |
|---|---|
--ms3-text-muted |
#6c757d |
--ms3-text-muted-alt |
#6b7280 |
--ms3-text-secondary |
#64748b |
Рекомендация: рассмотреть объединение близких цветов для упрощения поддержки.
5. Runtime injection стилей в formStyles.js
const el = document.createElement('style')
el.id = STYLE_ID
el.textContent = css
document.head.appendChild(el)Комментарий в коде объясняет причину: "PrimeVue встраиваются в runtime и перезаписывают CSS из файлов".
Это работает, но добавляет complexity. Альтернатива — использовать !important в SCSS или увеличить специфичность селекторов.
Положительные моменты
- Dropdown → Select — правильная миграция под актуальные практики PrimeVue 4
- camelCase → kebab-case в атрибутах Vue — соответствует Vue 3 style guide
- px → rem — улучшает accessibility и масштабируемость
- Prettier + ESLint + Stylelint — единый code style для всей команды
- CSS переменные — упрощает кастомизацию темы
- eslint-plugin-simple-import-sort — автоматическая сортировка импортов улучшает читаемость
- Структурирование PHP контроллеров — добавлены комментарии к подключениям CSS/JS
Чеклист перед мержем
- Уточнить изменение
ms3_prop_→ms_prop_в build.php - Уточнить причину даунгрейда
@primeuix/themesс 2.x на 1.x - Добавить
ms3в ESLint globals - Запустить
npm run build— проверить сборку - Визуальное тестирование основных страниц:
- Список товаров
- Карточка товара
- Заказы
- Настройки
- Статусы
Резюме
PR содержит много полезных улучшений инфраструктуры и code style. Однако перед мержем необходимо:
- Обязательно прояснить два критических момента (лексиконы и версия themes)
- Желательно добавить
ms3в ESLint globals - Рекомендуется провести визуальное тестирование из-за большого объёма изменений
biz87
left a comment
There was a problem hiding this comment.
Есть критические замечания. Нужно посмотреть подробнее
- Changed color references in multiple Vue components from `--ms3-text-secondary` to `--ms3-text-muted` for a more uniform appearance. - Updated the description in the build.php file to reflect the new property naming convention. - Upgraded the `@primeuix/themes` dependency to version 2.0.3 in package.json and package-lock.json for enhanced functionality.
|
@biz87 можно глянуть |
Co-Authored-By: Claude Opus 4.6 <[email protected]>
Описание
Рефакторинг Vue Manager: миграция PrimeVue, стили, линтеры, единообразие UI.
PrimeVue 4
Стили
Линтеры и форматирование
Прочее
Тип изменений
Связанные Issues
Closes #(номер issue)
Как это было протестировано?
Конфигурация тестирования:
Скриншоты (если применимо)
Чеклист
Дополнительные заметки
78 файлов изменено. Затронуты: vueManager (компоненты, entries, composables, stores, utils), контроллеры, _build/config.inc.php.