lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/admin/users/index.blade.php
+76 -62
View File
@@ -3,16 +3,31 @@
@section('title', '用户检索与管理')
@section('content')
@php
$filterLabelClass = 'block mb-1 text-xs font-semibold uppercase tracking-wider text-gray-500';
$filterInputClass = 'px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm';
$tableHeadClass = 'p-4 text-xs font-semibold uppercase tracking-wider text-gray-500';
$primaryTextClass = 'text-sm font-semibold text-gray-800';
$secondaryTextClass = 'text-xs text-gray-400';
$numericTextClass = 'text-sm font-mono';
$statusBadgeClass = 'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-semibold border';
$actionButtonClass = 'rounded-lg px-3 py-1.5 text-xs font-semibold transition cursor-pointer';
$modalLabelClass = 'mb-1 block text-xs font-semibold uppercase tracking-wider text-gray-500';
$modalInputClass = 'w-full rounded-md border border-gray-300 p-2 text-sm text-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-6" x-data="userEditor()">
<div class="p-6 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
<form action="{{ route('admin.users.index') }}" method="GET" class="flex gap-2">
<input type="text" name="username" value="{{ request('username') }}" placeholder="搜索用户名..."
class="px-3 py-1.5 border border-gray-300 rounded shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
<div class="p-6 border-b border-gray-100 bg-gray-50">
<form action="{{ route('admin.users.index') }}" method="GET" class="flex flex-wrap items-end gap-3">
<div>
<label class="{{ $filterLabelClass }}">用户名</label>
<input type="text" name="username" value="{{ request('username') }}" placeholder="搜索用户名..."
class="w-64 {{ $filterInputClass }}">
</div>
<button type="submit"
class="bg-indigo-600 text-white px-4 py-1.5 rounded hover:bg-indigo-700 font-bold shadow-sm transition">搜索</button>
class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-semibold shadow-sm transition hover:bg-indigo-700">搜索</button>
<a href="{{ route('admin.users.index') }}"
class="px-4 py-1.5 bg-white border border-gray-300 rounded text-gray-700 hover:bg-gray-50">重置</a>
class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-semibold text-gray-700 hover:bg-gray-50 transition">重置</a>
</form>
</div>
@@ -36,59 +51,58 @@
@endphp
<table class="w-full text-left border-collapse whitespace-nowrap">
<thead>
<tr
class="bg-gray-50 border-b border-gray-100 text-xs text-gray-500 uppercase font-bold tracking-wider">
<th class="p-4">
<a href="{{ $sortLink('id') }}" class="hover:text-indigo-600 flex items-center gap-1">
<tr class="bg-gray-50 border-b border-gray-100">
<th class="{{ $tableHeadClass }}">
<a href="{{ $sortLink('id') }}" class="flex items-center gap-1 hover:text-indigo-600">
ID<span class="text-indigo-500">{{ $arrow('id') }}</span>
</a>
</th>
<th class="p-4">注册名</th>
<th class="p-4">性别</th>
<th class="p-4">
<a href="{{ $sortLink('user_level') }}" class="hover:text-indigo-600 flex items-center gap-1">
<th class="{{ $tableHeadClass }}">注册名</th>
<th class="{{ $tableHeadClass }}">性别</th>
<th class="{{ $tableHeadClass }}">
<a href="{{ $sortLink('user_level') }}" class="flex items-center gap-1 hover:text-indigo-600">
等级<span class="text-indigo-500">{{ $arrow('user_level') }}</span>
</a>
</th>
<th class="p-4">职务</th>
<th class="p-4">
<a href="{{ $sortLink('exp_num') }}" class="hover:text-indigo-600 flex items-center gap-1">
<th class="{{ $tableHeadClass }}">职务</th>
<th class="{{ $tableHeadClass }}">
<a href="{{ $sortLink('exp_num') }}" class="flex items-center gap-1 hover:text-indigo-600">
经验<span class="text-indigo-500">{{ $arrow('exp_num') }}</span>
</a>
</th>
<th class="p-4">
<a href="{{ $sortLink('jjb') }}" class="hover:text-yellow-600 flex items-center gap-1">
<th class="{{ $tableHeadClass }}">
<a href="{{ $sortLink('jjb') }}" class="flex items-center gap-1 hover:text-yellow-600">
金币<span class="text-yellow-500">{{ $arrow('jjb') }}</span>
</a>
</th>
<th class="p-4">
<a href="{{ $sortLink('meili') }}" class="hover:text-pink-600 flex items-center gap-1">
<th class="{{ $tableHeadClass }}">
<a href="{{ $sortLink('meili') }}" class="flex items-center gap-1 hover:text-pink-600">
魅力<span class="text-pink-500">{{ $arrow('meili') }}</span>
</a>
</th>
<th class="p-4">注册时间</th>
<th class="p-4">
<a href="{{ $sortLink('wxid') }}" class="hover:text-green-600 flex items-center gap-1">
<th class="{{ $tableHeadClass }}">注册时间</th>
<th class="{{ $tableHeadClass }}">
<a href="{{ $sortLink('wxid') }}" class="flex items-center gap-1 hover:text-green-600">
微信绑定<span class="text-green-500">{{ $arrow('wxid') }}</span>
</a>
</th>
<th class="p-4">
<a href="{{ $sortLink('online') }}" class="hover:text-green-600 flex items-center gap-1">
<th class="{{ $tableHeadClass }}">
<a href="{{ $sortLink('online') }}" class="flex items-center gap-1 hover:text-green-600">
在线<span class="text-green-500">{{ $arrow('online') }}</span>
</a>
</th>
<th class="p-4 text-right">管理操作</th>
<th class="{{ $tableHeadClass }} text-right">管理操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
@foreach ($users as $user)
<tr class="hover:bg-gray-50 transition">
<td class="p-4 font-mono text-xs text-gray-500">{{ $user->id }}</td>
<td class="p-4 text-xs font-mono text-gray-500">{{ $user->id }}</td>
<td class="p-4">
<div class="flex items-center space-x-3">
<img src="{{ $user->headface_url ?? '/images/headface/1.gif' }}"
class="w-8 h-8 rounded border object-cover">
<span class="font-bold text-gray-800">{{ $user->username }}</span>
<span class="{{ $primaryTextClass }}">{{ $user->username }}</span>
@if ($user->isVip())
<span title="{{ $user->vipName() }}"
style="color: {{ $user->vipLevel?->color ?? '#f59e0b' }}">{{ $user->vipIcon() }}</span>
@@ -105,32 +119,32 @@
<td class="p-4">
@if ($user->activePosition)
@php $pos = $user->activePosition->position; @endphp
<div class="text-xs text-gray-400">{{ $pos->department->name }}</div>
<div class="font-bold text-sm" style="color: {{ $pos->department->color }}">
<div class="{{ $secondaryTextClass }}">{{ $pos->department->name }}</div>
<div class="font-semibold text-sm" style="color: {{ $pos->department->color }}">
{{ $pos->icon }} {{ $pos->name }}
</div>
@else
<span class="text-gray-300 text-xs">—</span>
@endif
</td>
<td class="p-4 text-sm font-mono text-gray-600">
<td class="p-4 {{ $numericTextClass }} text-gray-600">
{{ number_format($user->exp_num ?? 0) }}
</td>
<td class="p-4 text-sm font-mono text-yellow-700">
<td class="p-4 {{ $numericTextClass }} text-yellow-700">
{{ number_format($user->jjb ?? 0) }}
</td>
<td class="p-4 text-sm font-mono text-pink-600">
<td class="p-4 {{ $numericTextClass }} text-pink-600">
{{ number_format($user->meili ?? 0) }}
</td>
<td class="p-4 text-sm font-mono text-gray-500">{{ $user->created_at->format('y-m-d') }}
<td class="p-4 {{ $numericTextClass }} text-gray-500">{{ $user->created_at->format('y-m-d') }}
</td>
<td class="p-4">
@if(!empty($user->wxid))
<span class="inline-flex items-center gap-1.5 text-xs font-bold px-2 py-0.5 rounded-full bg-green-50 text-green-700 border border-green-200">
<span class="{{ $statusBadgeClass }} bg-green-50 text-green-700 border-green-200">
已绑定
</span>
@else
<span class="inline-flex items-center gap-1.5 text-xs font-bold px-2 py-0.5 rounded-full bg-gray-50 text-gray-400 border border-gray-200">
<span class="{{ $statusBadgeClass }} bg-gray-50 text-gray-400 border-gray-200">
未绑定
</span>
@endif
@@ -138,8 +152,8 @@
<td class="p-4">
@php $isOnline = $onlineUsernames->contains($user->username); @endphp
<span
class="inline-flex items-center gap-1.5 text-xs font-bold px-2 py-0.5 rounded-full
{{ $isOnline ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-400' }}">
class="{{ $statusBadgeClass }}
{{ $isOnline ? 'bg-green-100 text-green-700 border-green-200' : 'bg-gray-100 text-gray-400 border-gray-200' }}">
<span
class="w-1.5 h-1.5 rounded-full {{ $isOnline ? 'bg-green-500' : 'bg-gray-300' }}"></span>
{{ $isOnline ? '在线' : '离线' }}
@@ -187,7 +201,7 @@
<!-- 分页链接 -->
@if ($users->hasPages())
<div class="p-4 border-t border-gray-100">
<div class="p-4 border-t border-gray-100 text-sm text-gray-600">
{{ $users->links() }}
</div>
@endif
@@ -199,7 +213,7 @@
class="bg-white rounded-xl shadow-2xl w-full max-w-lg transform transition-all" x-transition>
<div
class="bg-indigo-900 border-b border-indigo-800 px-6 py-4 flex justify-between items-center rounded-t-xl text-white">
<h3 class="font-bold text-lg">编辑用户：<span x-text="editingUser.username" class="text-indigo-300"></span>
<h3 class="text-sm font-semibold uppercase tracking-wider">编辑用户：<span x-text="editingUser.username" class="text-indigo-300"></span>
</h3>
<button @click="showEditModal = false" class="text-gray-400 hover:text-white">&times;</button>
</div>
@@ -209,7 +223,7 @@
<div x-show="editToast" x-transition style="display:none;"
:class="editToastOk ? 'bg-green-50 border-green-400 text-green-800' :
'bg-red-50 border-red-400 text-red-800'"
class="mb-4 px-4 py-2 border-l-4 rounded text-sm font-bold" x-text="editToastMsg">
class="mb-4 rounded border-l-4 px-4 py-2 text-sm font-semibold" x-text="editToastMsg">
</div>
<form @submit.prevent="submitEditUser($el)" method="POST">
@@ -218,28 +232,28 @@
<div class="grid grid-cols-2 gap-4">
{{-- 经验 --}}
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">经验值</label>
<label class="{{ $modalLabelClass }}">经验值</label>
<input type="number" name="exp_num" x-model="editingUser.exp_num" required
min="0"
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border text-sm">
class="{{ $modalInputClass }}">
</div>
{{-- 金币 --}}
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">金币 (jjb)</label>
<label class="{{ $modalLabelClass }}">金币 (jjb)</label>
<input type="number" name="jjb" x-model="editingUser.jjb" required min="0"
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border text-sm">
class="{{ $modalInputClass }}">
</div>
{{-- 魅力 --}}
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">魅力值</label>
<label class="{{ $modalLabelClass }}">魅力值</label>
<input type="number" name="meili" x-model="editingUser.meili" required min="0"
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border text-sm">
class="{{ $modalInputClass }}">
</div>
{{-- 性别 --}}
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">性别</label>
<label class="{{ $modalLabelClass }}">性别</label>
<select name="sex" x-model="editingUser.sex"
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border text-sm">
class="{{ $modalInputClass }}">
<option value="1">男</option>
<option value="2">女</option>
<option value="0">保密</option>
@@ -247,7 +261,7 @@
</div>
{{-- 访问次数 --}}
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">访问次数</label>
<label class="{{ $modalLabelClass }}">访问次数</label>
<input type="text" disabled :value="editingUser.visit_num"
class="w-full bg-gray-100 border-gray-200 rounded-md p-2 border text-sm text-gray-500">
</div>
@@ -255,17 +269,17 @@
{{-- 签名 --}}
<div class="mt-4">
<label class="block text-xs font-bold text-gray-600 mb-1">个性签名</label>
<label class="{{ $modalLabelClass }}">个性签名</label>
<input type="text" name="qianming" x-model="editingUser.qianming" maxlength="255"
placeholder="暂无签名"
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border text-sm">
class="{{ $modalInputClass }}">
</div>
{{-- 任命职务 --}}
<div class="mt-4">
<label class="block text-xs font-bold text-gray-600 mb-1">职务</label>
<label class="{{ $modalLabelClass }}">职务</label>
<select name="position_id" x-model="editingUser.position_id"
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border text-sm">
class="{{ $modalInputClass }}">
<option value="">无职务</option>
@foreach ($departments as $department)
<optgroup label="{{ $department->name }}">
@@ -280,9 +294,9 @@
{{-- VIP 会员设置 --}}
<div class="mt-4 grid grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">VIP 会员等级</label>
<label class="{{ $modalLabelClass }}">VIP 会员等级</label>
<select name="vip_level_id" x-model="editingUser.vip_level_id"
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border text-sm">
class="{{ $modalInputClass }}">
<option value="">无（普通用户）</option>
@foreach ($vipLevels as $vl)
<option value="{{ $vl->id }}">{{ $vl->icon }}
@@ -292,18 +306,18 @@
</select>
</div>
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">会员到期时间
<span class="font-normal text-gray-400">（留空=永久）</span></label>
<label class="{{ $modalLabelClass }}">会员到期时间
<span class="normal-case font-normal tracking-normal text-gray-400">（留空=永久）</span></label>
<input type="date" name="hy_time" x-model="editingUser.hy_time"
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border text-sm">
class="{{ $modalInputClass }}">
</div>
</div>
{{-- 密码 --}}
<div class="mt-4">
<label
class="block text-xs font-bold pl-2 text-red-600 border-l-4 border-red-500 bg-red-50 p-2 mb-1">强制重置密码
<span class="font-normal text-gray-500">（留空不修改）</span></label>
class="mb-1 block border-l-4 border-red-500 bg-red-50 p-2 pl-2 text-xs font-semibold uppercase tracking-wider text-red-600">强制重置密码
<span class="normal-case font-normal tracking-normal text-gray-500">（留空不修改）</span></label>
<input type="text" name="password" placeholder="输入新密码"
class="w-full border-red-300 rounded-md shadow-sm focus:border-red-500 focus:ring-red-500 p-2 border text-sm placeholder-red-300">
</div>