Refactor UI + улучшение линтеров и форматирования кода

[Ibochkarev]

Описание

Рефакторинг Vue Manager: миграция PrimeVue, стили, линтеры, единообразие UI.

PrimeVue 4

• Замена Deprecated компонентов Dropdown на Select в компонентах (VendorCombo, ProductDataConfig, NotificationsGrid, ModelFieldsGrid, GridFieldsConfig, ExtraFieldsManager, DynamicField, ActionsEditor)
• camelCase → kebab-case для атрибутов
• Обновление привязок событий и свойств

Стили

• px → rem
• Единый вид плейсхолдеров и значений в контролах
• Жёстко заданные цвета → CSS‑переменные
• formStyles.js — общие стили для input
• SCSS переменные (_variables.scss)
• OptionsChips — PrimeIcons вместо текста
• StatusesGrid — padding и размер шрифта для badges

Линтеры и форматирование

• ESLint: eslint-config-prettier, eslint-plugin-simple-import-sort
• Prettier (.prettierrc, .prettierignore)
• Stylelint (.stylelintrc.json)
• Скрипты: format, lint:all

Прочее

• PrimeIcons CSS подключён в контроллерах (category, customers, help, notifications, order, orders, settings, product)
• Обновлены: request.js, modx.js, validation.js, useProductStore
• Масштабные правки в ApiTest, OrderView, ImportProducts, ProductData

Тип изменений

• Исправление бага (non-breaking change)
• Новая функциональность (non-breaking change)
• Breaking change
• Рефакторинг (без изменения функциональности)
• Документация
• Другое

Связанные Issues

Closes #(номер issue)

Как это было протестировано?

• Ручное тестирование
• ESLint, Prettier, Stylelint
• PHPStan
• Разные версии PHP/MODX

Конфигурация тестирования:

• MiniShop3:
• MODX:
• PHP:

Скриншоты (если применимо)

До	После

Чеклист

• Код соответствует стилю проекта
• Комментарии в сложных местах
• Функциональность не сломана
• Лексиконы ru/en
• PHPStan без новых ошибок
• ESLint без ошибок
• CHANGELOG.md обновлён

Дополнительные заметки

78 файлов изменено. Затронуты: vueManager (компоненты, entries, composables, stores, utils), контроллеры, _build/config.inc.php.

[biz87]

Критические замечания

1. Изменение префикса лексикона в _build/build.php

- 'desc' => 'ms3_prop_' . $k,
+ 'desc' => 'ms_prop_' . $k,

Вопрос: Префикс лексикона изменён с ms3_prop_ на ms_prop_.

• Существуют ли лексиконы с префиксом ms_prop_?
• Это намеренное изменение или опечатка?

Если лексиконы ms_prop_* не существуют, описания свойств сниппетов перестанут отображаться.

---

2. Даунгрейд @primeuix/themes в package.json

- "@primeuix/themes": "^2.0.3",
+ "@primeuix/themes": "^1.0.0",

Вопрос: Версия понижена с 2.x до 1.x. Причина не указана в описании PR.

Возможные последствия:

• Несовместимость с PrimeVue 4.3.1
• Визуальные регрессии в компонентах

Пожалуйста, укажи причину даунгрейда.

---

Замечания средней важности

3. Удалён eslint-disable комментарий

// vueManager/src/utils/modx.js
- // eslint-disable-next-line no-undef
  return typeof ms3 !== 'undefined' ? ms3.config : null

Нужно убедиться, что глобальные переменные ms3, MODx, Ext добавлены в eslint.config.js → globals. Иначе ESLint будет выдавать ошибки no-undef.

Проверка: В текущем eslint.config.js вижу только:

globals: {
  Ext: 'readonly',
  MODx: 'readonly',
}

Переменная ms3 отсутствует — нужно добавить.

---

4. CSS Variables — возможное упрощение палитры

Файл _variables.scss содержит ~60 CSS переменных, что хорошо для consistency. Однако некоторые цвета очень близки:

Переменная	Значение
--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. Однако перед мержем необходимо:

1. Обязательно прояснить два критических момента (лексиконы и версия themes)
2. Желательно добавить ms3 в ESLint globals
3. Рекомендуется провести визуальное тестирование из-за большого объёма изменений

[biz87]

Есть критические замечания. Нужно посмотреть подробнее

[Ibochkarev]

@biz87 можно глянуть