chatroom/resources/views/admin/ai-providers/index.blade.php

{{--
    文件功能：AI 厂商配置管理页面

    提供 AI 厂商的完整 CRUD 管理：
    - 列表展示所有配置（名称、模型、状态等）
    - 新增/编辑厂商配置弹窗
    - 启用/禁用切换、设为默认、删除
    - 全局开关控制聊天机器人是否启用

    @author ChatRoom Laravel
    @version 1.0.0
--}}

@extends('admin.layouts.app')

@section('title', 'AI 厂商配置')

@section('content')
    @php require resource_path('views/admin/partials/list-theme.php'); @endphp
    <div x-data="{
        showForm: false,
        editId: null,
        form: {
            provider: '',
            name: '',
            api_key: '',
            api_endpoint: '',
            model: '',
            temperature: 0.3,
            max_tokens: 2048,
            sort_order: 0,
        },
    
        /**
         * 打开新增弹窗，重置表单
         */
        openNew() {
            this.editId = null;
            this.form = {
                provider: '',
                name: '',
                api_key: '',
                api_endpoint: '',
                model: '',
                temperature: 0.3,
                max_tokens: 2048,
                sort_order: 0,
            };
            this.showForm = true;
        },
    
        /**
         * 打开编辑弹窗，填充现有数据
         */
        openEdit(provider) {
            this.editId = provider.id;
            this.form = {
                provider: provider.provider,
                name: provider.name,
                api_key: '', // 编辑时不回填 API Key（已加密）
                api_endpoint: provider.api_endpoint,
                model: provider.model,
                temperature: provider.temperature,
                max_tokens: provider.max_tokens,
                sort_order: provider.sort_order,
            };
            this.showForm = true;
        },
    }">

        {{-- 全局开关 + 高级设置 --}}
        <div class="{{ $adminListCardClass }} mb-6">
            <div class="p-6">
                <!-- 顶部栏：开关和添加按钮 -->
                <div class="flex items-center justify-between border-b border-gray-100 pb-4 mb-4">
                    <div class="flex items-center gap-4">
                        <h2 class="{{ $adminListHeaderTitleClass }}">🤖 AI 聊天机器人配置</h2>
                        <div class="flex items-center gap-2">
                            <span class="text-sm text-gray-500">大厅状态：</span>
                            <button id="chatbot-toggle-btn" data-ai-chatbot-toggle-url="{{ route('admin.ai-providers.toggle-chatbot') }}"
                                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors {{ $chatbotEnabled ? 'bg-emerald-500' : 'bg-gray-300' }}">
                                <span
                                    class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform {{ $chatbotEnabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                            </button>
                            <span id="chatbot-status-text"
                                class="text-sm font-bold {{ $chatbotEnabled ? 'text-emerald-600' : 'text-gray-400' }}">
                                {{ $chatbotEnabled ? '已开启' : '已关闭' }}
                            </span>
                        </div>
                    </div>
                    <button x-on:click="openNew()" class="{{ $adminListPrimaryButtonClass }}">
                        + 添加 AI 厂商
                    </button>
                </div>

                <!-- 交互参数表单 -->
                <form action="{{ route('admin.ai-providers.update-settings') }}" method="POST" class="flex flex-wrap items-end gap-6">
                    @csrf
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">系统打赏单次最高金币（上限）</label>
                        <div class="relative">
                            <input type="number" name="chatbot_max_gold" value="{{ $chatbotMaxGold }}" min="1" required
                                class="w-64 border border-gray-300 rounded-md p-2 pl-3 pr-8 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <span class="absolute right-3 top-2.5 text-gray-400 text-sm">枚</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">每人每日最高获取红包次数限制</label>
                        <div class="relative">
                            <input type="number" name="chatbot_max_daily_rewards" value="{{ $chatbotMaxDailyRewards }}" min="1" required
                                class="w-64 border border-gray-300 rounded-md p-2 pl-3 pr-8 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <span class="absolute right-3 top-2.5 text-gray-400 text-sm">次</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">AI 参与钓鱼游戏</label>
                        <select name="chatbot_fishing_enabled"
                            class="w-40 border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <option value="1" {{ $chatbotFishingEnabled ? 'selected' : '' }}>✅ 开启</option>
                            <option value="0" {{ !$chatbotFishingEnabled ? 'selected' : '' }}>⛔ 关闭</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">钓鱼触发概率 (每分钟)</label>
                        <div class="relative">
                            <input type="number" name="chatbot_fishing_chance" value="{{ $chatbotFishingChance }}" min="1" max="100" required
                                class="w-48 border border-gray-300 rounded-md p-2 pl-3 pr-8 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <span class="absolute right-3 top-2.5 text-gray-400 text-sm">%</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">AI 参与百家乐</label>
                        <select name="chatbot_baccarat_enabled"
                            class="w-40 border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <option value="1" {{ $chatbotBaccaratEnabled ? 'selected' : '' }}>✅ 开启</option>
                            <option value="0" {{ !$chatbotBaccaratEnabled ? 'selected' : '' }}>⛔ 关闭</option>
                        </select>
                    </div>
                    <button type="submit"
                        class="px-6 py-2 bg-slate-800 text-white rounded-md font-bold hover:bg-slate-900 text-sm transition h-[38px]">
                        保存运行参数
                    </button>
                </form>
            </div>
        </div>

        {{-- 厂商列表 --}}
        <div class="{{ $adminListCardClass }}">
            <table class="{{ $adminListTableClass }}">
                <thead class="{{ $adminListTableHeadRowClass }}">
                    <tr>
                        <th class="{{ $adminListTableHeadCellClass }}">厂商</th>
                        <th class="{{ $adminListTableHeadCellClass }}">模型</th>
                        <th class="{{ $adminListTableHeadCellClass }}">API 端点</th>
                        <th class="{{ $adminListTableHeadCellClass }} text-center">参数</th>
                        <th class="{{ $adminListTableHeadCellClass }} text-center">排序</th>
                        <th class="{{ $adminListTableHeadCellClass }} text-center">状态</th>
                        <th class="{{ $adminListTableHeadCellClass }} text-center">默认</th>
                        <th class="{{ $adminListTableHeadCellClass }} text-center">操作</th>
                    </tr>
                </thead>
                <tbody class="{{ $adminListTableBodyClass }}">
                    @forelse ($providers as $provider)
                        <tr class="{{ $adminListTableRowClass }} {{ !$provider->is_enabled ? 'opacity-50' : '' }}">
                            <td class="px-6 py-4">
                                <div class="{{ $adminListPrimaryTextClass }}">{{ $provider->name }}</div>
                                <div class="{{ $adminListSecondaryTextClass }}">{{ $provider->provider }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <code class="bg-gray-100 px-2 py-1 rounded text-xs">{{ $provider->model }}</code>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-xs text-gray-500 truncate block max-w-[200px]"
                                    title="{{ $provider->api_endpoint }}">
                                    {{ $provider->api_endpoint }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center text-xs text-gray-500">
                                T={{ $provider->temperature }} / {{ $provider->max_tokens }}
                            </td>
                            <td class="px-6 py-4 text-center text-gray-500">
                                {{ $provider->sort_order }}
                            </td>
                            <td class="px-6 py-4 text-center">
                                <button data-ai-provider-toggle-url="{{ route('admin.ai-providers.toggle', $provider->id) }}"
                                    class="px-3 py-1 rounded-full text-xs font-bold {{ $provider->is_enabled ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-500' }}">
                                    {{ $provider->is_enabled ? '已启用' : '已禁用' }}
                                </button>
                            </td>
                            <td class="px-6 py-4 text-center">
                                @if ($provider->is_default)
                                    <span class="px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">★
                                        默认</span>
                                @else
                                    <button data-ai-provider-default-url="{{ route('admin.ai-providers.default', $provider->id) }}"
                                        class="px-3 py-1 rounded-full text-xs text-gray-400 hover:text-amber-600 hover:bg-amber-50 transition">
                                        设为默认
                                    </button>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="flex items-center justify-center gap-2">
                                    <button data-ai-provider-test-url="{{ route('admin.ai-providers.test', $provider->id) }}"
                                        data-ai-provider-name="{{ $provider->name }}"
                                        class="{{ $adminListActionButtonClass }} text-teal-600 hover:text-teal-800 hover:bg-teal-50">⚡ 测试</button>
                                    <button x-on:click="openEdit({{ $provider->toJson() }})"
                                        class="{{ $adminListActionButtonClass }} text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50">编辑</button>
                                    <form action="{{ route('admin.ai-providers.destroy', $provider->id) }}" method="POST"
                                        data-admin-confirm="确定要删除 {{ $provider->name }} 吗？">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                            class="{{ $adminListActionButtonClass }} text-red-500 hover:text-red-700 hover:bg-red-50">删除</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="{{ $adminListEmptyClass }}">
                                暂无 AI 厂商配置，请点击上方"添加 AI 厂商"按钮。
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- 新增/编辑弹窗 --}}
        <div x-show="showForm" x-cloak style="display: none;"
            class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" x-on:click.self="showForm = false">
            <div class="bg-white rounded-xl shadow-xl w-[560px] max-h-[90vh] overflow-y-auto" x-transition>
                <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                    <h3 class="text-lg font-bold" x-text="editId ? '编辑 AI 厂商' : '添加 AI 厂商'"></h3>
                    <button x-on:click="showForm = false" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
                </div>

                <form
                    :action="editId ? '{{ url('admin/ai-providers') }}/' + editId : '{{ route('admin.ai-providers.store') }}'"
                    method="POST" class="p-6 space-y-4">
                    @csrf
                    <template x-if="editId">
                        <input type="hidden" name="_method" value="PUT">
                    </template>

                    <div class="grid grid-cols-2 gap-4">
                        {{-- 厂商标识 --}}
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-1">厂商标识 <span
                                    class="text-red-500">*</span></label>
                            <input type="text" name="provider" x-model="form.provider" required
                                placeholder="如：deepseek, qwen, openai"
                                class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        {{-- 显示名称 --}}
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-1">显示名称 <span
                                    class="text-red-500">*</span></label>
                            <input type="text" name="name" x-model="form.name" required placeholder="如：DeepSeek、通义千问"
                                class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                    </div>

                    {{-- API Key --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">
                            API Key
                            <span x-show="!editId" class="text-red-500">*</span>
                            <span x-show="editId" class="text-gray-400 font-normal">(留空表示不修改)</span>
                        </label>
                        <input type="password" name="api_key" x-model="form.api_key" :required="!editId"
                            placeholder="sk-xxxxxxxxxxxx"
                            class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 font-mono">
                    </div>

                    {{-- API 端点 --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">API 端点 <span
                                class="text-red-500">*</span></label>
                        <input type="url" name="api_endpoint" x-model="form.api_endpoint" required
                            placeholder="https://api.deepseek.com"
                            class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                        <p class="text-xs text-gray-400 mt-1">系统会自动拼接 /v1/chat/completions</p>
                    </div>

                    {{-- 模型 --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-1">模型名称 <span
                                class="text-red-500">*</span></label>
                        <input type="text" name="model" x-model="form.model" required
                            placeholder="如：deepseek-chat, qwen-turbo"
                            class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    </div>

                    <div class="grid grid-cols-3 gap-4">
                        {{-- Temperature --}}
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-1">Temperature</label>
                            <input type="number" name="temperature" x-model="form.temperature" step="0.1"
                                min="0" max="2"
                                class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        {{-- Max Tokens --}}
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-1">最大 Tokens</label>
                            <input type="number" name="max_tokens" x-model="form.max_tokens" min="100"
                                max="32000"
                                class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        {{-- Sort Order --}}
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-1">排序</label>
                            <input type="number" name="sort_order" x-model="form.sort_order" min="0"
                                class="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                            <p class="text-xs text-gray-400 mt-1">故障转移时按此排序</p>
                        </div>
                    </div>

                    <div class="pt-4 border-t flex justify-end gap-3">
                        <button type="button" x-on:click="showForm = false"
                            class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md text-sm transition">取消</button>
                        <button type="submit"
                            class="px-6 py-2 bg-indigo-600 text-white rounded-md font-bold hover:bg-indigo-700 text-sm transition">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection