86 lines
9.7 KiB
Markdown
86 lines
9.7 KiB
Markdown
# Подробный отчет о сессии: Интеграция коучинговых фреймворков и инструментов планирования в XFlow
|
||
|
||
Сегодня была проведена большая работа по интеграции и адаптации коучинговых фреймворков (**S.M.A.R.T.**, **G.R.O.W.**, **Пирамида Дилтса**), а также инструментов приоритизации и планирования (**Матрица Эйзенхауэра**, **Диаграмма Ганта**) в интерактивный редактор интеллект-карт XFlow. Также был осуществлен глубокий рефакторинг монолитного компонента редактора для улучшения структуры проекта.
|
||
|
||
---
|
||
|
||
## 🛠️ Внесенные изменения по файлам
|
||
|
||
### 1. Серверная часть (Бэкенд AI)
|
||
|
||
#### [MODIFY] [coach.post.ts](file:///c:/Users/ormix/StudioProjects/XFlow/app/server/api/ai/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](file:///c:/Users/ormix/StudioProjects/XFlow/app/utils/canvasTransformer.ts)
|
||
* Вынесена чистая логика преобразования данных между Obsidian Canvas JSON и внутренним форматом реактивных элементов Vue Flow.
|
||
* Добавлена поддержка сериализации/десериализации нового свойства задачи `start_date` (дата начала задачи) для синхронизации с Obsidian Canvas.
|
||
|
||
#### [NEW] [NodePalette.vue](file:///c:/Users/ormix/StudioProjects/XFlow/app/components/editor/NodePalette.vue)
|
||
* Изолирован левый сайдбар со списком доступных типов узлов (Текст, Файл, Задача, AI, Webhook, Git) и драг-событиями.
|
||
|
||
#### [NEW] [NodePropertiesPanel.vue](file:///c:/Users/ormix/StudioProjects/XFlow/app/components/editor/NodePropertiesPanel.vue)
|
||
* Изолирована правая панель свойств выделенного узла.
|
||
* Добавлен выбор даты начала (`start_date`) с типом `datetime-local` для задач, что позволяет планировать временные интервалы.
|
||
* **Интеграция AI Коуча:** Добавлен блок быстрого вызова ИИ-помощника с 4 инструментами: **SMART**, **GROW**, **Дилтс** и **Эйзенхауэр** в компактном виде (4 колонки).
|
||
|
||
#### [NEW] [CoachingWizardModal.vue](file:///c:/Users/ormix/StudioProjects/XFlow/app/components/editor/CoachingWizardModal.vue)
|
||
* Создано модальное окно интерактивного конструктора (Wizard) с четырьмя вкладками:
|
||
1. **🎯 SMART Цель** (S.M.A.R.T.)
|
||
2. **🌱 GROW Сессия** (Goal -> Options -> Reality -> Way Forward)
|
||
3. **📐 Пирамида Дилтса** (Миссия -> Идентичность -> Ценности -> Навыки -> Действия -> Окружение)
|
||
4. **📊 Матрица Эйзенхауэра** (Важно/Срочно -> Важно/Несрочно -> Неважно/Срочно -> Неважно/Несрочно)
|
||
* Для всех вкладок поддерживается как ручной ввод, так и генерация/оптимизация через AI Coach.
|
||
|
||
#### [NEW] [GanttChartDrawer.vue](file:///c:/Users/ormix/StudioProjects/XFlow/app/components/editor/GanttChartDrawer.vue)
|
||
* Создан выдвижной таймлайн (Gantt Chart) внизу экрана, отображающий все задачи, имеющие даты выполнения (`start_date` и/или `alarm`).
|
||
* Поддерживает:
|
||
* Синхронизированную горизонтальную прокрутку заголовка дней и строк задач.
|
||
* Автоматический расчет временного диапазона с ограничением в 30 дней.
|
||
* Цветовую схему полос в зависимости от состояния задачи (todo, in_progress, review, blocked, completed).
|
||
* Клик по полосе или названию задачи для автоматической фокусировки и центрирования камеры Vue Flow на соответствующем узле.
|
||
|
||
#### [MODIFY] [FlowEditor.vue](file:///c:/Users/ormix/StudioProjects/XFlow/app/components/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` готов к тестированию всех функций.
|