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

9
resources/views/filament/components/prompt-preview-original.blade.php Normal file
View File

@@ -0,0 +1,9 @@
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 p-4">
<div class="flex items-center gap-2 mb-2">
<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">原始模板（包含变量）</span>
</div>
<pre class="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap font-mono overflow-x-auto">{{ $content }}</pre>
</div>

12
resources/views/filament/components/prompt-preview-result.blade.php Normal file
View File

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

27
resources/views/filament/components/prompt-preview-validation.blade.php Normal file
View File

@@ -0,0 +1,27 @@
<div class="rounded-lg border border-warning-200 dark:border-warning-700 bg-warning-50 dark:bg-warning-900/10 p-4">
<div class="flex items-start gap-2">
<svg class="w-5 h-5 text-warning-600 dark:text-warning-400 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
<div class="flex-1">
<div class="text-sm font-medium text-warning-800 dark:text-warning-200 mb-2">
发现无效变量
</div>
<div class="text-sm text-warning-700 dark:text-warning-300">
以下变量未在系统中定义，可能无法正确替换：
</div>
<ul class="mt-2 space-y-1">
@foreach($invalidVariables as $variable)
<li class="text-sm text-warning-700 dark:text-warning-300">
<code class="px-1.5 py-0.5 bg-warning-100 dark:bg-warning-900/30 rounded font-mono">
{{'{'}}{{ $variable }}{{'}'}}
</code>
</li>
@endforeach
</ul>
<div class="mt-3 text-xs text-warning-600 dark:text-warning-400">
💡 提示：请检查变量名称是否正确，或参考右侧的"变量参考"面板查看所有可用变量。
</div>
</div>
</div>
</div>

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>

54
resources/views/filament/components/prompt-variable-helper.blade.php Normal file
View File

@@ -0,0 +1,54 @@
<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">
在提示词模板中使用 <code class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded">{变量名}</code> 格式引用变量
</div>
@php
$variables = config('prompt_variables.variables', []);
$categories = config('prompt_variables.categories', []);
$groupedVariables = collect($variables)->groupBy('category');
@endphp
<div class="space-y-4">
@foreach($groupedVariables as $category => $vars)
<div>
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">
{{ $categories[$category] ?? $category }}
</h4>
<div class="space-y-2">
@foreach($vars as $variable)
<div class="flex items-start gap-2 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700/50">
<code class="px-2 py-1 bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 rounded text-xs font-mono whitespace-nowrap">
{{'{'}}{{ $variable['name'] }}{{'}'}}
</code>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm text-gray-900 dark:text-gray-100">
{{ $variable['label'] }}
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">
{{ $variable['description'] }}
</div>
<div class="text-xs text-gray-400 dark:text-gray-500 mt-1">
示例: <span class="font-mono">{{ $variable['example'] }}</span>
</div>
</div>
</div>
@endforeach
</div>
</div>
@endforeach
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">使用示例</h4>
<div class="bg-gray-50 dark:bg-gray-900 rounded p-3 text-xs font-mono">
<div class="text-gray-600 dark:text-gray-400">你好，{{'{'}}user{{'}'}}！</div>
<div class="text-gray-600 dark:text-gray-400">当前时间是 {{'{'}}time{{'}'}}，你在 {{'{'}}station{{'}'}}</div>
<div class="text-gray-600 dark:text-gray-400">请参考以下知识库：{{'{'}}knowledge_bases{{'}'}}。</div>
</div>
</div>
</div>