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

- 集成 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

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>