lizhuoran
1d30fb1d4c
- 集成 Monaco Editor 用于提示词编辑 - 创建提示词变量配置（14个可用变量） - 创建提示词模板库（5个预设模板） - 实现 PromptTemplateService 服务类 - 创建变量替换和预览功能 - 添加 PreviewPromptAction 用于预览提示词 - 创建变量帮助文档和模板选择器视图组件 - 支持变量验证和自动替换
107 lines
4.9 KiB
PHP
107 lines
4.9 KiB
PHP
@php
|
||
$templates = config('prompt_templates.templates', []);
|
||
$categories = config('prompt_templates.categories', []);
|
||
$groupedTemplates = collect($templates)->groupBy('category');
|
||
@endphp
|
||
|
||
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
|
||
<h3 class="text-lg font-semibold mb-3 text-gray-900 dark:text-gray-100">
|
||
快速模板
|
||
</h3>
|
||
|
||
<div class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||
选择一个预设模板快速开始，您可以在此基础上进行修改
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
@foreach($groupedTemplates as $category => $temps)
|
||
<div>
|
||
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
|
||
<span class="w-2 h-2 rounded-full bg-primary-500"></span>
|
||
{{ $categories[$category] ?? $category }}
|
||
</h4>
|
||
<div class="space-y-2">
|
||
@foreach($temps as $template)
|
||
<button
|
||
type="button"
|
||
onclick="applyPromptTemplate('{{ $template['id'] }}')"
|
||
class="w-full text-left p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary-500 dark:hover:border-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/10 transition-colors group"
|
||
>
|
||
<div class="flex items-start justify-between gap-2">
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-medium text-sm text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">
|
||
{{ $template['name'] }}
|
||
</div>
|
||
<div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||
{{ $template['description'] }}
|
||
</div>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-400 group-hover:text-primary-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||
<div class="flex items-start gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||
<svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
<span>点击模板将自动填充到编辑器中，您可以根据需要进行修改</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 存储模板内容
|
||
window.promptTemplates = @json(collect($templates)->keyBy('id')->map(fn($t) => $t['content'])->toArray());
|
||
|
||
// 应用模板函数
|
||
function applyPromptTemplate(templateId) {
|
||
const content = window.promptTemplates[templateId];
|
||
if (!content) {
|
||
console.error('Template not found:', templateId);
|
||
return;
|
||
}
|
||
|
||
// 查找Monaco Editor实例
|
||
// Monaco Editor的字段名是 prompt.prompt_template
|
||
const editorElement = document.querySelector('[data-monaco-editor]');
|
||
|
||
if (editorElement && window.monaco) {
|
||
// 尝试通过Livewire更新值
|
||
const livewireComponent = Livewire.find(
|
||
editorElement.closest('[wire\\:id]')?.getAttribute('wire:id')
|
||
);
|
||
|
||
if (livewireComponent) {
|
||
// 使用Livewire的set方法更新值
|
||
livewireComponent.set('data.prompt.prompt_template', content);
|
||
|
||
// 显示成功提示
|
||
new FilamentNotification()
|
||
.title('模板已应用')
|
||
.success()
|
||
.send();
|
||
}
|
||
} else {
|
||
// 备用方案：直接设置textarea值（如果Monaco未加载）
|
||
const textarea = document.querySelector('textarea[name="prompt.prompt_template"]');
|
||
if (textarea) {
|
||
textarea.value = content;
|
||
textarea.dispatchEvent(new Event('input', { bubbles: true }));
|
||
|
||
new FilamentNotification()
|
||
.title('模板已应用')
|
||
.success()
|
||
.send();
|
||
}
|
||
}
|
||
}
|
||
</script>
|