<div class="rounded-lg border border-primary-200 dark:border-primary-700 bg-primary-50 dark:bg-primary-900/10 p-4">
    <div class="flex items-center gap-2 mb-2">
        <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
        </svg>
        <span class="text-sm font-medium text-primary-700 dark:text-primary-300">预览结果（变量已替换）</span>
    </div>
    <div class="prose prose-sm dark:prose-invert max-w-none">
        <pre class="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap overflow-x-auto">{{ $content }}</pre>
    </div>
</div>
