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

<x-filament-panels::page>
    <div class="flex flex-col gap-y-6">
        {{-- 头部操作 --}}
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold tracking-tight">提示词管理</h2>
                <p class="text-sm text-gray-500">管理系统提示词模板，支持分类管理和搜索</p>
            </div>
            <div class="flex gap-2">
                <button
                    wire:click="refreshPrompts"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    刷新
                </button>
                <button
                    wire:click="createPrompt"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-lg hover:bg-green-700"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    新建提示词
                </button>
            </div>
        </div>

        {{-- 统计信息 --}}
        <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>
</x-filament-panels::page>