math_cms/resources/views/filament/pages/prompt-management.blade.php

<div>
    <div class="flex flex-col gap-y-6">

        {{-- 统计信息 --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <div class="text-sm font-medium text-gray-500">总提示词</div>
                <div class="mt-2 text-2xl font-semibold text-gray-900">{{ $this->getPrompts()['meta']['total'] ?? 0 }}</div>
            </div>
        </div>

        {{-- 筛选器 --}}
        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                {{-- 类型筛选 --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">提示词类型</label>
                    <select
                        wire:model.live="selectedType"
                        class="w-full rounded-lg border-gray-300 text-sm"
                    >
                        <option value="">全部类型</option>
                        <option value="题目生成">题目生成</option>
                        <option value="掌握度评估">掌握度评估</option>
                        <option value="技能熟练度">技能熟练度</option>
                        <option value="质量审核">质量审核</option>
                    </select>
                </div>

                {{-- 搜索 --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">搜索提示词</label>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="搜索提示词名称或描述..."
                        class="w-full rounded-lg border-gray-300 text-sm"
                    />
                </div>
            </div>
        </div>

        {{-- 提示词列表 --}}
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模板名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($this->getPrompts()['data'] as $prompt)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ $prompt['template_name'] }}</div>
                                    <div class="text-xs text-gray-500">v{{ $prompt['version'] ?? 1 }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ $prompt['template_type'] }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    @php
                                        $description = $prompt['description'] ?? '';
                                        $normalizedDescription = is_array($description)
                                            ? collect($description)->map(fn ($value, $key) => is_string($value) ? "{$key}: {$value}" : $key)->implode(', ')
                                            : (string) $description;
                                    @endphp
                                    <div class="text-sm text-gray-900">{{ Str::limit($normalizedDescription, 50) }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($prompt['is_active'] === 'yes' || $prompt['is_active'] === true)
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            启用
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                            禁用
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ \Carbon\Carbon::parse($prompt['updated_at'])->diffForHumans() }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end gap-2">
                                        <button
                                            wire:click="editPrompt({{ json_encode($prompt) }})"
                                            class="text-blue-600 hover:text-blue-900"
                                        >
                                            编辑
                                        </button>
                                        <button
                                            wire:click="duplicatePrompt({{ json_encode($prompt) }})"
                                            class="text-green-600 hover:text-green-900"
                                        >
                                            复制
                                        </button>
                                        <button
                                            wire:click="togglePrompt('{{ $prompt['template_name'] }}', {{ $prompt['is_active'] === 'yes' || $prompt['is_active'] === true }})"
                                            class="text-amber-600 hover:text-amber-900"
                                        >
                                            {{ $prompt['is_active'] === 'yes' || $prompt['is_active'] === true ? '禁用' : '启用' }}
                                        </button>
                                        <button
                                            wire:click="deletePrompt('{{ $prompt['template_name'] }}')"
                                            class="text-red-600 hover:text-red-900"
                                            onclick="return confirm('确定要删除这个提示词吗？此操作不可恢复。')"
                                        >
                                            删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                                    <div class="flex flex-col items-center">
                                        <svg class="w-12 h-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                        </svg>
                                        <p class="text-lg font-medium">暂无提示词</p>
                                        <p class="text-sm">点击"新建提示词"开始创建</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- 分页 --}}
            @if(($this->getPrompts()['meta']['total_pages'] ?? 1) > 1)
                <div class="border-t border-gray-200 bg-white px-6 py-3 flex items-center justify-between">
                    <div class="text-sm text-gray-700">
                        显示第 {{ (($this->getPrompts()['meta']['page'] ?? 1) - 1) * ($this->getPrompts()['meta']['per_page'] ?? 10) + 1 }} 到
                        {{ min(($this->getPrompts()['meta']['page'] ?? 1) * ($this->getPrompts()['meta']['per_page'] ?? 10), $this->getPrompts()['meta']['total'] ?? 0) }} 条，
                        共 {{ $this->getPrompts()['meta']['total'] ?? 0 }} 条记录
                    </div>

                    <div class="flex gap-2">
                        <button
                            wire:click="previousPage"
                            @if(($this->getPrompts()['meta']['page'] ?? 1) <= 1) disabled @endif
                            class="px-3 py-1 text-sm border rounded {{ ($this->getPrompts()['meta']['page'] ?? 1) <= 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white hover:bg-gray-50' }}"
                        >
                            上一页
                        </button>

                        @for($i = 1; $i <= ($this->getPrompts()['meta']['total_pages'] ?? 1); $i++)
                            @if($i == ($this->getPrompts()['meta']['page'] ?? 1))
                                <button
                                    class="px-3 py-1 text-sm border rounded bg-blue-50 text-blue-600 border-blue-300"
                                >
                                    {{ $i }}
                                </button>
                            @else
                                <button
                                    wire:click="gotoPage({{ $i }})"
                                    class="px-3 py-1 text-sm border rounded bg-white hover:bg-gray-50"
                                >
                                    {{ $i }}
                                </button>
                            @endif
                        @endfor

                        <button
                            wire:click="nextPage"
                            @if(($this->getPrompts()['meta']['page'] ?? 1) >= ($this->getPrompts()['meta']['total_pages'] ?? 1)) disabled @endif
                            class="px-3 py-1 text-sm border rounded {{ ($this->getPrompts()['meta']['page'] ?? 1) >= ($this->getPrompts()['meta']['total_pages'] ?? 1) ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white hover:bg-gray-50' }}"
                        >
                            下一页
                        </button>
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- 创建/编辑模态框 --}}
    @if($showPromptModal)
        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
            <div class="bg-white rounded-xl shadow-xl w-full max-w-3xl p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">
                        {{ $isEditing ? '编辑提示词' : '新建提示词' }}
                    </h3>
                    <button wire:click="$set('showPromptModal', false)" class="text-gray-500 hover:text-gray-700">&times;</button>
                </div>

                <div class="space-y-4">
                    @unless($isEditing)
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">模板名称</label>
                            <input type="text" wire:model="form.template_name" class="w-full border rounded px-3 py-2 text-sm">
                        </div>
                    @endunless

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">模板类型</label>
                            <select wire:model="form.template_type" class="w-full border rounded px-3 py-2 text-sm">
                                <option value="question_generation">题目生成</option>
                                <option value="掌握度评估">掌握度评估</option>
                                <option value="技能熟练度">技能熟练度</option>
                                <option value="质量审核">质量审核</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <select wire:model="form.is_active" class="w-full border rounded px-3 py-2 text-sm">
                                <option value="yes">启用</option>
                                <option value="no">禁用</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">模板内容</label>
                        <textarea wire:model="form.template_content" rows="10" class="w-full border rounded px-3 py-2 text-sm font-mono"></textarea>
                        <p class="text-xs text-gray-500 mt-1">可使用占位符：{kp_code}, {skills}, {count}, {basic_ratio}, {intermediate_ratio}, {advanced_ratio}, {type_mix}, {tags}, {skills_short}</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">变量(JSON)</label>
                            <input type="text" wire:model="form.variables" class="w-full border rounded px-3 py-2 text-sm" placeholder='["kp_code","skills"]'>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">标签</label>
                            <input type="text" wire:model="form.tags" class="w-full border rounded px-3 py-2 text-sm" placeholder="question_generation,math">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                        <input type="text" wire:model="form.description" class="w-full border rounded px-3 py-2 text-sm" placeholder="用于题目生成的模板">
                    </div>
                </div>

                <div class="mt-6 flex justify-end gap-3">
                    <button wire:click="$set('showPromptModal', false)" class="px-4 py-2 border rounded text-sm">取消</button>
                    <button wire:click="savePrompt" class="px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700">保存</button>
                </div>
            </div>
        </div>
    @endif
</div>