102 lines
4.1 KiB
PHP
102 lines
4.1 KiB
PHP
@php
|
|
use App\Services\DocumentPreviewService;
|
|
|
|
$previewService = app(DocumentPreviewService::class);
|
|
$htmlContent = null;
|
|
$error = null;
|
|
|
|
try {
|
|
$htmlContent = $previewService->convertToHtml($document);
|
|
} catch (\Exception $e) {
|
|
$error = $e->getMessage();
|
|
}
|
|
@endphp
|
|
|
|
<div class="document-preview-modal">
|
|
@if ($error)
|
|
<div class="rounded-lg bg-danger-50 p-4 text-danger-600 dark:bg-danger-400/10 dark:text-danger-400">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
|
</svg>
|
|
<div>
|
|
<p class="font-semibold">预览失败</p>
|
|
<p class="text-sm">{{ $error }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@elseif ($htmlContent)
|
|
<div class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<div class="border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-900">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
文档内容预览
|
|
</h3>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ $document->display_file_name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-h-[600px] overflow-y-auto p-6">
|
|
<div class="prose prose-sm max-w-none dark:prose-invert">
|
|
{!! $htmlContent !!}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-900">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
提示：这是文档的预览版本，可能与原始格式略有差异。如需查看完整格式，请下载文档。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="rounded-lg bg-gray-50 p-4 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<p>正在加载文档预览...</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<style>
|
|
.document-preview-modal .prose {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
}
|
|
|
|
.document-preview-modal .prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.document-preview-modal .prose table td,
|
|
.document-preview-modal .prose table th {
|
|
border: 1px solid #e5e7eb;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.document-preview-modal .prose table th {
|
|
background-color: #f9fafb;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.document-preview-modal .prose img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.dark .document-preview-modal .prose table td,
|
|
.dark .document-preview-modal .prose table th {
|
|
border-color: #374151;
|
|
}
|
|
|
|
.dark .document-preview-modal .prose table th {
|
|
background-color: #1f2937;
|
|
}
|
|
</style>
|