lizhuoran/KnowledgeBase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(阶段三): 实现AI提示词编辑功能

Browse Source 
- 集成 Monaco Editor 用于提示词编辑
- 创建提示词变量配置（14个可用变量）
- 创建提示词模板库（5个预设模板）
- 实现 PromptTemplateService 服务类
- 创建变量替换和预览功能
- 添加 PreviewPromptAction 用于预览提示词
- 创建变量帮助文档和模板选择器视图组件
- 支持变量验证和自动替换
This commit is contained in:
李卓然
2026-03-09 10:59:45 +08:00
parent 3b90d97f02
commit 1d30fb1d4c
11 changed files with 866 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
resources/views/filament/components/prompt-template-selector.blade.php Normal file
View File

@@ -0,0 +1,106 @@
@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>