208 lines
9.6 KiB
PHP
208 lines
9.6 KiB
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
|