fix: 美化全局金币流水页面筛选表单的UI样式

This commit is contained in:
2026-03-28 17:24:31 +08:00
parent 08df13bfc7
commit 8f850e651e
2 changed files with 32 additions and 30 deletions

View File

@@ -4,22 +4,23 @@
@section('content')
<!-- 筛选面板 -->
<div class="bg-white p-6 rounded shadow mb-6">
<form action="{{ route('admin.currency-logs.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-4 items-end">
<div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm mb-6">
<form action="{{ route('admin.currency-logs.index') }}" method="GET" class="flex flex-wrap items-end gap-4">
<!-- 用户名 -->
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
<div class="flex-1 min-w-[140px]">
<label for="username" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">用户名</label>
<input type="text" name="username" id="username" value="{{ request('username') }}"
class="w-full border-gray-300 rounded shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2"
placeholder="选填">
</div>
<!-- 货币类型 -->
<div>
<label for="currency" class="block text-sm font-medium text-gray-700 mb-1">货币类型</label>
<div class="flex-1 min-w-[130px]">
<label for="currency" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">货币类型</label>
<select name="currency" id="currency"
class="w-full border-gray-300 rounded shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
<option value="">全部类型</option>
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
<option value="">全部</option>
<option value="gold" {{ request('currency') == 'gold' ? 'selected' : '' }}>💰 金币</option>
<option value="exp" {{ request('currency') == 'exp' ? 'selected' : '' }}> 经验</option>
<option value="charm" {{ request('currency') == 'charm' ? 'selected' : '' }}>💖 魅力</option>
@@ -27,10 +28,10 @@
</div>
<!-- 变动方向 -->
<div>
<label for="direction" class="block text-sm font-medium text-gray-700 mb-1">变动方向</label>
<div class="flex-1 min-w-[120px]">
<label for="direction" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">变动方向</label>
<select name="direction" id="direction"
class="w-full border-gray-300 rounded shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
<option value="">全部</option>
<option value="in" {{ request('direction') == 'in' ? 'selected' : '' }}> 增加</option>
<option value="out" {{ request('direction') == 'out' ? 'selected' : '' }}> 扣除</option>
@@ -38,10 +39,10 @@
</div>
<!-- 来源途径 -->
<div>
<label for="source" class="block text-sm font-medium text-gray-700 mb-1">来源途径</label>
<div class="flex-1 min-w-[140px]">
<label for="source" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">来源途径</label>
<select name="source" id="source"
class="w-full border-gray-300 rounded shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
<option value="">全部来源</option>
@foreach ($allSources as $src)
<option value="{{ $src->value }}" {{ request('source') == $src->value ? 'selected' : '' }}>
@@ -52,35 +53,36 @@
</div>
<!-- 备注关键词 -->
<div>
<label for="remark" class="block text-sm font-medium text-gray-700 mb-1">备注/房间流水</label>
<div class="flex-1 min-w-[160px]">
<label for="remark" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">备注/房间流水</label>
<input type="text" name="remark" id="remark" value="{{ request('remark') }}"
class="w-full border-gray-300 rounded shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="包含(可搜房间名)">
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2"
placeholder="包含(可搜房间名)">
</div>
<!-- 开始日期 -->
<div>
<label for="date_start" class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
<div class="flex-none w-36">
<label for="date_start" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">开始日期</label>
<input type="date" name="date_start" id="date_start" value="{{ request('date_start') }}"
class="w-full border-gray-300 rounded shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
</div>
<!-- 结束日期 -->
<div>
<label for="date_end" class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
<div class="flex-none w-36">
<label for="date_end" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">结束日期</label>
<input type="date" name="date_end" id="date_end" value="{{ request('date_end') }}"
class="w-full border-gray-300 rounded shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
</div>
<!-- 按钮组 -->
<div class="md:col-span-2 lg:col-span-3 flex items-center space-x-3">
<div class="flex-none flex items-center space-x-2">
<button type="submit"
class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded shadow transition">
🔍 查询
class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-5 rounded-lg shadow-sm transition flex items-center gap-1.5 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
查询
</button>
<a href="{{ route('admin.currency-logs.index') }}"
class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-2 px-4 rounded shadow transition text-sm">
class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg shadow-sm transition text-sm">
重置
</a>
</div>

View File

@@ -56,7 +56,7 @@
</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' }}">
{!! '💴 全局金币流水' !!}
{!! '💴 用户流水' !!}
</a>
<a href="{{ route('admin.rooms.index') }}"
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.rooms.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">