Подробный отчет о сессии: Интеграция коучинговых фреймворков и инструментов планирования в XFlow

Сегодня была проведена большая работа по интеграции и адаптации коучинговых фреймворков (S.M.A.R.T., G.R.O.W., Пирамида Дилтса), а также инструментов приоритизации и планирования (Матрица Эйзенхауэра, Диаграмма Ганта) в интерактивный редактор интеллект-карт XFlow. Также был осуществлен глубокий рефакторинг монолитного компонента редактора для улучшения структуры проекта.

🛠️ Внесенные изменения по файлам

1. Серверная часть (Бэкенд AI)

[MODIFY] coach.post.ts

Добавлен эндпоинт коучинга: Обрабатывает POST-запросы к /api/ai/coach.
Интеграция S.M.A.R.T.: Генерирует оптимизированную цель в формате Markdown с прописанными критериями и чек-листом для метрик.
Интеграция G.R.O.W. с кастомными вопросами: Генерирует строго валидный JSON-ответ с 4 уровнями (Цель, Варианты, Реальность, План), основываясь на наводящих вопросах пользователя.
Интеграция Пирамиды логических уровней Дилтса: Добавлен экшен dilts для генерации 6 уровней (Миссия, Идентичность, Ценности, Навыки, Действия, Окружение) на русском языке.
Интеграция Матрицы Эйзенхауэра: Добавлен экшен eisenhower для классификации задач пользователя по 4 квадрантам (Важно/Срочно, Важно/Несрочно, Неважно/Срочно, Неважно/Несрочно).
Парсинг JSON: Настроен робастный парсер, удаляющий лишние Markdown-блоки кода (```json), чтобы гарантировать стабильность работы фронтенда.

2. Клиентские компоненты (Vue Flow Редактор)

[NEW] canvasTransformer.ts

Вынесена чистая логика преобразования данных между Obsidian Canvas JSON и внутренним форматом реактивных элементов Vue Flow.
Добавлена поддержка сериализации/десериализации нового свойства задачи start_date (дата начала задачи) для синхронизации с Obsidian Canvas.

[NEW] NodePalette.vue

Изолирован левый сайдбар со списком доступных типов узлов (Текст, Файл, Задача, AI, Webhook, Git) и драг-событиями.

[NEW] NodePropertiesPanel.vue

Изолирована правая панель свойств выделенного узла.
Добавлен выбор даты начала (start_date) с типом datetime-local для задач, что позволяет планировать временные интервалы.
Интеграция AI Коуча: Добавлен блок быстрого вызова ИИ-помощника с 4 инструментами: SMART, GROW, Дилтс и Эйзенхауэр в компактном виде (4 колонки).

[NEW] CoachingWizardModal.vue

Создано модальное окно интерактивного конструктора (Wizard) с четырьмя вкладками:
1. 🎯 SMART Цель (S.M.A.R.T.)
2. 🌱 GROW Сессия (Goal -> Options -> Reality -> Way Forward)
3. 📐 Пирамида Дилтса (Миссия -> Идентичность -> Ценности -> Навыки -> Действия -> Окружение)
4. 📊 Матрица Эйзенхауэра (Важно/Срочно -> Важно/Несрочно -> Неважно/Срочно -> Неважно/Несрочно)
Для всех вкладок поддерживается как ручной ввод, так и генерация/оптимизация через AI Coach.

[NEW] GanttChartDrawer.vue

Создан выдвижной таймлайн (Gantt Chart) внизу экрана, отображающий все задачи, имеющие даты выполнения (start_date и/или alarm).
Поддерживает:
- Синхронизированную горизонтальную прокрутку заголовка дней и строк задач.
- Автоматический расчет временного диапазона с ограничением в 30 дней.
- Цветовую схему полос в зависимости от состояния задачи (todo, in_progress, review, blocked, completed).
- Клик по полосе или названию задачи для автоматической фокусировки и центрирования камеры Vue Flow на соответствующем узле.

[MODIFY] FlowEditor.vue

Очищен от 1000+ строк разметки сайдбаров и модалок, замененных на вызовы новых изолированных компонентов.
Новые кнопки на панели инструментов: Добавлены 🎯 +SMART, 🌱 +GROW, 📐 +Дилтс и 📊 +Эйзенхауэр для быстрого размещения на холсте пустых структурированных шаблонов.
Связывание событий: Подключены методы для сохранения, обновления, экспорта, Git-синхронизации, ручного добавления и ИИ-генерации для всех добавленных фреймворков.
Интеграция Диаграммы Ганта: Внедрен компонент GanttChartDrawer, настроен обработчик selectAndCenterNode с плавным переходом камеры к выбранному узлу с помощью хуков findNode и setTransform из @vue-flow/core.

📊 Описание добавленных коучинговых и планинговых инструментов

1. Пирамида логических уровней Дилтса

Каждый узел создается со своим стилем (фон, цвет рамки) и предзаполненным Markdown-шаблоном:

🌟 Миссия (Mission) — уровень БЫТЬ (фиолетовый). Вопросы: Ради кого? Кому еще это важно?
👤 Идентичность (Identity) (синий). Вопросы: Кто я?
💎 Ценности (Values) (голубой). Вопросы: Почему это важно?
🧠 Навыки (Skills) (бирюзовый). Вопросы: Как? Каким образом?
🎬 Действия (Actions) — уровень ДЕЛАТЬ (зеленый). Вопросы: Что делать?
🌍 Окружение (Environment) — уровень ИМЕТЬ (серый, узел задачи). Вопросы: Где? Когда? С кем?

2. Матрица Эйзенхауэра

Размещает на холсте 4 квадранта (2x2 сетку узлов задач) с четко заданными позициями для предотвращения наложений:

🔥 Важно и Срочно (Сделать) — красный цвет.
⚡ Важно, но Несрочно (Запланировать) — синий цвет.
🧊 Неважно, но Срочно (Делегировать) — оранжевый цвет.
💤 Неважно и Несрочно (Отложить/Удалить) — серый цвет.

3. Диаграмма Ганта

Отображает временную шкалу задач для наглядного планирования.
Позволяет быстро перемещаться к любой задаче на холсте одним кликом.

🧪 Статус сборки и готовность

Весь проект успешно проходит стадию компиляции (npm run build).
Локальный сервер npm run dev готов к тестированию всех функций.

9.7 KiB Raw Permalink Blame History Unescape Escape