优化后台等级设置

2026-04-26 20:37:23 +08:00
parent e69bceeb77
commit b07f4e971a
13 changed files with 753 additions and 14 deletions
@@ -35,18 +35,6 @@
                    <span class="w-32 text-gray-500 inline-block font-sans">PHP 版本：</span>
                    <span class="text-indigo-600">{{ PHP_VERSION }}</span>
                </li>
-                <li class="flex items-center text-sm font-mono mt-4 pt-4 border-t">
-                    <span class="mr-4 text-gray-500 inline-block font-sans items-center flex">队列监控面板</span>
-                    <!-- Laravel Horizon 的默认路由前缀由开发者确认或自己改。这里默认是 /horizon -->
-                    <a href="{{ url('/horizon') }}" target="_blank"
-                        class="text-blue-600 hover:text-blue-800 hover:underline flex items-center">
-                        <span>打开 Horizon 控制台</span>
-                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
-                        </svg>
-                    </a>
-                </li>
            </ul>
        </div>
    </div>
@@ -64,6 +64,10 @@
                    class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.system.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
                    {!! '⚙️ 聊天室参数' !!}
                </a>
+                <a href="{{ route('admin.level-exp-configs.index') }}"
+                    class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.level-exp-configs.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
+                    {!! '📶 等级经验阈值' !!}
+                </a>
                <a href="{{ route('admin.currency-logs.index') }}"
                    class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.currency-logs.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
                    {!! '💴 用户流水' !!}
@@ -0,0 +1,207 @@
+@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
@@ -81,6 +81,29 @@
                    </form>
                </div>

+                {{-- 队列监控面板 --}}
+                <div class="border border-gray-200 rounded-xl p-5 hover:shadow-sm transition">
+                    <div class="flex items-center gap-3 mb-2">
+                        <span class="text-2xl">📈</span>
+                        <div>
+                            <div class="font-bold text-gray-800 text-sm">队列监控面板</div>
+                            <div class="text-xs text-gray-400">Laravel Horizon</div>
+                        </div>
+                    </div>
+                    <p class="text-xs text-gray-500 mb-4 leading-relaxed">
+                        打开 Horizon 控制台查看队列吞吐、失败任务与进程状态。<br>
+                        需要排查异步任务堆积、失败重试或 Supervisor 状态时从这里进入。
+                    </p>
+                    <a href="{{ url('/horizon') }}" target="_blank" rel="noopener noreferrer"
+                        class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-bold hover:bg-indigo-700 transition shadow-sm">
+                        <span>打开 Horizon 控制台</span>
+                        <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                        </svg>
+                    </a>
+                </div>
+
                {{-- 房间在线名单清理 --}}
                <div class="border border-red-100 rounded-xl p-5 bg-red-50 hover:shadow-sm transition">
                    <div class="flex items-center gap-3 mb-2">
@@ -25,13 +25,24 @@
                        @php
                            $fieldValue = (string) $body;
                            $shouldUseTextarea = strlen($fieldValue) > 50 || str_contains($fieldValue, "\n") || str_contains($fieldValue, '<');
+                            $isMaxLevelField = $alias === 'maxlevel';
+                            $isSuperLevelField = $alias === 'superlevel';
                        @endphp
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                {{ $descriptions[$alias] ?? $alias }}
                                <span class="text-gray-400 font-normal ml-2">[{{ $alias }}]</span>
                            </label>
-                            @if ($shouldUseTextarea)
+                            @if ($isMaxLevelField)
+                                <p class="mb-2 text-xs text-gray-500">修改后会自动同步管理员级别为“最高等级 + 1”。</p>
+                                <input type="number" min="1" step="1" id="system-maxlevel" name="{{ $alias }}" value="{{ $fieldValue }}"
+                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
+                            @elseif ($isSuperLevelField)
+                                <p class="mb-2 text-xs text-gray-500">该值会随“用户最高可达等级”自动计算，仅用于展示当前结果。</p>
+                                <input type="number" id="system-superlevel" value="{{ $fieldValue }}"
+                                    class="w-full border-gray-200 rounded-md shadow-sm p-2.5 bg-gray-100 border text-gray-600"
+                                    readonly>
+                            @elseif ($shouldUseTextarea)
                                <textarea name="{{ $alias }}" rows="4"
                                    class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border whitespace-pre-wrap">{{ $fieldValue }}</textarea>
                            @else
@@ -53,4 +64,30 @@
            </form>
        </div>
    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const maxLevelInput = document.querySelector('#system-maxlevel');
+            const superLevelInput = document.querySelector('#system-superlevel');
+
+            if (!maxLevelInput || !superLevelInput) {
+                return;
+            }
+
+            const syncSuperLevel = () => {
+                const maxLevel = Number.parseInt(maxLevelInput.value ?? '', 10);
+
+                if (Number.isNaN(maxLevel) || maxLevel < 1) {
+                    superLevelInput.value = '';
+
+                    return;
+                }
+
+                superLevelInput.value = String(maxLevel + 1);
+            };
+
+            maxLevelInput.addEventListener('input', syncSuperLevel);
+            syncSuperLevel();
+        });
+    </script>
@endsection