53 lines
3.2 KiB
Markdown
53 lines
3.2 KiB
Markdown
### Инструкция (Промпт) для AI Агента
|
|
|
|
Ты — Senior Vue.js разработчик. Мне нужно исправить рендеринг Markdown в компоненте.
|
|
|
|
**Проблема:**
|
|
Компонент отображает сырой Markdown (символы #, \*, таблицы в виде текста), вместо HTML разметки. Стили CSS есть, но они не применяются, так как HTML не генерируется.
|
|
|
|
**Анализ кода:**
|
|
|
|
1. В секции imports из 'vue' забыли добавить `computed`.
|
|
2. Функция `renderMarkdown` скорее всего падает в `catch` и возвращает исходную строку.
|
|
3. Библиотека `marked` в последних версиях изменила API (удален `setOptions`, используется `marked.parse`).
|
|
|
|
**Задача:**
|
|
Перепиши секцию `<script setup>` и исправь логику рендеринга.
|
|
|
|
**Требования к исправлению:**
|
|
|
|
1. Добавь `computed` в импорты из 'vue'.
|
|
2. Обнови использование библиотеки `marked`. Убедись, что используется `marked.parse(text)`. Вместо устаревшего `setOptions` используй современный подход (или `marked.use()`, или просто дефолтный парсинг, так как `gfm` и `breaks` обычно включены по умолчанию).
|
|
3. Убедись, что переменная `renderedSummary` корректно обрабатывает `report.summary` и возвращает безопасный HTML (если summary нет, возвращать пустую строку).
|
|
4. (Опционально) Добавь импорт `DomPurify` (если он есть в проекте) для очистки HTML перед выводом в `v-html`, но если нет — оставь просто парсинг.
|
|
|
|
**Ожидаемый результат:**
|
|
Код компонента, где `renderedSummary` возвращает корректный HTML, и заголовки/таблицы отображаются красиво согласно CSS стилям `.markdown-content`.
|
|
|
|
````
|
|
|
|
### Что именно должен изменить агент (для вашего понимания):
|
|
|
|
Агент должен изменить блок скрипта примерно так:
|
|
|
|
```javascript
|
|
// Было
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
|
// Станет (добавится computed)
|
|
import { onBeforeUnmount, onMounted, ref, computed } from 'vue';
|
|
|
|
// Было (конфигурация marked)
|
|
if (marked.setOptions) { ... }
|
|
// Станет (упрощенно и надежно)
|
|
const renderMarkdown = (markdown) => {
|
|
if (!markdown) return '';
|
|
try {
|
|
// Просто парсим, так как в новых версиях gfm включен по умолчанию
|
|
return marked.parse(markdown, { breaks: true });
|
|
} catch (e) {
|
|
console.error('Markdown parsing error:', e);
|
|
return markdown;
|
|
}
|
|
};
|
|
````
|