chatroom/resources/views/admin/level-exp-configs/index.blade.php

@extends('admin.layouts.app')

@section('title', '等级经验阈值管理')

@section('content')
    @php require resource_path('views/admin/partials/list-theme.php'); @endphp
    @php
        $formThresholds = collect(old('thresholds', $thresholds->pluck('exp')->all()))
            ->map(fn ($value) => trim((string) $value))
            ->filter(fn (string $value) => $value !== '')
            ->values();

        if ($formThresholds->isEmpty()) {
            $formThresholds = $thresholds->pluck('exp')->map(fn ($value) => (string) $value)->values();
        }
    @endphp

    <div class="{{ $adminListPageClass }}">
        <div class="{{ $adminListHeaderCardClass }}">
            <p class="{{ $adminListHeaderSubtitleClass }} mt-0">按列表维护每一级升级所需的累计经验值，并统一管理用户最高可达等级与管理员级别。</p>
        </div>

        <form action="{{ route('admin.level-exp-configs.update') }}" method="POST" class="{{ $adminListCardClass }}">
            @csrf
            @method('PUT')

            <div class="grid gap-5 border-b border-gray-100 bg-gray-50 px-6 py-5 md:grid-cols-1">
                <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-4">
                    <div class="text-xs font-semibold uppercase tracking-wider text-amber-700">等级阈值说明</div>
                    <p class="mt-2 text-sm leading-6 text-amber-900">
                        当前页面按列表逐级维护升级经验阈值：每一行对应一个等级，填写“升到该等级所需的累计经验值”。
                        等级阈值必须严格递增，且等级行数不能超过“用户最高可达等级”。
                    </p>
                </div>
            </div>

            <div class="{{ $adminListTableWrapClass }}">
                <table class="{{ $adminListTableClass }}">
                    <thead class="{{ $adminListTableHeadRowClass }}">
                        <tr>
                            <th class="{{ $adminListTableHeadCellClass }} w-36">等级</th>
                            <th class="{{ $adminListTableHeadCellClass }}">累计经验阈值</th>
                            <th class="{{ $adminListTableHeadCellClass }}">较上一等级新增</th>
                            <th class="{{ $adminListTableHeadCellClass }} w-28 text-right">操作</th>
                        </tr>
                    </thead>
                    <tbody class="{{ $adminListTableBodyClass }}" data-level-exp-table-body>
                        @foreach ($formThresholds as $index => $exp)
                            @php
                                $currentExp = (int) $exp;
                                $previousExp = $index === 0 ? 0 : (int) $formThresholds[$index - 1];
                            @endphp
                            <tr class="{{ $adminListTableRowClass }}" data-level-exp-row>
                                <td class="px-4 py-3 {{ $adminListPrimaryTextClass }}" data-level-exp-label>第 {{ $index + 1 }} 级</td>
                                <td class="px-4 py-3">
                                    <input type="number" min="1" step="1" name="thresholds[]" value="{{ $exp }}"
                                        class="w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                        required>
                                </td>
                                <td class="px-4 py-3 {{ $adminListBodyTextClass }}" data-level-exp-increment>
                                    +{{ number_format($currentExp - $previousExp) }}
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <button type="button"
                                        class="{{ $adminListActionButtonClass }} bg-red-50 text-red-600 hover:bg-red-100"
                                        data-level-exp-remove>
                                        删除
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="flex items-center justify-between gap-4 border-t border-gray-100 bg-gray-50 px-6 py-4">
                <div class="space-y-1">
                    <button type="button" class="{{ $adminListSecondaryButtonClass }}" data-level-exp-add>
                    + 添加等级
                    </button>
                    <p class="text-xs text-gray-500" data-level-exp-limit-text>
                        当前已配置 {{ $formThresholds->count() }} 个等级阈值，最高可配置到 {{ $maxLevel }} 级。
                    </p>
                </div>

                <button type="submit" class="{{ $adminListPrimaryButtonClass }}">
                    保存配置
                </button>
            </div>
        </form>
    </div>

    <template id="level-exp-row-template">
        <tr class="{{ $adminListTableRowClass }}" data-level-exp-row>
            <td class="px-4 py-3 {{ $adminListPrimaryTextClass }}" data-level-exp-label></td>
            <td class="px-4 py-3">
                <input type="number" min="1" step="1" name="thresholds[]" value=""
                    class="w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    required>
            </td>
            <td class="px-4 py-3 {{ $adminListBodyTextClass }}" data-level-exp-increment>--</td>
            <td class="px-4 py-3 text-right">
                <button type="button"
                    class="{{ $adminListActionButtonClass }} bg-red-50 text-red-600 hover:bg-red-100"
                    data-level-exp-remove>
                    删除
                </button>
            </td>
        </tr>
    </template>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const tableBody = document.querySelector('[data-level-exp-table-body]');
            const addButton = document.querySelector('[data-level-exp-add]');
            const template = document.querySelector('#level-exp-row-template');
            const limitText = document.querySelector('[data-level-exp-limit-text]');
            const maxLevel = {{ $maxLevel }};

            if (!tableBody || !addButton || !template || !limitText) {
                return;
            }

            const syncRows = () => {
                const rows = Array.from(tableBody.querySelectorAll('[data-level-exp-row]'));
                let previousValue = 0;

                rows.forEach((row, index) => {
                    const label = row.querySelector('[data-level-exp-label]');
                    const input = row.querySelector('input[name=\"thresholds[]\"]');
                    const increment = row.querySelector('[data-level-exp-increment]');
                    const currentValue = Number.parseInt(input?.value ?? '', 10);

                    if (label) {
                        label.textContent = `第 ${index + 1} 级`;
                    }

                    if (increment) {
                        if (Number.isNaN(currentValue)) {
                            increment.textContent = '--';
                        } else {
                            increment.textContent = `+${(currentValue - previousValue).toLocaleString('zh-CN')}`;
                        }
                    }

                    previousValue = Number.isNaN(currentValue) ? previousValue : currentValue;
                });

                const removeButtons = tableBody.querySelectorAll('[data-level-exp-remove]');
                removeButtons.forEach((button) => {
                    button.disabled = rows.length === 1;
                    button.classList.toggle('opacity-40', rows.length === 1);
                    button.classList.toggle('cursor-not-allowed', rows.length === 1);
                });

                limitText.textContent = `当前已配置 ${rows.length} 个等级阈值，最高可配置到 ${maxLevel} 级。`;

                const canAddMore = rows.length < maxLevel;
                addButton.disabled = !canAddMore;
                addButton.classList.toggle('opacity-40', !canAddMore);
                addButton.classList.toggle('cursor-not-allowed', !canAddMore);
            };

            addButton.addEventListener('click', () => {
                const currentRows = tableBody.querySelectorAll('[data-level-exp-row]').length;

                if (currentRows >= maxLevel) {
                    syncRows();

                    return;
                }

                const fragment = template.content.cloneNode(true);
                tableBody.appendChild(fragment);
                syncRows();

                const inputs = tableBody.querySelectorAll('input[name=\"thresholds[]\"]');
                inputs[inputs.length - 1]?.focus();
            });

            tableBody.addEventListener('click', (event) => {
                const trigger = event.target.closest('[data-level-exp-remove]');

                if (!trigger) {
                    return;
                }

                const rows = tableBody.querySelectorAll('[data-level-exp-row]');

                if (rows.length <= 1) {
                    return;
                }

                trigger.closest('[data-level-exp-row]')?.remove();
                syncRows();
            });

            tableBody.addEventListener('input', (event) => {
                if (event.target.matches('input[name=\"thresholds[]\"]')) {
                    syncRows();
                }
            });

            syncRows();
        });
    </script>
@endsection