316 lines
19 KiB
PHP
316 lines
19 KiB
PHP
{{--
|
||
文件功能：勤务台页面（职务管理荣誉展示台）
|
||
左侧子菜单：任职列表、日榜、周榜、月榜、总榜
|
||
URL：/duty-hall?tab=roster|day|week|month|all
|
||
|
||
@extends layouts.app
|
||
--}}
|
||
@extends('layouts.app')
|
||
|
||
@section('title', '勤务台 · ' . ($tabs[$tab]['label'] ?? '任职列表') . ' - 飘落流星')
|
||
@section('nav-icon', '🏛️')
|
||
@section('nav-title', '勤务台')
|
||
|
||
@section('content')
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex gap-6 items-start">
|
||
|
||
{{-- ═══ 左侧子菜单 ═══ --}}
|
||
<aside
|
||
class="w-52 shrink-0 bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden sticky top-20 self-start hidden md:block">
|
||
<div class="px-4 pt-4 pb-2">
|
||
<p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">勤务台</p>
|
||
<nav class="space-y-1">
|
||
@foreach ($tabs as $key => $meta)
|
||
<a href="{{ route('duty-hall.index', ['tab' => $key]) }}"
|
||
class="flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors
|
||
{{ $tab === $key
|
||
? 'bg-purple-50 text-purple-700 font-bold'
|
||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-800' }}">
|
||
<span class="text-base">{{ $meta['icon'] }}</span>
|
||
<span>{{ $meta['label'] }}</span>
|
||
@if ($tab === $key)
|
||
<span class="ml-auto w-1.5 h-1.5 rounded-full bg-purple-600"></span>
|
||
@endif
|
||
</a>
|
||
@endforeach
|
||
</nav>
|
||
</div>
|
||
<div class="px-4 py-3 mt-2 border-t border-gray-50 text-xs text-gray-400 text-center">
|
||
光荣服务，公示透明
|
||
</div>
|
||
</aside>
|
||
|
||
{{-- ═══ 主内容区 ═══ --}}
|
||
<main class="flex-1 min-w-0">
|
||
|
||
{{-- ─── Tab：任职列表 ─── --}}
|
||
@if ($tab === 'roster')
|
||
<div class="mb-4">
|
||
<h2 class="text-lg font-bold text-gray-800">🏛️ 任职列表</h2>
|
||
<p class="text-xs text-gray-400 mt-0.5">按部门 · 职务展示当前全部在职人员</p>
|
||
</div>
|
||
|
||
@if ($currentStaff->isEmpty())
|
||
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm py-20 text-center text-gray-400">
|
||
<div class="text-5xl mb-4">📭</div>
|
||
<p>暂未设置任何部门</p>
|
||
</div>
|
||
@else
|
||
<div class="space-y-5">
|
||
@foreach ($currentStaff as $dept)
|
||
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
||
{{-- 部门标题 --}}
|
||
<div
|
||
class="px-5 py-3 bg-gradient-to-r from-purple-50 to-indigo-50 border-b border-gray-100 flex items-center gap-2">
|
||
<span class="text-base">{{ $dept->icon ?? '🏢' }}</span>
|
||
<span class="font-bold text-purple-700 text-sm">{{ $dept->name }}</span>
|
||
<span class="ml-auto text-xs text-gray-400">{{ $dept->positions->count() }} 个职务</span>
|
||
</div>
|
||
|
||
@if ($dept->positions->isEmpty())
|
||
<div class="px-5 py-4 text-xs text-gray-400 italic">该部门暂无职务设置</div>
|
||
@else
|
||
<div class="divide-y divide-gray-50">
|
||
@foreach ($dept->positions as $position)
|
||
<div class="px-5 py-3">
|
||
{{-- 职务名 --}}
|
||
<div class="flex items-center gap-1.5 mb-2">
|
||
<span class="text-sm">{{ $position->icon }}</span>
|
||
<span
|
||
class="text-sm font-semibold text-gray-700">{{ $position->name }}</span>
|
||
@php
|
||
$current = $position->activeUserPositions->count();
|
||
$maxSlots = $position->max_persons;
|
||
$isFull = $maxSlots !== null && $current >= $maxSlots;
|
||
@endphp
|
||
{{-- 名额计数标签 --}}
|
||
<span
|
||
class="ml-1 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-md text-[10px] font-bold
|
||
{{ $current === 0
|
||
? 'bg-gray-100 text-gray-400'
|
||
: ($isFull
|
||
? 'bg-red-100 text-red-600'
|
||
: 'bg-purple-100 text-purple-600') }}">
|
||
{{ $current }}
|
||
@if ($maxSlots !== null)
|
||
<span class="opacity-60">/{{ $maxSlots }}</span>
|
||
@endif
|
||
人
|
||
</span>
|
||
@if ($isFull)
|
||
<span class="text-[10px] text-red-400">已满</span>
|
||
@elseif ($current === 0)
|
||
<span class="text-[10px] text-gray-300">（暂缺）</span>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- 在职人员列表 --}}
|
||
@if ($position->activeUserPositions->isNotEmpty())
|
||
<div class="flex flex-wrap gap-2">
|
||
@foreach ($position->activeUserPositions as $up)
|
||
<div
|
||
class="flex items-center gap-2 px-3 py-1.5 bg-gray-50 border border-gray-100 rounded-xl">
|
||
<img src="{{ $up->user?->headface_url ?? '/images/headface/1.gif' }}"
|
||
class="w-7 h-7 rounded-full border border-purple-100 object-cover bg-white"
|
||
onerror="this.src='/images/headface/1.gif'">
|
||
<div>
|
||
<p class="text-xs font-bold text-gray-800">
|
||
{{ $up->user?->username ?? '未知' }}</p>
|
||
<p class="text-[10px] text-gray-400">
|
||
{{ $up->appointed_at?->format('Y-m-d') }} 起 ·
|
||
{{ $up->duration_days }} 天</p>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@else
|
||
{{-- 空缺占位 --}}
|
||
<div
|
||
class="flex items-center gap-2 px-3 py-2 border border-dashed border-gray-200 rounded-xl text-xs text-gray-300 w-fit">
|
||
<span>👤</span>
|
||
<span>暂无任职人员</span>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
{{-- ─── Tab：日/周/月/总榜 ─── --}}
|
||
@else
|
||
@php
|
||
$tabMeta = $tabs[$tab];
|
||
$periodLabel = match ($tab) {
|
||
'day' => today()->format('Y年m月d日'),
|
||
'week' => now()->startOfWeek()->format('m月d日') . ' – ' . now()->endOfWeek()->format('m月d日'),
|
||
'month' => now()->format('Y年m月'),
|
||
'all' => '历史累计',
|
||
};
|
||
@endphp
|
||
|
||
<div class="mb-4">
|
||
<h2 class="text-lg font-bold text-gray-800">{{ $tabMeta['icon'] }} 勤务{{ $tabMeta['label'] }}</h2>
|
||
<p class="text-xs text-gray-400 mt-0.5">{{ $periodLabel }} · 综合统计在线时长、管理操作、奖励金币</p>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
||
@if ($leaderboard->isEmpty())
|
||
<div class="py-20 text-center text-gray-400">
|
||
<div class="text-5xl mb-4">📊</div>
|
||
<p>该时段暂无勤务记录</p>
|
||
</div>
|
||
@else
|
||
{{-- 表头（桌面端网格：名次1 + 成员4 + 在线3 + 签到2 + 管理操作2） --}}
|
||
<div
|
||
class="hidden md:grid grid-cols-12 gap-2 px-5 py-2.5 bg-gray-50 border-b border-gray-100 text-xs font-bold text-gray-400 uppercase tracking-wide">
|
||
<div class="col-span-1 text-center">名次</div>
|
||
<div class="col-span-4">成员</div>
|
||
<div class="col-span-3 text-right">🕐 在线时长</div>
|
||
<div class="col-span-2 text-right">📋 登录</div>
|
||
<div class="col-span-1 text-right">⚡管理</div>
|
||
<div class="col-span-1 text-right">🎁奖励</div>
|
||
</div>
|
||
|
||
@foreach ($leaderboard as $i => $row)
|
||
@php
|
||
$h = intdiv($row->total_seconds, 3600);
|
||
$m = intdiv($row->total_seconds % 3600, 60);
|
||
$medal = match ($i) {
|
||
0 => '🥇',
|
||
1 => '🥈',
|
||
2 => '🥉',
|
||
default => null,
|
||
};
|
||
$rowBg = match ($i) {
|
||
0 => 'bg-yellow-50/50',
|
||
1 => 'bg-gray-50/70',
|
||
2 => 'bg-amber-50/40',
|
||
default => '',
|
||
};
|
||
@endphp
|
||
|
||
{{-- 桌面端行 --}}
|
||
<div
|
||
class="hidden md:grid grid-cols-12 gap-2 items-center px-5 py-3.5
|
||
border-b border-gray-50 last:border-0 {{ $rowBg }}
|
||
hover:bg-purple-50/30 transition-colors">
|
||
|
||
{{-- 名次 --}}
|
||
<div class="col-span-1 text-center">
|
||
@if ($medal)
|
||
<span class="text-xl">{{ $medal }}</span>
|
||
@else
|
||
<span class="text-sm font-bold text-gray-300">{{ $i + 1 }}</span>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- 成员 --}}
|
||
<div class="col-span-4 flex items-center gap-3">
|
||
<img src="{{ $row->user?->headface_url ?? '/images/headface/1.gif' }}"
|
||
class="w-9 h-9 rounded-full border-2 border-purple-100 object-cover bg-white"
|
||
onerror="this.src='/images/headface/1.gif'">
|
||
<div>
|
||
<p class="font-bold text-sm text-gray-800">{{ $row->user?->username ?? '未知' }}</p>
|
||
<p class="text-[10px] text-gray-400">LV.{{ $row->user?->user_level ?? '' }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 在线时长 --}}
|
||
<div class="col-span-3 text-right">
|
||
<span class="text-sm font-bold text-purple-600 tabular-nums">{{ $h }}h
|
||
{{ $m }}m</span>
|
||
</div>
|
||
|
||
{{-- 登录次数 --}}
|
||
<div class="col-span-2 text-right">
|
||
<span class="text-sm font-bold text-indigo-500 tabular-nums">{{ $row->checkin_count }}
|
||
次</span>
|
||
</div>
|
||
|
||
{{-- 管理操作次数 --}}
|
||
<div class="col-span-1 text-right">
|
||
@if ($row->admin_count > 0)
|
||
<span
|
||
class="inline-flex items-center justify-end gap-0.5 text-sm font-bold text-orange-500 tabular-nums">
|
||
{{ $row->admin_count }}
|
||
</span>
|
||
@else
|
||
<span class="text-gray-300 text-sm">—</span>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- 奖励金币次数 --}}
|
||
<div class="col-span-1 text-right">
|
||
@if ($row->reward_count > 0)
|
||
<span class="text-sm font-bold text-emerald-500 tabular-nums"
|
||
title="{{ $row->reward_count }}次 · 共{{ $row->reward_total }}金币">
|
||
{{ $row->reward_count }}
|
||
</span>
|
||
@else
|
||
<span class="text-gray-300 text-sm">—</span>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 移动端：紧凑卡片 --}}
|
||
<div
|
||
class="md:hidden flex items-center gap-3 px-4 py-3 border-b border-gray-50 last:border-0 {{ $rowBg }}">
|
||
<div class="w-7 text-center shrink-0">
|
||
@if ($medal)
|
||
<span class="text-lg">{{ $medal }}</span>
|
||
@else
|
||
<span class="text-xs font-bold text-gray-300">{{ $i + 1 }}</span>
|
||
@endif
|
||
</div>
|
||
<img src="{{ $row->user?->headface_url ?? '/images/headface/1.gif' }}"
|
||
class="w-8 h-8 rounded-full border border-purple-100 object-cover bg-white shrink-0"
|
||
onerror="this.src='/images/headface/1.gif'">
|
||
<div class="flex-1 min-w-0">
|
||
<p class="font-bold text-sm text-gray-800 truncate">{{ $row->user?->username ?? '未知' }}
|
||
</p>
|
||
<p class="text-[10px] text-gray-400">{{ $h }}h{{ $m }}m ·
|
||
登录{{ $row->checkin_count }}次</p>
|
||
</div>
|
||
<div class="text-right shrink-0 space-y-0.5">
|
||
@if ($row->admin_count > 0)
|
||
<p class="text-xs font-bold text-orange-500">⚡{{ $row->admin_count }}次管理</p>
|
||
@endif
|
||
@if ($row->reward_count > 0)
|
||
<p class="text-xs font-bold text-emerald-500">🎁{{ $row->reward_count }}次奖励</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
|
||
{{-- 图例说明 --}}
|
||
<div
|
||
class="px-5 py-2.5 bg-gray-50/60 border-t border-gray-50 text-[10px] text-gray-400 flex flex-wrap gap-x-4 gap-y-1">
|
||
<span>🕐 在线时长：在职期间进入房间的累计时长</span>
|
||
<span>📋 登录：进入房间次数</span>
|
||
<span>⚡ 管理：警告/踢出/禁言/封IP等操作次数</span>
|
||
<span>🎁 奖励：发送奖励金币次数（悬停查看总金额）</span>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
</main>
|
||
</div>
|
||
|
||
{{-- 移动端底部 Tab 导航 --}}
|
||
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex z-30">
|
||
@foreach ($tabs as $key => $meta)
|
||
<a href="{{ route('duty-hall.index', ['tab' => $key]) }}"
|
||
class="flex-1 flex flex-col items-center py-2 text-xs
|
||
{{ $tab === $key ? 'text-purple-600 font-bold' : 'text-gray-500' }}">
|
||
<span class="text-lg">{{ $meta['icon'] }}</span>
|
||
<span class="mt-0.5">{{ $meta['label'] }}</span>
|
||
</a>
|
||
@endforeach
|
||
</div>
|
||
@endsection
|