优化积分流水筛选与用户管理样式

This commit is contained in:
2026-04-26 17:54:24 +08:00
parent af772350c9
commit 61cfc2091c
11 changed files with 555 additions and 109 deletions
+52 -2
View File
@@ -1,6 +1,6 @@
{{--
文件功能:用户个人积分流水日志页面
用户可筛选查看自己的经验、金币、魅力变动历史,按日期倒序排列
用户可筛选查看自己的经验、金币、魅力收入和支出变动历史,按日期倒序排列
@extends layouts.app
--}}
@@ -13,11 +13,25 @@
@section('content')
<main class="p-4 sm:p-6 lg:p-8">
<div class="max-w-4xl mx-auto">
@php
$selectedSourceCount = count($selectedSources ?? []);
@endphp
{{-- 筛选栏 --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6 flex flex-wrap gap-3 items-center">
<span class="text-gray-600 text-sm font-medium">筛选:</span>
{{-- 收支方向 --}}
<div class="flex gap-2">
@foreach(['' => '全部', 'income' => '收入', 'expense' => '支出'] as $val => $label)
<a href="{{ route('currency.my-logs', array_merge(request()->query(), ['direction' => $val, 'days' => $days])) }}"
class="px-3 py-1 rounded-full text-xs font-medium transition
{{ ($direction ?? '') === $val ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-green-100' }}">
{{ $label }}
</a>
@endforeach
</div>
{{-- 货币类型 --}}
<div class="flex gap-2">
@foreach(['' => '全部', 'exp' => '⚡ 经验', 'gold' => '💰 金币', 'charm' => '🌸 魅力'] as $val => $label)
@@ -29,6 +43,41 @@
@endforeach
</div>
{{-- 来源筛选 --}}
<form method="GET" action="{{ route('currency.my-logs') }}" class="relative">
<input type="hidden" name="direction" value="{{ $direction ?? '' }}">
<input type="hidden" name="currency" value="{{ $currency ?? '' }}">
<input type="hidden" name="days" value="{{ $days }}">
<details class="relative">
<summary class="list-none cursor-pointer select-none px-3 py-1 rounded-full text-xs font-medium transition bg-gray-100 text-gray-600 hover:bg-indigo-100">
来源:{{ $selectedSourceCount > 0 ? '已选 '.$selectedSourceCount.' 项' : '全部' }}
</summary>
<div class="absolute left-0 z-20 mt-2 flex w-72 max-h-80 flex-col rounded-lg border border-gray-200 bg-white shadow-lg">
<div class="grid max-h-60 gap-1 overflow-y-auto p-3">
@foreach($sourceOptions as $sourceOption)
<label class="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-gray-600 hover:bg-gray-50">
<input type="checkbox" name="sources[]" value="{{ $sourceOption->value }}"
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
@checked(in_array($sourceOption->value, $selectedSources ?? [], true))>
<span class="truncate" title="{{ $sourceOption->label() }}">{{ $sourceOption->label() }}</span>
</label>
@endforeach
</div>
<div class="sticky bottom-0 flex items-center justify-between border-t border-gray-100 bg-white px-3 py-3">
<a href="{{ route('currency.my-logs', request()->except('sources')) }}"
class="text-xs text-gray-400 hover:text-gray-600">清空来源</a>
<button type="submit"
class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700">
应用
</button>
</div>
</div>
</details>
</form>
{{-- 日期范围 --}}
<div class="flex gap-2 ml-auto">
@foreach([7 => '7 天', 14 => '14 天', 30 => '30 天'] as $d => $label)
@@ -87,7 +136,8 @@
<td class="px-4 py-3 text-right text-gray-500">
{{ number_format($log->balance_after) }}
</td>
<td class="px-4 py-3 text-gray-400 text-xs max-w-[160px] truncate">
<td class="px-4 py-3 text-gray-400 text-xs max-w-[160px] truncate"
title="{{ $log->remark ?: '—' }}">
{{ $log->remark ?: '—' }}
</td>
</tr>