feat: 任命/撤销通知系统 + 用户名片UI优化
- 任命/撤销事件增加 type 字段区分类型 - 任命：全屏礼花 + 紫色弹窗 + 紫色系统消息 - 撤销：灰色弹窗 + 灰色系统消息，无礼花 - 消息分发：操作者/被操作者显示在私聊面板，其他人显示在公屏 - 系统消息加随机鼓励语（各5条轮换） - ChatStateService 修复 Redis key 前缀扫描问题（getAllActiveRoomIds） - 用户名片折叠优化：管理员视野、职务履历均可折叠 - 管理操作 + 职务操作合并为「🔧 管理操作」折叠区 - 悄悄话改为「🎁 送礼物」按钮，礼物面板内联展开
This commit is contained in:
@@ -68,6 +68,13 @@ export function initChat(roomId) {
|
||||
.listen("EffectBroadcast", (e) => {
|
||||
console.log("特效播放:", e);
|
||||
window.dispatchEvent(new CustomEvent("chat:effect", { detail: e }));
|
||||
})
|
||||
// 监听任命公告（礼花 + 隆重弹窗）
|
||||
.listen("AppointmentAnnounced", (e) => {
|
||||
console.log("任命公告:", e);
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("chat:appointment-announced", { detail: e }),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
{{--
|
||||
文件功能：在职期间权限操作日志子页
|
||||
展示某任职记录期间该用户的所有权限操作（任命/撤销/奖励/警告/踢出/禁言/封IP等）
|
||||
|
||||
@author ChatRoom Laravel
|
||||
@version 1.0.0
|
||||
--}}
|
||||
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '权限操作日志 · ' . $userPosition->user->username)
|
||||
|
||||
@section('content')
|
||||
<div class="mb-6">
|
||||
<a href="{{ route('admin.appointments.index') }}" class="text-sm text-indigo-600 hover:underline">← 返回任命管理</a>
|
||||
<h2 class="text-lg font-bold text-gray-800 mt-2">
|
||||
{{ $userPosition->position->icon }} {{ $userPosition->user->username }} · {{ $userPosition->position->name }}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">权限操作记录（共 {{ $logs->total() }} 条）</p>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$actionColors = [
|
||||
'appoint' => 'bg-green-100 text-green-700',
|
||||
'revoke' => 'bg-red-100 text-red-700',
|
||||
'reward' => 'bg-yellow-100 text-yellow-700',
|
||||
'warn' => 'bg-orange-100 text-orange-700',
|
||||
'kick' => 'bg-red-100 text-red-700',
|
||||
'mute' => 'bg-purple-100 text-purple-700',
|
||||
'banip' => 'bg-gray-200 text-gray-700',
|
||||
'other' => 'bg-gray-100 text-gray-600',
|
||||
];
|
||||
@endphp
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 text-xs">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left">操作时间</th>
|
||||
<th class="px-4 py-3 text-center">操作类型</th>
|
||||
<th class="px-4 py-3 text-left">操作对象</th>
|
||||
<th class="px-4 py-3 text-left">目标职务</th>
|
||||
<th class="px-4 py-3 text-center">奖励金额</th>
|
||||
<th class="px-4 py-3 text-left">备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@forelse ($logs as $log)
|
||||
@php $colorClass = $actionColors[$log->action_type] ?? 'bg-gray-100 text-gray-600'; @endphp
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-gray-500 text-xs">{{ $log->created_at->format('m-d H:i:s') }}</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span class="text-xs px-2 py-0.5 rounded font-bold {{ $colorClass }}">
|
||||
{{ $log->action_label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 font-bold text-gray-700">{{ $log->targetUser->username ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-gray-500">{{ $log->targetPosition?->name ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-center text-yellow-600 font-bold">
|
||||
{{ $log->amount ? number_format($log->amount) . ' 金币' : '—' }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-400 text-xs">{{ $log->remark ?? '—' }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="px-4 py-12 text-center text-gray-400">暂无权限操作记录</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-4">{{ $logs->links() }}</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,80 @@
|
||||
{{--
|
||||
文件功能：任职期间登录记录子页
|
||||
展示某个用户在职期间的每次登录时间、在线时长、IP 和房间
|
||||
|
||||
@author ChatRoom Laravel
|
||||
@version 1.0.0
|
||||
--}}
|
||||
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '在职登录日志 · ' . $userPosition->user->username)
|
||||
|
||||
@section('content')
|
||||
<div class="mb-6">
|
||||
<a href="{{ route('admin.appointments.index') }}" class="text-sm text-indigo-600 hover:underline">← 返回任命管理</a>
|
||||
<h2 class="text-lg font-bold text-gray-800 mt-2">
|
||||
{{ $userPosition->position->icon }} {{ $userPosition->user->username }} · {{ $userPosition->position->name }}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
任命于 {{ $userPosition->appointed_at->format('Y-m-d') }}，
|
||||
任命人：{{ $userPosition->appointedBy?->username ?? '系统' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- 统计摘要 --}}
|
||||
<div class="grid grid-cols-3 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl p-5 border shadow-sm text-center">
|
||||
<div class="text-2xl font-bold text-indigo-600">{{ $logs->total() }}</div>
|
||||
<div class="text-xs text-gray-500 mt-1">总登录次数</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-5 border shadow-sm text-center">
|
||||
<div class="text-2xl font-bold text-green-600">
|
||||
{{ gmdate('H', $logs->sum('duration_seconds')) }}h {{ gmdate('i', $logs->sum('duration_seconds')) }}m
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-1">累计在线时长（当前页）</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-5 border shadow-sm text-center">
|
||||
<div class="text-2xl font-bold text-orange-600">{{ $userPosition->total_rewarded_coins }}</div>
|
||||
<div class="text-xs text-gray-500 mt-1">在职期间发放金币</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 text-xs">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left">登录时间</th>
|
||||
<th class="px-4 py-3 text-left">退出时间</th>
|
||||
<th class="px-4 py-3 text-center">在线时长</th>
|
||||
<th class="px-4 py-3 text-center">房间</th>
|
||||
<th class="px-4 py-3 text-left">IP 地址</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@forelse ($logs as $log)
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-gray-700">{{ $log->login_at->format('m-d H:i:s') }}</td>
|
||||
<td class="px-4 py-3 text-gray-500">{{ $log->logout_at?->format('m-d H:i:s') ?? '在线中...' }}</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
@if ($log->duration_seconds)
|
||||
<span
|
||||
class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">{{ $log->formatted_duration }}</span>
|
||||
@else
|
||||
<span class="text-xs text-gray-400">—</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center text-gray-500">{{ $log->room_id ? "房间#{$log->room_id}" : '—' }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-400 font-mono text-xs">{{ $log->ip_address }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="px-4 py-12 text-center text-gray-400">暂无登录记录</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-4">{{ $logs->links() }}</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,62 @@
|
||||
{{--
|
||||
文件功能：历史任职记录页面
|
||||
展示所有已撤销的职务记录（is_active=false），含任命人和撤销人信息
|
||||
|
||||
@author ChatRoom Laravel
|
||||
@version 1.0.0
|
||||
--}}
|
||||
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '历史任职记录')
|
||||
|
||||
@section('content')
|
||||
<div class="mb-6">
|
||||
<a href="{{ route('admin.appointments.index') }}" class="text-sm text-indigo-600 hover:underline">← 返回任命管理</a>
|
||||
<h2 class="text-lg font-bold text-gray-800 mt-2">历史任职记录</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">已撤销的职务记录（共 {{ $history->total() }} 条）</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 text-xs">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left">用户</th>
|
||||
<th class="px-4 py-3 text-left">职务</th>
|
||||
<th class="px-4 py-3 text-left">任命人</th>
|
||||
<th class="px-4 py-3 text-center">任命时间</th>
|
||||
<th class="px-4 py-3 text-left">撤销人</th>
|
||||
<th class="px-4 py-3 text-center">撤销时间</th>
|
||||
<th class="px-4 py-3 text-center">在职天数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@forelse ($history as $up)
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-4 py-3 font-bold text-gray-800">{{ $up->user->username }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="mr-1">{{ $up->position->icon }}</span>
|
||||
<span style="color: {{ $up->position->department->color }}">{{ $up->position->name }}</span>
|
||||
<span class="text-xs text-gray-400 ml-1">{{ $up->position->department->name }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-500">{{ $up->appointedBy?->username ?? '系统' }}</td>
|
||||
<td class="px-4 py-3 text-center text-gray-500 text-xs">{{ $up->appointed_at->format('Y-m-d') }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-500">{{ $up->revokedBy?->username ?? '系统' }}</td>
|
||||
<td class="px-4 py-3 text-center text-gray-500 text-xs">
|
||||
{{ $up->revoked_at?->format('Y-m-d') ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{{ $up->duration_days }}
|
||||
天</span>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="px-4 py-12 text-center text-gray-400">暂无历史记录</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-4">{{ $history->links() }}</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,250 @@
|
||||
{{--
|
||||
文件功能：后台任命管理页面
|
||||
展示当前所有在职人员，支持新增任命和撤销职务
|
||||
任命时可搜索用户并选择目标职务
|
||||
|
||||
@author ChatRoom Laravel
|
||||
@version 1.0.0
|
||||
--}}
|
||||
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '任命管理')
|
||||
|
||||
@section('content')
|
||||
<div x-data="{
|
||||
showForm: false,
|
||||
username: '',
|
||||
position_id: '',
|
||||
remark: '',
|
||||
searchResults: [],
|
||||
showDropdown: false,
|
||||
searching: false,
|
||||
searchTimer: null,
|
||||
openAppoint() {
|
||||
this.username = '';
|
||||
this.position_id = '';
|
||||
this.remark = '';
|
||||
this.searchResults = [];
|
||||
this.showDropdown = false;
|
||||
this.showForm = true;
|
||||
},
|
||||
async doSearch(val) {
|
||||
this.username = val;
|
||||
clearTimeout(this.searchTimer);
|
||||
if (val.length < 1) {
|
||||
this.searchResults = [];
|
||||
this.showDropdown = false;
|
||||
return;
|
||||
}
|
||||
this.searching = true;
|
||||
this.searchTimer = setTimeout(async () => {
|
||||
const res = await fetch(`{{ route('admin.appointments.search-users') }}?q=${encodeURIComponent(val)}`);
|
||||
this.searchResults = await res.json();
|
||||
this.showDropdown = this.searchResults.length > 0;
|
||||
this.searching = false;
|
||||
}, 250);
|
||||
},
|
||||
selectUser(u) {
|
||||
this.username = u.username;
|
||||
this.showDropdown = false;
|
||||
this.searchResults = [];
|
||||
}
|
||||
}">
|
||||
|
||||
{{-- 头部 --}}
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-800">任命管理</h2>
|
||||
<p class="text-sm text-gray-500">管理当前所有在职职位人员，执行任命或撤销操作</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ route('admin.appointments.history') }}"
|
||||
style="background-color:#e5e7eb;color:#374151;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size:0.875rem;display:inline-flex;align-items:center;text-decoration:none;"
|
||||
onmouseover="this.style.backgroundColor='#d1d5db'" onmouseout="this.style.backgroundColor='#e5e7eb'">
|
||||
历史记录
|
||||
</a>
|
||||
<button @click="openAppoint()"
|
||||
style="background-color:#f97316;color:#fff;padding:0.5rem 1.25rem;border-radius:0.5rem;font-weight:700;border:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1);"
|
||||
onmouseover="this.style.backgroundColor='#ea580c'" onmouseout="this.style.backgroundColor='#f97316'">
|
||||
+ 新增任命
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (session('success'))
|
||||
<div class="mb-4 px-4 py-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
|
||||
{{ session('success') }}</div>
|
||||
@endif
|
||||
@if (session('error'))
|
||||
<div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
|
||||
{{ session('error') }}</div>
|
||||
@endif
|
||||
|
||||
{{-- 在职人员列表 --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 text-xs">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left">用户</th>
|
||||
<th class="px-4 py-3 text-left">部门·职务</th>
|
||||
<th class="px-4 py-3 text-center">等级</th>
|
||||
<th class="px-4 py-3 text-left">任命人</th>
|
||||
<th class="px-4 py-3 text-center">任命时间</th>
|
||||
<th class="px-4 py-3 text-center">在职天数</th>
|
||||
<th class="px-4 py-3 text-right">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@forelse ($activePositions as $up)
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-4 py-3">
|
||||
<div class="font-bold text-gray-800">{{ $up->user->username }}</div>
|
||||
<div class="text-xs text-gray-400">Lv.{{ $up->user->user_level }}</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-lg">{{ $up->position->icon }}</span>
|
||||
<div>
|
||||
<div class="text-xs text-gray-400">{{ $up->position->department->name }}</div>
|
||||
<div class="font-bold" style="color: {{ $up->position->department->color }}">
|
||||
{{ $up->position->name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span class="text-xs bg-orange-100 text-orange-700 px-2 py-0.5 rounded font-mono">
|
||||
Lv.{{ $up->position->level }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-600">{{ $up->appointedBy?->username ?? '系统' }}</td>
|
||||
<td class="px-4 py-3 text-center text-gray-500">
|
||||
{{ $up->appointed_at->format('Y-m-d') }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">
|
||||
{{ $up->duration_days }} 天
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right space-x-1">
|
||||
<a href="{{ route('admin.appointments.duty-logs', $up->id) }}"
|
||||
class="text-xs bg-blue-50 text-blue-600 font-bold px-2 py-1 rounded hover:bg-blue-600 hover:text-white transition">
|
||||
登录日志
|
||||
</a>
|
||||
<a href="{{ route('admin.appointments.authority-logs', $up->id) }}"
|
||||
class="text-xs bg-purple-50 text-purple-600 font-bold px-2 py-1 rounded hover:bg-purple-600 hover:text-white transition">
|
||||
操作日志
|
||||
</a>
|
||||
<form action="{{ route('admin.appointments.revoke', $up->id) }}" method="POST"
|
||||
class="inline"
|
||||
onsubmit="return confirm('确定撤销【{{ $up->user->username }}】的【{{ $up->position->name }}】职务？撤销后其等级将归 1。')">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit"
|
||||
class="text-xs bg-red-50 text-red-600 font-bold px-2 py-1 rounded hover:bg-red-600 hover:text-white transition">
|
||||
撤销职务
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="px-4 py-12 text-center text-gray-400">暂无在职人员</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- 新增任命弹窗 --}}
|
||||
<div x-show="showForm" style="display: none;"
|
||||
class="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4">
|
||||
<div @click.away="showForm = false" class="bg-white rounded-xl shadow-2xl w-full max-w-md" x-transition>
|
||||
<div
|
||||
style="background-color:#c2410c;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;border-radius:0.75rem 0.75rem 0 0;">
|
||||
<h3 style="font-weight:700;font-size:1.125rem;color:#fff;margin:0;">新增任命</h3>
|
||||
<button @click="showForm = false"
|
||||
style="color:#fed7aa;background:none;border:none;font-size:1.5rem;cursor:pointer;line-height:1;"
|
||||
onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#fed7aa'">×</button>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form action="{{ route('admin.appointments.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">用户名</label>
|
||||
<div class="relative">
|
||||
<input type="text" name="username" x-model="username" required
|
||||
placeholder="输入关键字搜索用户..." @input="doSearch($event.target.value)"
|
||||
@blur="setTimeout(() => showDropdown = false, 200)"
|
||||
@focus="if(username.length > 0) doSearch(username)"
|
||||
class="w-full border rounded-md p-2 text-sm" autocomplete="off">
|
||||
{{-- 搜索中指示 --}}
|
||||
<span x-show="searching"
|
||||
class="absolute right-2 top-2.5 text-gray-400 text-xs">搜索中…</span>
|
||||
{{-- 下拉结果 --}}
|
||||
<div x-show="showDropdown" style="display:none;"
|
||||
class="absolute z-50 w-full bg-white border rounded-md shadow-lg mt-1 max-h-48 overflow-y-auto">
|
||||
<template x-for="u in searchResults" :key="u.id">
|
||||
<div @mousedown="selectUser(u)"
|
||||
class="px-3 py-2 hover:bg-orange-50 cursor-pointer flex justify-between items-center">
|
||||
<span class="font-bold text-sm" x-text="u.username"></span>
|
||||
<span class="text-xs text-gray-400" x-text="'Lv.' + u.user_level"></span>
|
||||
</div>
|
||||
</template>
|
||||
<div x-show="searchResults.length === 0 && !searching"
|
||||
class="px-3 py-2 text-xs text-gray-400">无匹配用户（或已有职务）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">目标职务</label>
|
||||
<select name="position_id" x-model="position_id" required
|
||||
class="w-full border rounded-md p-2 text-sm">
|
||||
<option value="">-- 请选择职务 --</option>
|
||||
@foreach ($departments as $dept)
|
||||
<optgroup label="{{ $dept->name }}">
|
||||
@foreach ($dept->positions as $pos)
|
||||
@php
|
||||
$current = $pos->active_user_positions_count ?? 0;
|
||||
$max = $pos->max_persons;
|
||||
$isFull = $max && $current >= $max;
|
||||
$cap = $max
|
||||
? "在职 {$current}/{$max} 人" . ($isFull ? ' ⚠️满' : '')
|
||||
: "在职 {$current} 人·不限额";
|
||||
@endphp
|
||||
<option value="{{ $pos->id }}"
|
||||
{{ $isFull ? 'style=color:#dc2626' : '' }}>
|
||||
{{ $pos->icon }}
|
||||
{{ $pos->name }}（Lv.{{ $pos->level }}，{{ $cap }}）
|
||||
</option>
|
||||
@endforeach
|
||||
</optgroup>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">任命备注（可选）</label>
|
||||
<input type="text" name="remark" x-model="remark" maxlength="255"
|
||||
placeholder="例：表现优秀，特此提拔" class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display:flex;justify-content:flex-end;gap:0.75rem;padding-top:1rem;margin-top:1rem;border-top:1px solid #e5e7eb;">
|
||||
<button type="button" @click="showForm = false"
|
||||
style="padding:0.5rem 1rem;border:1px solid #d1d5db;border-radius:0.375rem;font-weight:500;color:#4b5563;background:#fff;cursor:pointer;"
|
||||
onmouseover="this.style.background='#f9fafb'"
|
||||
onmouseout="this.style.background='#fff'">取消</button>
|
||||
<button type="submit"
|
||||
style="padding:0.5rem 1rem;background-color:#f97316;color:#fff;border-radius:0.375rem;font-weight:700;border:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1);"
|
||||
onmouseover="this.style.backgroundColor='#ea580c'"
|
||||
onmouseout="this.style.backgroundColor='#f97316'">
|
||||
确认任命
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -20,7 +20,7 @@
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">事件文本
|
||||
<span class="text-gray-400 font-normal">（{username} 将被替换为触发者用户名）</span></label>
|
||||
<input type="text" name="text_body" required placeholder="例：🎉 恭喜【{username}】获得 100 经验值！"
|
||||
<input type="text" name="text_body" required placeholder="例：🎉 恭喜【{username}】获得 100 经验値！"
|
||||
class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2 bg-white border">
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
{{--
|
||||
文件功能：后台开发日志新增/编辑表单（仅 id=1 超级管理员可访问）
|
||||
新增时：可选立即发布 + 通知大厅用户（触发 WebSocket 广播）
|
||||
编辑时：不显示"通知大厅"选项，不更新 published_at
|
||||
|
||||
@extends admin.layouts.app
|
||||
--}}
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', $isCreate ? '新增开发日志' : '编辑开发日志')
|
||||
|
||||
@section('content')
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<a href="{{ route('admin.changelogs.index') }}" class="text-gray-400 hover:text-gray-600 transition">← 返回列表</a>
|
||||
<h2 class="text-xl font-bold text-gray-800">{{ $isCreate ? '📝 新增开发日志' : '✏️ 编辑开发日志' }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="max-w-3xl bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||
<form action="{{ $isCreate ? route('admin.changelogs.store') : route('admin.changelogs.update', $log->id) }}"
|
||||
method="POST">
|
||||
@csrf
|
||||
@if (!$isCreate)
|
||||
@method('PUT')
|
||||
@endif
|
||||
|
||||
{{-- 版本号 + 类型 --}}
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-gray-700 mb-2">
|
||||
版本号 <span class="text-red-500">*</span>
|
||||
<span class="font-normal text-gray-400 ml-1">(推荐使用日期格式，如 2026-02-28)</span>
|
||||
</label>
|
||||
<input type="text" name="version" value="{{ old('version', $log?->version ?? $todayVersion) }}"
|
||||
required maxlength="30" placeholder="例: 2026-02-28"
|
||||
class="w-full border border-gray-200 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-indigo-400 outline-none">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-gray-700 mb-2">类型 <span class="text-red-500">*</span></label>
|
||||
<select name="type"
|
||||
class="w-full border border-gray-200 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-indigo-400 outline-none">
|
||||
@foreach ($typeOptions as $value => $config)
|
||||
<option value="{{ $value }}" {{ old('type', $log?->type) === $value ? 'selected' : '' }}>
|
||||
{{ $config['label'] }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 标题 --}}
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-bold text-gray-700 mb-2">标题 <span class="text-red-500">*</span></label>
|
||||
<input type="text" name="title" value="{{ old('title', $log?->title) }}" required maxlength="200"
|
||||
placeholder="简洁描述本次更新的重点..."
|
||||
class="w-full border border-gray-200 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-indigo-400 outline-none">
|
||||
</div>
|
||||
|
||||
{{-- Markdown 内容 --}}
|
||||
<div class="mb-5">
|
||||
<label class="block text-sm font-bold text-gray-700 mb-2">
|
||||
详细内容 <span class="text-red-500">*</span>
|
||||
<span class="font-normal text-gray-400 ml-1">（支持 Markdown 格式）</span>
|
||||
</label>
|
||||
<textarea name="content" required rows="16"
|
||||
placeholder="## 新增功能 - 新增了 AI 聊天机器人功能 - 支持多种 AI 服务商（OpenAI / DeepSeek） ## Bug 修复 - 修复了钓鱼游戏积分计算错误 ## 优化 - 改进了消息加载速度"
|
||||
class="w-full border border-gray-200 rounded-lg p-3 text-sm font-mono resize-y focus:ring-2 focus:ring-indigo-400 outline-none leading-relaxed">{{ old('content', $log?->content) }}</textarea>
|
||||
<p class="text-xs text-gray-400 mt-1">支持 ## 标题、- 列表、`代码` 等 Markdown 格式</p>
|
||||
</div>
|
||||
|
||||
{{-- 发布选项 --}}
|
||||
<div class="bg-gray-50 rounded-xl p-4 mb-5 border border-gray-200">
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<input type="checkbox" name="is_published" value="1"
|
||||
{{ old('is_published', $log?->is_published) ? 'checked' : '' }}
|
||||
class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-400" id="is_published">
|
||||
<span class="font-bold text-gray-800">立即发布</span>
|
||||
<span class="text-gray-500 text-sm font-normal">（取消勾选则保存为草稿）</span>
|
||||
</label>
|
||||
|
||||
@if ($isCreate)
|
||||
{{-- 新增时显示"通知大厅"选项 --}}
|
||||
<label class="flex items-center gap-3 cursor-pointer mt-3" id="notify-row">
|
||||
<input type="checkbox" name="notify_chat" value="1" checked
|
||||
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-400" id="notify_chat">
|
||||
<span class="font-bold text-gray-800">通知大厅用户</span>
|
||||
<span class="text-gray-500 text-sm font-normal">
|
||||
（发布时在「星光大厅 Room 1」的聊天区广播通知，含可点击链接）
|
||||
</span>
|
||||
</label>
|
||||
@else
|
||||
{{-- 编辑时也可手动触发通知 --}}
|
||||
<label class="flex items-center gap-3 cursor-pointer mt-3" id="notify-row">
|
||||
<input type="checkbox" name="notify_chat" value="1"
|
||||
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-400" id="notify_chat">
|
||||
<span class="font-bold text-gray-800">重新通知大厅用户</span>
|
||||
<span class="text-gray-500 text-sm font-normal">
|
||||
（勾选后保存，将再次向「星光大厅」广播此日志通知）
|
||||
</span>
|
||||
</label>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- 操作按钮 --}}
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="{{ route('admin.changelogs.index') }}"
|
||||
class="px-5 py-2 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm transition">
|
||||
取消
|
||||
</a>
|
||||
<button type="submit"
|
||||
class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-bold hover:bg-indigo-700 text-sm shadow-sm transition">
|
||||
{{ $isCreate ? '保存日志' : '更新日志' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,102 @@
|
||||
{{--
|
||||
文件功能：后台开发日志列表页（仅 id=1 超级管理员可访问）
|
||||
展示所有日志（含草稿），支持发布/编辑/删除操作
|
||||
|
||||
@extends admin.layouts.app
|
||||
--}}
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '开发日志管理')
|
||||
|
||||
@section('content')
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-800">📋 开发日志管理</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">管理版本更新记录，发布后可在大厅消息区通知用户</p>
|
||||
</div>
|
||||
<a href="{{ route('admin.changelogs.create') }}"
|
||||
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-bold text-sm shadow transition">
|
||||
+ 新增日志
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- 日志列表 --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 border-b border-gray-100">
|
||||
<tr class="text-left text-gray-500 text-xs font-bold uppercase tracking-wider">
|
||||
<th class="px-5 py-3">版本号</th>
|
||||
<th class="px-5 py-3">标题</th>
|
||||
<th class="px-5 py-3">类型</th>
|
||||
<th class="px-5 py-3">状态</th>
|
||||
<th class="px-5 py-3">发布时间</th>
|
||||
<th class="px-5 py-3 text-right">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-50">
|
||||
@forelse($logs as $log)
|
||||
<tr class="hover:bg-gray-50 transition-colors">
|
||||
<td class="px-5 py-3 font-mono text-indigo-700 font-bold">v{{ $log->version }}</td>
|
||||
<td class="px-5 py-3 text-gray-800 font-medium">{{ $log->title }}</td>
|
||||
<td class="px-5 py-3">
|
||||
@php
|
||||
$typeConfig = \App\Models\DevChangelog::TYPE_CONFIG[$log->type] ?? null;
|
||||
$colorMap = [
|
||||
'emerald' => 'bg-emerald-100 text-emerald-700',
|
||||
'rose' => 'bg-rose-100 text-rose-700',
|
||||
'blue' => 'bg-blue-100 text-blue-700',
|
||||
'slate' => 'bg-slate-100 text-slate-700',
|
||||
];
|
||||
@endphp
|
||||
<span
|
||||
class="px-2 py-0.5 rounded-full text-xs font-bold {{ $colorMap[$typeConfig['color'] ?? 'slate'] ?? 'bg-slate-100 text-slate-700' }}">
|
||||
{{ $typeConfig['label'] ?? '其他' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-5 py-3">
|
||||
@if ($log->is_published)
|
||||
<span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-bold">✅
|
||||
已发布</span>
|
||||
@else
|
||||
<span class="px-2 py-0.5 bg-gray-100 text-gray-500 rounded-full text-xs font-bold">🔒
|
||||
草稿</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-5 py-3 text-gray-400 text-xs">
|
||||
{{ $log->published_at?->format('Y-m-d H:i') ?? '—' }}
|
||||
</td>
|
||||
<td class="px-5 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<a href="{{ route('admin.changelogs.edit', $log->id) }}"
|
||||
class="text-blue-600 hover:text-blue-800 font-semibold text-xs px-2 py-1 rounded hover:bg-blue-50 transition">
|
||||
编辑
|
||||
</a>
|
||||
<form action="{{ route('admin.changelogs.destroy', $log->id) }}" method="POST"
|
||||
onsubmit="return confirm('确定要删除这条日志吗？');">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit"
|
||||
class="text-red-600 hover:text-red-800 font-semibold text-xs px-2 py-1 rounded hover:bg-red-50 transition">
|
||||
删除
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="px-5 py-12 text-center text-gray-400">
|
||||
<p class="text-3xl mb-2">📭</p>
|
||||
<p>还没有任何日志，点击右上角「新增日志」开始吧</p>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if ($logs->hasPages())
|
||||
<div class="px-5 py-4 border-t border-gray-100">
|
||||
{{ $logs->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,185 @@
|
||||
{{--
|
||||
文件功能：后台部门管理页面
|
||||
提供部门的新增、编辑、删除功能，展示每个部门的职务数量
|
||||
|
||||
@author ChatRoom Laravel
|
||||
@version 1.0.0
|
||||
--}}
|
||||
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '部门管理')
|
||||
|
||||
@section('content')
|
||||
<div x-data="{
|
||||
showForm: false,
|
||||
editing: null,
|
||||
form: { name: '', rank: 80, color: '#1a5276', sort_order: 0, description: '' },
|
||||
|
||||
openCreate() {
|
||||
this.editing = null;
|
||||
this.form = { name: '', rank: 80, color: '#1a5276', sort_order: 0, description: '' };
|
||||
this.showForm = true;
|
||||
},
|
||||
openEdit(dept) {
|
||||
this.editing = dept;
|
||||
this.form = { name: dept.name, rank: dept.rank, color: dept.color, sort_order: dept.sort_order, description: dept.description };
|
||||
this.showForm = true;
|
||||
}
|
||||
}">
|
||||
|
||||
{{-- 头部 --}}
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-800">部门管理</h2>
|
||||
<p class="text-sm text-gray-500">管理聊天室部门架构，设置位阶、颜色与描述</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ route('admin.positions.index') }}"
|
||||
style="background-color:#16a34a;color:#fff;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size:0.875rem;display:inline-flex;align-items:center;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.1);"
|
||||
onmouseover="this.style.backgroundColor='#15803d'" onmouseout="this.style.backgroundColor='#16a34a'">
|
||||
📋 职务管理 →
|
||||
</a>
|
||||
@if (Auth::id() === 1)
|
||||
<button @click="openCreate()"
|
||||
style="background-color:#4f46e5;color:#fff;padding:0.5rem 1.25rem;border-radius:0.5rem;font-weight:700;border:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1);"
|
||||
onmouseover="this.style.backgroundColor='#4338ca'"
|
||||
onmouseout="this.style.backgroundColor='#4f46e5'">
|
||||
+ 新增部门
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (session('success'))
|
||||
<div class="mb-4 px-4 py-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
@if (session('error'))
|
||||
<div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- 部门卡片列表 --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
@foreach ($departments as $dept)
|
||||
<div class="bg-white rounded-xl shadow-sm border overflow-hidden hover:shadow-md transition">
|
||||
<div class="h-2" style="background-color: {{ $dept->color }}"></div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="font-bold text-lg" style="color: {{ $dept->color }}">{{ $dept->name }}</span>
|
||||
<span class="text-xs bg-gray-100 px-2 py-0.5 rounded text-gray-500">位阶
|
||||
{{ $dept->rank }}</span>
|
||||
</div>
|
||||
<div class="space-y-1.5 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">职务数量</span>
|
||||
<span class="font-bold text-indigo-600">{{ $dept->positions_count }} 个</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-500">排序</span>
|
||||
<span class="font-bold">{{ $dept->sort_order }}</span>
|
||||
</div>
|
||||
@if ($dept->description)
|
||||
<p class="text-gray-400 text-xs pt-1">{{ $dept->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@php $superLvl = (int) \App\Models\Sysparam::getValue('superlevel', '100'); @endphp
|
||||
@if (Auth::user()->user_level >= $superLvl)
|
||||
<div class="border-t bg-gray-50 px-5 py-3 flex justify-end space-x-2">
|
||||
<button
|
||||
@click="openEdit({
|
||||
id: {{ $dept->id }},
|
||||
name: '{{ addslashes($dept->name) }}',
|
||||
rank: {{ $dept->rank }},
|
||||
color: '{{ $dept->color }}',
|
||||
sort_order: {{ $dept->sort_order }},
|
||||
description: '{{ addslashes($dept->description ?? '') }}',
|
||||
requestUrl: '{{ route('admin.departments.update', $dept->id) }}'
|
||||
})"
|
||||
class="text-xs bg-indigo-50 text-indigo-600 font-bold px-3 py-1.5 rounded hover:bg-indigo-600 hover:text-white transition">
|
||||
编辑
|
||||
</button>
|
||||
@if (Auth::id() === 1)
|
||||
<form action="{{ route('admin.departments.destroy', $dept->id) }}" method="POST"
|
||||
onsubmit="return confirm('确定删除部门【{{ $dept->name }}】？该操作会同时删除该部门所有职务（有在职人员时拒绝删除）。')">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit"
|
||||
class="text-xs bg-red-50 text-red-600 font-bold px-3 py-1.5 rounded hover:bg-red-600 hover:text-white transition">
|
||||
删除
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if ($departments->isEmpty())
|
||||
<div class="text-center py-16 text-gray-400">
|
||||
<p class="text-lg">暂无部门，点击右上角「新增部门」创建</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- 新增/编辑弹窗 --}}
|
||||
<div x-show="showForm" style="display: none;"
|
||||
class="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4">
|
||||
<div @click.away="showForm = false" class="bg-white rounded-xl shadow-2xl w-full max-w-md" x-transition>
|
||||
<div class="bg-indigo-900 px-6 py-4 flex justify-between items-center rounded-t-xl text-white">
|
||||
<h3 class="font-bold text-lg" x-text="editing ? '编辑部门：' + editing.name : '新增部门'"></h3>
|
||||
<button @click="showForm = false" class="text-gray-400 hover:text-white text-xl">×</button>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form :action="editing ? editing.requestUrl : '{{ route('admin.departments.store') }}'" method="POST">
|
||||
@csrf
|
||||
<template x-if="editing"><input type="hidden" name="_method" value="PUT"></template>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">部门名称</label>
|
||||
<input type="text" name="name" x-model="form.name" required maxlength="50"
|
||||
class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">位阶（0~99，越大越高）</label>
|
||||
<input type="number" name="rank" x-model="form.rank" required min="0"
|
||||
max="99" class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">排序</label>
|
||||
<input type="number" name="sort_order" x-model="form.sort_order" required min="0"
|
||||
class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">展示颜色</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="color" name="color" x-model="form.color"
|
||||
class="w-10 h-8 border rounded cursor-pointer">
|
||||
<input type="text" x-model="form.color" maxlength="10"
|
||||
class="flex-1 border rounded-md p-2 text-sm font-mono">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">部门描述（可选）</label>
|
||||
<input type="text" name="description" x-model="form.description" maxlength="255"
|
||||
class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3 pt-4 mt-4 border-t">
|
||||
<button type="button" @click="showForm = false"
|
||||
class="px-4 py-2 border rounded font-medium text-gray-600 hover:bg-gray-50">取消</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded font-bold hover:bg-indigo-700 shadow-sm"
|
||||
x-text="editing ? '保存修改' : '创建部门'"></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,187 @@
|
||||
{{--
|
||||
文件功能：后台用户反馈管理页面（仅 id=1 超级管理员可访问）
|
||||
列表展示所有用户提交的 Bug 报告和功能建议
|
||||
支持按类型+状态筛选，可直接修改状态（Ajax）和填写官方回复
|
||||
|
||||
@extends admin.layouts.app
|
||||
--}}
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '用户反馈管理')
|
||||
|
||||
@section('content')
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-800">
|
||||
💬 用户反馈管理
|
||||
@if ($pendingCount > 0)
|
||||
<span class="ml-2 text-sm bg-orange-100 text-orange-700 font-bold px-2 py-0.5 rounded-full">
|
||||
{{ $pendingCount }} 条待处理
|
||||
</span>
|
||||
@endif
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">管理用户提交的 Bug 报告和功能建议，修改状态后前台实时更新</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 筛选栏 --}}
|
||||
<div class="flex flex-wrap gap-3 mb-5" x-data="{
|
||||
type: '{{ $currentType ?? '' }}',
|
||||
status: '{{ $currentStatus ?? '' }}',
|
||||
go() {
|
||||
const params = new URLSearchParams();
|
||||
if (this.type) params.set('type', this.type);
|
||||
if (this.status) params.set('status', this.status);
|
||||
window.location.href = '/admin/feedback?' + params.toString();
|
||||
}
|
||||
}">
|
||||
<select x-model="type" @change="go()"
|
||||
class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-400 outline-none bg-white">
|
||||
<option value="">所有类型</option>
|
||||
<option value="bug">🐛 Bug报告</option>
|
||||
<option value="suggestion">💡 功能建议</option>
|
||||
</select>
|
||||
<select x-model="status" @change="go()"
|
||||
class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-400 outline-none bg-white">
|
||||
<option value="">所有状态</option>
|
||||
@foreach ($statusConfig as $key => $config)
|
||||
<option value="{{ $key }}">{{ $config['icon'] }} {{ $config['label'] }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@if ($currentType || $currentStatus)
|
||||
<a href="{{ route('admin.feedback.index') }}"
|
||||
class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700 border border-gray-200 rounded-lg bg-white hover:bg-gray-50 transition">
|
||||
✕ 清除筛选
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- 反馈列表 --}}
|
||||
<div class="space-y-3">
|
||||
@forelse($feedbacks as $feedback)
|
||||
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden" x-data="{
|
||||
expanded: false,
|
||||
status: '{{ $feedback->status }}',
|
||||
remark: @js($feedback->admin_remark ?? ''),
|
||||
saving: false,
|
||||
async updateStatus() {
|
||||
this.saving = true;
|
||||
const res = await fetch('/admin/feedback/{{ $feedback->id }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-HTTP-Method-Override': 'PUT',
|
||||
},
|
||||
body: JSON.stringify({ status: this.status, admin_remark: this.remark, _method: 'PUT' }),
|
||||
});
|
||||
const data = await res.json();
|
||||
this.saving = false;
|
||||
if (data.status !== 'success') alert('保存失败');
|
||||
}
|
||||
}">
|
||||
{{-- 卡片头部 --}}
|
||||
<div class="px-5 py-4 flex items-start gap-4">
|
||||
{{-- 赞同数 --}}
|
||||
<div class="shrink-0 text-center">
|
||||
<div class="text-2xl font-black text-indigo-600">{{ $feedback->votes_count }}</div>
|
||||
<div class="text-xs text-gray-400">赞同</div>
|
||||
</div>
|
||||
{{-- 类型+状态+标题 --}}
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap mb-1">
|
||||
@php
|
||||
$typeConfig = \App\Models\FeedbackItem::TYPE_CONFIG[$feedback->type] ?? null;
|
||||
@endphp
|
||||
<span
|
||||
class="px-2 py-0.5 rounded text-xs font-bold {{ $feedback->type === 'bug' ? 'bg-rose-100 text-rose-700' : 'bg-blue-100 text-blue-700' }}">
|
||||
{{ $typeConfig['label'] ?? '' }}
|
||||
</span>
|
||||
{{-- 状态下拉（Ajax 即时保存） --}}
|
||||
<select x-model="status" @change="updateStatus()"
|
||||
class="border border-gray-200 rounded px-2 py-0.5 text-xs font-bold focus:ring-1 focus:ring-indigo-400 outline-none cursor-pointer"
|
||||
:disabled="saving">
|
||||
@foreach ($statusConfig as $key => $config)
|
||||
<option value="{{ $key }}"
|
||||
{{ $feedback->status === $key ? 'selected' : '' }}>
|
||||
{{ $config['icon'] }} {{ $config['label'] }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<span class="text-gray-400 text-xs">💬 {{ $feedback->replies_count }}</span>
|
||||
<span x-show="saving" class="text-xs text-indigo-500 animate-pulse">保存中...</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-800 text-sm">{{ $feedback->title }}</h4>
|
||||
<p class="text-gray-400 text-xs mt-1">
|
||||
by {{ $feedback->username }} · {{ $feedback->created_at->diffForHumans() }}
|
||||
</p>
|
||||
</div>
|
||||
{{-- 展开按钮 --}}
|
||||
<button @click="expanded = !expanded"
|
||||
class="shrink-0 text-indigo-600 hover:text-indigo-800 text-sm font-bold border border-indigo-200 hover:border-indigo-400 px-3 py-1.5 rounded-lg transition">
|
||||
<span x-text="expanded ? '收起 ▲' : '展开 ▽'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 展开详情 --}}
|
||||
<div x-show="expanded" x-transition.opacity class="border-t border-gray-100">
|
||||
{{-- 原始描述 --}}
|
||||
<div class="px-5 py-4 bg-gray-50 text-sm text-gray-700 leading-relaxed">
|
||||
<p class="font-bold text-gray-500 text-xs mb-2">用户描述</p>
|
||||
<p class="whitespace-pre-wrap">{{ $feedback->content }}</p>
|
||||
</div>
|
||||
|
||||
{{-- 所有补充评论 --}}
|
||||
@if ($feedback->replies->count() > 0)
|
||||
<div class="px-5 py-3 border-t border-gray-100 space-y-2">
|
||||
<p class="text-xs font-bold text-gray-500 mb-2">用户补充 ({{ $feedback->replies->count() }} 条)</p>
|
||||
@foreach ($feedback->replies as $reply)
|
||||
<div
|
||||
class="rounded-lg px-3 py-2 text-sm {{ $reply->is_admin ? 'bg-indigo-50 border border-indigo-200' : 'bg-gray-50' }}">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span
|
||||
class="font-bold {{ $reply->is_admin ? 'text-indigo-700' : 'text-gray-700' }}">{{ $reply->username }}</span>
|
||||
@if ($reply->is_admin)
|
||||
<span
|
||||
class="text-xs bg-indigo-200 text-indigo-800 px-1.5 rounded font-bold">开发者</span>
|
||||
@endif
|
||||
<span
|
||||
class="text-gray-400 text-xs">{{ $reply->created_at->diffForHumans() }}</span>
|
||||
</div>
|
||||
<p class="text-gray-700 whitespace-pre-wrap">{{ $reply->content }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- 官方回复+保存区 --}}
|
||||
<div class="px-5 py-4 border-t border-gray-100 bg-indigo-50/40">
|
||||
<p class="text-xs font-bold text-indigo-800 mb-2">🛡️ 官方回复（公开显示给所有用户）</p>
|
||||
<textarea x-model="remark" rows="3" placeholder="填写官方处理说明、修复进度或拒绝原因..."
|
||||
class="w-full border border-indigo-200 rounded-lg p-2.5 text-sm resize-none focus:ring-2 focus:ring-indigo-400 outline-none bg-white"></textarea>
|
||||
<div class="flex justify-end mt-2">
|
||||
<button @click="updateStatus()" :disabled="saving"
|
||||
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-xs font-bold disabled:opacity-50 transition">
|
||||
<span x-text="saving ? '保存中...' : '保存状态+回复'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="bg-white rounded-xl border border-gray-100 py-16 text-center text-gray-400">
|
||||
<p class="text-4xl mb-3">💬</p>
|
||||
<p class="font-bold text-lg">暂无用户反馈</p>
|
||||
<p class="text-sm mt-1">等待用户从前台提交问题和建议</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{-- 分页 --}}
|
||||
@if ($feedbacks->hasPages())
|
||||
<div class="mt-6">
|
||||
{{ $feedbacks->links() }}
|
||||
</div>
|
||||
@endif
|
||||
@endsection
|
||||
@@ -18,6 +18,8 @@
|
||||
<p class="text-xs text-slate-400 mt-2">飘落流星 控制台</p>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
|
||||
|
||||
{{-- ──────── 所有有职务的人都可见 ──────── --}}
|
||||
<a href="{{ route('admin.dashboard') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.dashboard') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
📊 仪表盘
|
||||
@@ -26,38 +28,76 @@
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.currency-stats.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
📈 积分流水统计
|
||||
</a>
|
||||
@if (Auth::id() === 1)
|
||||
<a href="{{ route('admin.system.edit') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.system.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
⚙️ 聊天室参数设置
|
||||
</a>
|
||||
<a href="{{ route('admin.smtp.edit') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.smtp.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
📧 邮件 SMTP 配置
|
||||
</a>
|
||||
@endif
|
||||
<a href="{{ route('admin.users.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.users.*') ? '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' }}">
|
||||
🏠 房间管理
|
||||
</a>
|
||||
<a href="{{ route('admin.autoact.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.autoact.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
🎲 随机事件
|
||||
</a>
|
||||
<a href="{{ route('admin.vip.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.vip.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
👑 VIP 会员等级
|
||||
{{-- ──────── 部门职务任命系统 ──────── --}}
|
||||
<div class="border-t border-white/10 my-2"></div>
|
||||
<a href="{{ route('admin.appointments.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.appointments.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
🎖️ 任命管理
|
||||
</a>
|
||||
|
||||
@if (Auth::id() === 1)
|
||||
<a href="{{ route('admin.ai-providers.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.ai-providers.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
🤖 AI 厂商配置
|
||||
{{-- superlevel 及以上：可查看（只读标注）以下模块；id=1 可编辑 --}}
|
||||
@php $superLvl = (int) \App\Models\Sysparam::getValue('superlevel', '100'); @endphp
|
||||
@if (Auth::user()->user_level >= $superLvl)
|
||||
@php $ro = Auth::id() !== 1 ? ' <span style="font-size:10px;opacity:.45;font-weight:normal;">（只读）</span>' : ''; @endphp
|
||||
<div class="border-t border-white/10 my-2"></div>
|
||||
<p class="px-4 text-xs text-slate-500 uppercase tracking-widest mb-1">
|
||||
{{ Auth::id() === 1 ? '站长功能' : '查看' }}</p>
|
||||
|
||||
<a href="{{ route('admin.system.edit') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.system.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
{!! '⚙️ 聊天室参数' . $ro !!}
|
||||
</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' }}">
|
||||
{!! '🏠 房间管理' . $ro !!}
|
||||
</a>
|
||||
<a href="{{ route('admin.autoact.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.autoact.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
{!! '🎲 随机事件' . $ro !!}
|
||||
</a>
|
||||
<a href="{{ route('admin.vip.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.vip.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
{!! '👑 VIP 会员等级' . $ro !!}
|
||||
</a>
|
||||
<a href="{{ route('admin.departments.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.departments.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
{!! '🏛️ 部门管理' . $ro !!}
|
||||
</a>
|
||||
<a href="{{ route('admin.positions.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.positions.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
{!! '📋 职务管理' . $ro !!}
|
||||
</a>
|
||||
|
||||
{{-- 以下纯写操作：仅 id=1 可见 --}}
|
||||
@if (Auth::id() === 1)
|
||||
<div class="border-t border-white/10 my-2"></div>
|
||||
<p class="px-4 text-xs text-slate-500 uppercase tracking-widest mb-1">系统配置</p>
|
||||
<a href="{{ route('admin.smtp.edit') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.smtp.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
📧 邮件 SMTP 配置
|
||||
</a>
|
||||
<a href="{{ route('admin.ai-providers.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.ai-providers.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
🤖 AI 厂商配置
|
||||
</a>
|
||||
<a href="{{ route('admin.changelogs.index') }}"
|
||||
class="block px-4 py-3 rounded-md transition {{ request()->routeIs('admin.changelogs.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
📋 开发日志
|
||||
</a>
|
||||
<a href="{{ route('admin.feedback.index') }}"
|
||||
class="flex items-center justify-between px-4 py-3 rounded-md transition {{ request()->routeIs('admin.feedback.*') ? 'bg-indigo-600 font-bold' : 'hover:bg-white/10' }}">
|
||||
<span>💬 用户反馈</span>
|
||||
@php $pendingFeedback = \App\Models\FeedbackItem::pending()->count(); @endphp
|
||||
@if ($pendingFeedback > 0)
|
||||
<span
|
||||
class="bg-orange-500 text-white text-xs px-1.5 py-0.5 rounded-full font-bold">{{ $pendingFeedback }}</span>
|
||||
@endif
|
||||
</a>
|
||||
@endif
|
||||
@endif
|
||||
</nav>
|
||||
<div class="p-4 border-t border-white/10">
|
||||
|
||||
@@ -0,0 +1,298 @@
|
||||
{{--
|
||||
文件功能：后台职务管理页面
|
||||
按部门分组展示所有职务，支持新增/编辑/删除职务
|
||||
编辑时可通过多选框配置该职务可任命的目标职务列表（任命白名单）
|
||||
|
||||
@author ChatRoom Laravel
|
||||
@version 1.0.0
|
||||
--}}
|
||||
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('title', '职务管理')
|
||||
|
||||
@section('content')
|
||||
<div x-data="{
|
||||
showForm: false,
|
||||
editing: null,
|
||||
selectedIds: [],
|
||||
form: {
|
||||
department_id: '',
|
||||
name: '',
|
||||
icon: '🎖️',
|
||||
rank: 50,
|
||||
level: 60,
|
||||
max_persons: 1,
|
||||
max_reward: '',
|
||||
sort_order: 0
|
||||
},
|
||||
|
||||
openCreate() {
|
||||
this.editing = null;
|
||||
this.selectedIds = [];
|
||||
this.form = { department_id: '', name: '', icon: '🎖️', rank: 50, level: 60, max_persons: 1, max_reward: '', sort_order: 0 };
|
||||
this.showForm = true;
|
||||
},
|
||||
openEdit(pos, appointableIds) {
|
||||
this.editing = pos;
|
||||
this.selectedIds = appointableIds;
|
||||
this.form = {
|
||||
department_id: pos.department_id,
|
||||
name: pos.name,
|
||||
icon: pos.icon || '',
|
||||
rank: pos.rank,
|
||||
level: pos.level,
|
||||
max_persons: pos.max_persons || '',
|
||||
max_reward: pos.max_reward || '',
|
||||
sort_order: pos.sort_order,
|
||||
};
|
||||
this.showForm = true;
|
||||
},
|
||||
toggleId(id) {
|
||||
if (this.selectedIds.includes(id)) {
|
||||
this.selectedIds = this.selectedIds.filter(i => i !== id);
|
||||
} else {
|
||||
this.selectedIds.push(id);
|
||||
}
|
||||
},
|
||||
isSelected(id) {
|
||||
return this.selectedIds.includes(id);
|
||||
}
|
||||
}">
|
||||
|
||||
{{-- 头部 --}}
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-800">职务管理</h2>
|
||||
<p class="text-sm text-gray-500">管理各部门职务，配置等级、图标、人数上限和任命权限</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ route('admin.departments.index') }}"
|
||||
style="background-color:#e5e7eb;color:#374151;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size:0.875rem;display:inline-flex;align-items:center;text-decoration:none;"
|
||||
onmouseover="this.style.backgroundColor='#d1d5db'" onmouseout="this.style.backgroundColor='#e5e7eb'">
|
||||
← 部门管理
|
||||
</a>
|
||||
<a href="{{ route('admin.appointments.index') }}"
|
||||
style="background-color:#f97316;color:#fff;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size:0.875rem;display:inline-flex;align-items:center;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.1);"
|
||||
onmouseover="this.style.backgroundColor='#ea580c'" onmouseout="this.style.backgroundColor='#f97316'">
|
||||
🎖️ 任命管理 →
|
||||
</a>
|
||||
@if (Auth::id() === 1)
|
||||
<button @click="openCreate()"
|
||||
style="background-color:#4f46e5;color:#fff;padding:0.5rem 1.25rem;border-radius:0.5rem;font-weight:700;border:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1);"
|
||||
onmouseover="this.style.backgroundColor='#4338ca'"
|
||||
onmouseout="this.style.backgroundColor='#4f46e5'">
|
||||
+ 新增职务
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (session('success'))
|
||||
<div class="mb-4 px-4 py-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
|
||||
{{ session('success') }}</div>
|
||||
@endif
|
||||
@if (session('error'))
|
||||
<div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
|
||||
{{ session('error') }}</div>
|
||||
@endif
|
||||
|
||||
{{-- 按部门分组展示职务 --}}
|
||||
@foreach ($departments as $dept)
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center space-x-3 mb-3">
|
||||
<div class="w-3 h-3 rounded-full" style="background-color: {{ $dept->color }}"></div>
|
||||
<h3 class="font-bold text-base" style="color: {{ $dept->color }}">{{ $dept->name }}</h3>
|
||||
<span class="text-xs text-gray-400">位阶 {{ $dept->rank }}</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-600 text-xs">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left">图标</th>
|
||||
<th class="px-4 py-3 text-left">职务名</th>
|
||||
<th class="px-4 py-3 text-center">位阶</th>
|
||||
<th class="px-4 py-3 text-center">等级</th>
|
||||
<th class="px-4 py-3 text-center">人数上限</th>
|
||||
<th class="px-4 py-3 text-center">当前在职</th>
|
||||
<th class="px-4 py-3 text-center">奖励上限</th>
|
||||
<th class="px-4 py-3 text-center">任命权</th>
|
||||
@php $superLvl = (int) \App\Models\Sysparam::getValue('superlevel', '100'); @endphp
|
||||
@if (Auth::user()->user_level >= $superLvl)
|
||||
<th class="px-4 py-3 text-right">操作</th>
|
||||
@endif
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@forelse ($dept->positions as $pos)
|
||||
@php $appointableIds = $pos->appointablePositions->pluck('id')->toArray(); @endphp
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-4 py-3 text-xl">{{ $pos->icon }}</td>
|
||||
<td class="px-4 py-3 font-bold">{{ $pos->name }}</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span
|
||||
class="text-xs bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded font-mono">{{ $pos->rank }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span
|
||||
class="text-xs bg-orange-100 text-orange-700 px-2 py-0.5 rounded font-mono">Lv.{{ $pos->level }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center text-gray-600">{{ $pos->max_persons ?? '不限' }}</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span
|
||||
class="{{ $pos->active_user_positions_count >= ($pos->max_persons ?? 999) ? 'text-red-600 font-bold' : 'text-indigo-600' }}">
|
||||
{{ $pos->active_user_positions_count }} 人
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center text-gray-600">
|
||||
{{ $pos->max_reward ? number_format($pos->max_reward) . '金币' : '不限' }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
@if (count($appointableIds) > 0)
|
||||
<span
|
||||
class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">{{ count($appointableIds) }}
|
||||
个职务</span>
|
||||
@else
|
||||
<span class="text-xs text-gray-400">无</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right space-x-1">
|
||||
@php $superLvl = (int) \App\Models\Sysparam::getValue('superlevel', '100'); @endphp
|
||||
@if (Auth::user()->user_level >= $superLvl)
|
||||
<button
|
||||
@click="openEdit({
|
||||
id: {{ $pos->id }},
|
||||
department_id: {{ $pos->department_id }},
|
||||
name: '{{ addslashes($pos->name) }}',
|
||||
icon: '{{ $pos->icon }}',
|
||||
rank: {{ $pos->rank }},
|
||||
level: {{ $pos->level }},
|
||||
max_persons: {{ $pos->max_persons ?? 'null' }},
|
||||
max_reward: {{ $pos->max_reward ?? 'null' }},
|
||||
sort_order: {{ $pos->sort_order }},
|
||||
requestUrl: '{{ route('admin.positions.update', $pos->id) }}'
|
||||
}, {{ json_encode($appointableIds) }})"
|
||||
class="text-xs bg-indigo-50 text-indigo-600 font-bold px-2 py-1 rounded hover:bg-indigo-600 hover:text-white transition">
|
||||
编辑
|
||||
</button>
|
||||
@endif
|
||||
@if (Auth::id() === 1)
|
||||
<form action="{{ route('admin.positions.destroy', $pos->id) }}" method="POST"
|
||||
class="inline" onsubmit="return confirm('确定删除职务【{{ $pos->name }}】？')">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit"
|
||||
class="text-xs bg-red-50 text-red-600 font-bold px-2 py-1 rounded hover:bg-red-600 hover:text-white transition">
|
||||
删除
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="9" class="px-4 py-6 text-center text-gray-400">该部门暂无职务</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
{{-- 新增/编辑弹窗 --}}
|
||||
<div x-show="showForm" style="display: none;"
|
||||
class="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4">
|
||||
<div @click.away="showForm = false"
|
||||
class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[92vh] overflow-y-auto" x-transition>
|
||||
<div class="bg-indigo-900 px-6 py-4 flex justify-between items-center rounded-t-xl text-white sticky top-0">
|
||||
<h3 class="font-bold text-lg" x-text="editing ? '编辑职务：' + editing.name : '新增职务'"></h3>
|
||||
<button @click="showForm = false" class="text-gray-400 hover:text-white text-xl">×</button>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form :action="editing ? editing.requestUrl : '{{ route('admin.positions.store') }}'" method="POST">
|
||||
@csrf
|
||||
<template x-if="editing"><input type="hidden" name="_method" value="PUT"></template>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="col-span-2">
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">所属部门</label>
|
||||
<select name="department_id" x-model="form.department_id" required
|
||||
class="w-full border rounded-md p-2 text-sm">
|
||||
<option value="">-- 请选择部门 --</option>
|
||||
@foreach ($departments as $dept)
|
||||
<option value="{{ $dept->id }}">{{ $dept->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">职务名称</label>
|
||||
<input type="text" name="name" x-model="form.name" required maxlength="50"
|
||||
class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">图标（Emoji）</label>
|
||||
<input type="text" name="icon" x-model="form.icon" maxlength="10"
|
||||
class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">位阶（0~99，跨全局排序）</label>
|
||||
<input type="number" name="rank" x-model="form.rank" required min="0"
|
||||
max="99" class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">等级（user_level，1~100）</label>
|
||||
<input type="number" name="level" x-model="form.level" required min="1"
|
||||
max="100" class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">人数上限（空=不限）</label>
|
||||
<input type="number" name="max_persons" x-model="form.max_persons" min="1"
|
||||
class="w-full border rounded-md p-2 text-sm" placeholder="留空不限">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">单次奖励上限金币（空=不限）</label>
|
||||
<input type="number" name="max_reward" x-model="form.max_reward" min="0"
|
||||
class="w-full border rounded-md p-2 text-sm" placeholder="留空不限">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">排序</label>
|
||||
<input type="number" name="sort_order" x-model="form.sort_order" required
|
||||
min="0" class="w-full border rounded-md p-2 text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 任命白名单多选 --}}
|
||||
<div class="border rounded-lg p-4 bg-gray-50">
|
||||
<h4 class="text-xs font-bold text-gray-700 mb-2">
|
||||
任命权限白名单
|
||||
<span class="font-normal text-gray-400 ml-1">（勾选后此职务持有者可将用户任命到以下职务；不勾选则该职务无任命权）</span>
|
||||
</h4>
|
||||
<div class="grid grid-cols-2 gap-1 max-h-52 overflow-y-auto">
|
||||
@foreach ($allPositions as $ap)
|
||||
<label
|
||||
class="flex items-center space-x-2 cursor-pointer hover:bg-white rounded p-1.5 text-sm"
|
||||
:class="isSelected({{ $ap->id }}) ? 'bg-indigo-50 text-indigo-700 font-bold' :
|
||||
'text-gray-700'">
|
||||
<input type="checkbox" name="appointable_ids[]" value="{{ $ap->id }}"
|
||||
:checked="isSelected({{ $ap->id }})"
|
||||
@change="toggleId({{ $ap->id }})" class="rounded text-indigo-600">
|
||||
<span>{{ $ap->department->name }}·{{ $ap->name }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3 pt-4 mt-4 border-t">
|
||||
<button type="button" @click="showForm = false"
|
||||
class="px-4 py-2 border rounded font-medium text-gray-600 hover:bg-gray-50">取消</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 bg-indigo-600 text-white rounded font-bold hover:bg-indigo-700 shadow-sm"
|
||||
x-text="editing ? '保存修改' : '创建职务'"></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -97,7 +97,7 @@
|
||||
@unless ($room->room_keep)
|
||||
<form action="{{ route('admin.rooms.destroy', $room->id) }}" method="POST"
|
||||
class="inline"
|
||||
onsubmit="return confirm('确定要删除房间「{{ $room->room_name }}」吗？此操作不可撤销！')">
|
||||
onsubmit="return confirm('确定要删除房间「{{ $room->room_name }}」吗？此操作不可撑销！')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit"
|
||||
|
||||
@@ -4,10 +4,6 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
@php
|
||||
// 管理员级别 = 最高等级 + 1，后台编辑最高可设到管理员级别
|
||||
$adminLevel = (int) \App\Models\Sysparam::getValue('maxlevel', '15') + 1;
|
||||
@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">
|
||||
@@ -54,6 +50,7 @@
|
||||
等级<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">
|
||||
经验<span class="text-indigo-500">{{ $arrow('exp_num') }}</span>
|
||||
@@ -95,6 +92,17 @@
|
||||
LV.{{ $user->user_level }}
|
||||
</span>
|
||||
</td>
|
||||
<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 }}">
|
||||
{{ $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">
|
||||
{{ number_format($user->exp_num ?? 0) }}
|
||||
</td>
|
||||
@@ -111,7 +119,6 @@
|
||||
@click="editingUser = {
|
||||
id: {{ $user->id }},
|
||||
username: '{{ addslashes($user->username) }}',
|
||||
user_level: {{ $user->user_level }},
|
||||
exp_num: {{ $user->exp_num ?? 0 }},
|
||||
jjb: {{ $user->jjb ?? 0 }},
|
||||
meili: {{ $user->meili ?? 0 }},
|
||||
@@ -172,26 +179,6 @@
|
||||
@csrf @method('PUT')
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{-- 等级 --}}
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">
|
||||
等级
|
||||
<span class="text-gray-400 font-normal">
|
||||
(最高 <span x-text="adminLevel"></span> 级)
|
||||
</span>
|
||||
</label>
|
||||
<input type="number" name="user_level" x-model="editingUser.user_level" required
|
||||
min="0" :max="adminLevel"
|
||||
:readonly="{{ Auth::id() }} !== 1 && editingUser.id !== {{ Auth::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="{
|
||||
'bg-gray-100 cursor-not-allowed': {{ Auth::id() }} !== 1 && editingUser
|
||||
.id !==
|
||||
{{ Auth::id() }}
|
||||
}"
|
||||
:title="{{ Auth::id() }} !== 1 && editingUser.id !== {{ Auth::id() }} ?
|
||||
'仅系统创始人可修改他人等级' : ''">
|
||||
</div>
|
||||
{{-- 经验 --}}
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-gray-600 mb-1">经验值</label>
|
||||
@@ -285,7 +272,6 @@
|
||||
Alpine.data('userEditor', () => ({
|
||||
showEditModal: false,
|
||||
editingUser: {},
|
||||
adminLevel: {{ $adminLevel }},
|
||||
editToast: false,
|
||||
editToastOk: true,
|
||||
editToastMsg: '',
|
||||
|
||||
@@ -0,0 +1,309 @@
|
||||
{{--
|
||||
文件功能：开发日志前台独立页面（/changelog）
|
||||
时间轴样式，懒加载（IntersectionObserver），倒序显示
|
||||
仅展示已发布的日志（is_published=1）
|
||||
支持 URL #vYYYY-MM-DD 锚点直跳指定版本
|
||||
|
||||
@extends layouts.app
|
||||
--}}
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', '更新日志 - 飘落流星')
|
||||
@section('nav-icon', '📋')
|
||||
@section('nav-title', '更新日志')
|
||||
|
||||
|
||||
|
||||
@section('head')
|
||||
<style>
|
||||
/* 时间轴主线 */
|
||||
.tl-line {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, #818cf8 0%, #c4b5fd 70%, transparent 100%);
|
||||
}
|
||||
|
||||
/* 时间轴节点圆点 */
|
||||
.tl-dot {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 22px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #818cf8;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
transition: transform 0.2s, border-color 0.2s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tl-item:hover .tl-dot {
|
||||
transform: scale(1.25);
|
||||
border-color: #4f46e5;
|
||||
}
|
||||
|
||||
/* Markdown 内容样式 */
|
||||
.prose-log h1,
|
||||
.prose-log h2,
|
||||
.prose-log h3 {
|
||||
font-weight: 700;
|
||||
color: #1e1b4b;
|
||||
margin: 1rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.prose-log h2 {
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid #e0e7ff;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.prose-log ul {
|
||||
list-style: disc;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
.prose-log ol {
|
||||
list-style: decimal;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
.prose-log li {
|
||||
margin: 0.2rem 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.prose-log p {
|
||||
margin: 0.4rem 0;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.prose-log code {
|
||||
background: #f1f5f9;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85em;
|
||||
color: #7c3aed;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.prose-log a {
|
||||
color: #4f46e5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose-log strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose-log blockquote {
|
||||
border-left: 3px solid #818cf8;
|
||||
padding-left: 10px;
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto py-8 px-4 sm:px-6" x-data="{
|
||||
items: [],
|
||||
lastId: null,
|
||||
hasMore: true,
|
||||
loading: false,
|
||||
|
||||
init() {
|
||||
// SSR 首屏数据注入
|
||||
this.items = {{ json_encode(
|
||||
$changelogs->map(
|
||||
fn($l) => [
|
||||
'id' => $l->id,
|
||||
'version' => $l->version,
|
||||
'title' => $l->title,
|
||||
'type_label' => $l->type_label,
|
||||
'type_color' => $l->type_color,
|
||||
'content_html' => $l->content_html,
|
||||
'summary' => $l->summary,
|
||||
'published_at' => $l->published_at?->format('Y-m-d'),
|
||||
'expanded' => false,
|
||||
],
|
||||
),
|
||||
) }};
|
||||
|
||||
if (this.items.length > 0) {
|
||||
this.lastId = this.items[this.items.length - 1].id;
|
||||
this.hasMore = this.items.length >= 10;
|
||||
} else {
|
||||
this.hasMore = false;
|
||||
}
|
||||
|
||||
// 处理 URL #v2026-02-28 锚点跳转
|
||||
if (window.location.hash && window.location.hash.startsWith('#v')) {
|
||||
const version = window.location.hash.slice(2);
|
||||
this.$nextTick(() => {
|
||||
const el = document.getElementById('v' + version);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
const item = this.items.find(i => i.version === version);
|
||||
if (item) item.expanded = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 懒加载更多
|
||||
async loadMore() {
|
||||
if (this.loading || !this.hasMore) return;
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await fetch(`/changelog/more?after_id=${this.lastId}`);
|
||||
const data = await res.json();
|
||||
this.items.push(...data.items.map(i => ({ ...i, expanded: false })));
|
||||
if (data.items.length > 0) this.lastId = data.items[data.items.length - 1].id;
|
||||
this.hasMore = data.has_more;
|
||||
} catch (e) { console.error(e); } finally { this.loading = false; }
|
||||
},
|
||||
}">
|
||||
|
||||
{{-- 页面标题区 --}}
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-extrabold text-gray-800 flex items-center gap-2">
|
||||
📋 <span>开发日志</span>
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">记录每次版本的功能新增、Bug 修复与优化改进</p>
|
||||
</div>
|
||||
<div class="text-right text-xs text-gray-400">
|
||||
<p>按更新时间排序</p>
|
||||
<p class="text-indigo-500 font-medium mt-0.5">共 {{ $changelogs->count() }}+ 条日志</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 空状态 --}}
|
||||
<template x-if="items.length === 0">
|
||||
<div class="text-center py-24 text-gray-400">
|
||||
<p class="text-6xl mb-4">📭</p>
|
||||
<p class="text-lg font-bold text-gray-500">暂无更新日志</p>
|
||||
<p class="text-sm mt-2">开发团队还没有发布任何日志，请稍后再来查看</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- 时间轴 --}}
|
||||
<div class="relative pl-10">
|
||||
{{-- 时间轴主线 --}}
|
||||
<div class="tl-line"></div>
|
||||
|
||||
<template x-for="(log, index) in items" :key="log.id">
|
||||
<div class="tl-item relative mb-8" :id="'v' + log.version">
|
||||
{{-- 圆点节点 --}}
|
||||
<div class="tl-dot"
|
||||
:class="{
|
||||
'border-emerald-400': log.type_color === 'emerald',
|
||||
'border-rose-400': log.type_color === 'rose',
|
||||
'border-blue-400': log.type_color === 'blue',
|
||||
'border-slate-400': log.type_color === 'slate',
|
||||
}">
|
||||
<span
|
||||
x-text="log.type_color === 'emerald' ? '🆕' : log.type_color === 'rose' ? '🐛' : log.type_color === 'blue' ? '⚡' : '📌'"
|
||||
class="text-xs"></span>
|
||||
</div>
|
||||
|
||||
{{-- 日志卡片 --}}
|
||||
<div
|
||||
class="bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-200 overflow-hidden">
|
||||
{{-- 卡片头部 --}}
|
||||
<div class="px-5 py-4 border-b border-gray-50">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
{{-- 版本号 --}}
|
||||
<span class="font-mono text-lg font-black text-indigo-700 tracking-wide"
|
||||
x-text="'v' + log.version"></span>
|
||||
|
||||
{{-- 类型标签 --}}
|
||||
<span class="px-2.5 py-0.5 rounded-full text-xs font-bold"
|
||||
:class="{
|
||||
'bg-emerald-100 text-emerald-700': log.type_color === 'emerald',
|
||||
'bg-rose-100 text-rose-700': log.type_color === 'rose',
|
||||
'bg-blue-100 text-blue-700': log.type_color === 'blue',
|
||||
'bg-slate-100 text-slate-600': log.type_color === 'slate',
|
||||
}"
|
||||
x-text="log.type_label"></span>
|
||||
|
||||
{{-- 发布日期 --}}
|
||||
<span class="text-gray-400 text-xs ml-auto" x-text="log.published_at"></span>
|
||||
</div>
|
||||
|
||||
{{-- 标题 --}}
|
||||
<h3 class="text-base font-bold text-gray-800 mt-2 leading-snug" x-text="log.title"></h3>
|
||||
</div>
|
||||
|
||||
{{-- 内容区 --}}
|
||||
<div class="px-5 py-4">
|
||||
{{-- 默认折叠：摘要 --}}
|
||||
<div x-show="!log.expanded">
|
||||
<p class="text-gray-600 text-sm leading-relaxed" x-text="log.summary"></p>
|
||||
<button @click="log.expanded = true"
|
||||
class="mt-3 text-indigo-600 hover:text-indigo-800 text-xs font-semibold hover:underline flex items-center gap-1">
|
||||
展开完整内容 <span class="text-base leading-none">↓</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 展开：完整 Markdown 内容 --}}
|
||||
<div x-show="log.expanded" x-transition.opacity.duration.150ms>
|
||||
<div class="prose-log text-sm text-gray-700" x-html="log.content_html"></div>
|
||||
<button @click="log.expanded = false"
|
||||
class="mt-3 text-gray-400 hover:text-gray-600 text-xs font-semibold hover:underline flex items-center gap-1">
|
||||
收起 <span class="text-base leading-none">↑</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 底部：版本锚点复制链接 --}}
|
||||
<div class="px-5 py-2 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
||||
<span class="text-gray-400 text-xs">
|
||||
#<span x-text="log.version"></span>
|
||||
</span>
|
||||
<button
|
||||
@click="navigator.clipboard?.writeText(window.location.origin + '/changelog#v' + log.version).then(() => { $el.textContent = '✅ 已复制'; setTimeout(() => $el.textContent = '🔗 复制链接', 1500) })"
|
||||
class="text-xs text-gray-400 hover:text-indigo-600 transition">
|
||||
🔗 复制链接
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- 懒加载触发哨兵 --}}
|
||||
<div x-show="hasMore" x-intersect.threshold.10="loadMore()" class="py-6 text-center">
|
||||
<template x-if="loading">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
|
||||
stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z">
|
||||
</path>
|
||||
</svg>
|
||||
加载更多...
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{{-- 全部加载完成提示 --}}
|
||||
<div x-show="!hasMore && items.length > 0" class="text-center py-6 text-gray-400 text-sm">
|
||||
<div class="inline-flex items-center gap-2">
|
||||
<div class="h-px w-16 bg-gray-200"></div>
|
||||
<span>以上是全部更新日志</span>
|
||||
<div class="h-px w-16 bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -43,7 +43,11 @@
|
||||
fishReelUrl: "{{ route('fishing.reel', $room->id) }}",
|
||||
chatBotUrl: "{{ route('chatbot.chat') }}",
|
||||
chatBotClearUrl: "{{ route('chatbot.clear') }}",
|
||||
chatBotEnabled: {{ \App\Models\Sysparam::getValue('chatbot_enabled', '0') === '1' ? 'true' : 'false' }}
|
||||
chatBotEnabled: {{ \App\Models\Sysparam::getValue('chatbot_enabled', '0') === '1' ? 'true' : 'false' }},
|
||||
hasPosition: {{ Auth::user()->activePosition || Auth::user()->user_level >= $superLevel ? 'true' : 'false' }},
|
||||
appointPositionsUrl: "{{ route('chat.appoint.positions') }}",
|
||||
appointUrl: "{{ route('chat.appoint.appoint') }}",
|
||||
revokeUrl: "{{ route('chat.appoint.revoke') }}"
|
||||
};
|
||||
</script>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/chat.js'])
|
||||
|
||||
@@ -145,10 +145,15 @@
|
||||
item.dataset.username = username;
|
||||
|
||||
const headface = (user.headface || '1.gif').toLowerCase();
|
||||
// VIP 图标和管理员标识 (互斥显示：管理员优先)
|
||||
|
||||
// 徽章优先级：职务图标 > 管理员 > VIP
|
||||
let badges = '';
|
||||
if (user.is_admin) {
|
||||
// 军人专属风格：由于宽度受限，采用代表最高荣誉与权威的“将官军功章”单字符
|
||||
if (user.position_icon) {
|
||||
// 有职务：显示职务图标，hover 显示职务名称
|
||||
const posTitle = (user.position_name || '在职') + ' · ' + username;
|
||||
badges +=
|
||||
`<span style="font-size:13px; margin-left:2px;" title="${posTitle}">${user.position_icon}</span>`;
|
||||
} else if (user.is_admin) {
|
||||
badges += `<span style="font-size:12px; margin-left:2px;" title="最高统帅">🎖️</span>`;
|
||||
} else if (user.vip_icon) {
|
||||
const vipColor = user.vip_color || '#f59e0b';
|
||||
@@ -315,14 +320,33 @@
|
||||
|
||||
let html = '';
|
||||
|
||||
// 系统用户消息以醒目公告样式显示
|
||||
if (systemUsers.includes(msg.from_user)) {
|
||||
// 第一个判断分支：如果是纯 HTML 系统的进出播报
|
||||
if (msg.action === 'system_welcome') {
|
||||
div.style.cssText = 'margin: 3px 0;';
|
||||
const iconImg =
|
||||
`<img src="/images/bugle.png" style="display:inline;width:16px;height:16px;vertical-align:middle;margin-right:2px;mix-blend-mode: multiply;" onerror="this.src='/images/headface/1.gif'">`;
|
||||
|
||||
let parsedContent = msg.content;
|
||||
parsedContent = parsedContent.replace(/【([^】]+)】/g, function(match, uName) {
|
||||
return '【' + clickableUser(uName, '#000099') + '】';
|
||||
});
|
||||
|
||||
html = `${iconImg} ${parsedContent}`;
|
||||
}
|
||||
// 接下来再判断各类发话人
|
||||
else if (systemUsers.includes(msg.from_user)) {
|
||||
if (msg.from_user === '系统公告') {
|
||||
// 管理员公告：大字醒目红框样式
|
||||
div.style.cssText =
|
||||
'background: linear-gradient(135deg, #fef2f2, #fff1f2); border: 2px solid #ef4444; border-radius: 6px; padding: 8px 12px; margin: 4px 0; box-shadow: 0 2px 4px rgba(239,68,68,0.15);';
|
||||
|
||||
let parsedContent = msg.content;
|
||||
parsedContent = parsedContent.replace(/【([^】]+)】/g, function(match, uName) {
|
||||
return '【' + clickableUser(uName, '#dc2626') + '】';
|
||||
});
|
||||
|
||||
html =
|
||||
`<div style="font-weight: bold; color: #dc2626;">${msg.content} <span style="color: #999; font-weight: normal;">(${timeStr})</span></div>`;
|
||||
`<div style="font-weight: bold; color: #dc2626;">${parsedContent} <span style="color: #999; font-weight: normal;">(${timeStr})</span></div>`;
|
||||
timeStrOverride = true;
|
||||
} else if (msg.from_user === '系统传音') {
|
||||
// 自动升级播报 / 赠礼通知：金色左边框，轻量提示样式，不喧宾夺主
|
||||
@@ -343,8 +367,16 @@
|
||||
giftHtml =
|
||||
`<img src="${msg.gift_image}" alt="${msg.gift_name || ''}" style="display:inline-block;width:40px;height:40px;vertical-align:middle;margin-left:6px;animation:giftBounce 0.6s ease-in-out;">`;
|
||||
}
|
||||
|
||||
// 让带有【用户名】的系统通知变成可点击和双击的蓝色用户标
|
||||
let parsedContent = msg.content;
|
||||
// 利用正则匹配【用户名】结构，捕获组 $1 即是里面真正的用户名
|
||||
parsedContent = parsedContent.replace(/【([^】]+)】/g, function(match, uName) {
|
||||
return '【' + clickableUser(uName, '#000099') + '】';
|
||||
});
|
||||
|
||||
html =
|
||||
`${headImg}<span class="msg-user" style="color: ${fontColor}; font-weight: bold;">${msg.from_user}：</span><span class="msg-content" style="color: ${fontColor}">${msg.content}</span>${giftHtml}`;
|
||||
`${headImg}<span class="msg-user" style="color: ${fontColor}; font-weight: bold;">${msg.from_user}：</span><span class="msg-content" style="color: ${fontColor}">${parsedContent}</span>${giftHtml}`;
|
||||
}
|
||||
} else if (msg.is_secret) {
|
||||
if (msg.from_user === '系统') {
|
||||
@@ -384,6 +416,14 @@
|
||||
}
|
||||
div.innerHTML = html;
|
||||
|
||||
// 后端下发的带有 welcome_user 的也是系统欢迎/离开消息，加上属性标记
|
||||
if (msg.welcome_user) {
|
||||
div.setAttribute('data-system-user', msg.welcome_user);
|
||||
// 收到后端来的新欢迎消息时，把界面上该用户旧的都删掉
|
||||
const oldWelcomes = container.querySelectorAll(`[data-system-user="${msg.welcome_user}"]`);
|
||||
oldWelcomes.forEach(el => el.remove());
|
||||
}
|
||||
|
||||
// 路由规则（复刻原版）：
|
||||
// 公众窗口(say1)：别人的公聊消息
|
||||
// 包厢窗口(say2)：自己发的消息 + 悄悄话 + 对自己说的消息
|
||||
@@ -439,89 +479,12 @@
|
||||
const user = e.detail;
|
||||
onlineUsers[user.username] = user;
|
||||
renderUserList();
|
||||
|
||||
// 原版风格：完整句式的随机趣味欢迎语
|
||||
const gender = user.sex == 2 ? '美女' : '帅哥';
|
||||
const uname = user.username;
|
||||
const welcomeTemplates = [
|
||||
`${gender}<b>${uname}</b>开着刚买不久的车，来到了，见到各位大虾，拱手曰："众位大虾，小生有礼了"`,
|
||||
`${gender}<b>${uname}</b>骑着小毛驴哼着小调，悠闲地走了进来，对大家嘿嘿一笑`,
|
||||
`${gender}<b>${uname}</b>坐着豪华轿车缓缓驶入，推门而出，拍了拍身上的灰，霸气说道："我来也！"`,
|
||||
`${gender}<b>${uname}</b>踩着七彩祥云从天而降，众人皆惊，抱拳道："各位久等了！"`,
|
||||
`${gender}<b>${uname}</b>划着小船飘然而至，微微一笑，翩然上岸`,
|
||||
`${gender}<b>${uname}</b>骑着自行车铃铛叮当响，远远就喊："我来啦！想我没？"`,
|
||||
`${gender}<b>${uname}</b>开着拖拉机突突突地开了进来，下车后拍了拍手说："交通不便，来迟了！"`,
|
||||
`${gender}<b>${uname}</b>坐着火箭嗖的一声到了，吓了大家一跳，嘿嘿笑道："别怕别怕，是我啊"`,
|
||||
`${gender}<b>${uname}</b>骑着白马翩翩而来，英姿飒爽，拱手道："江湖路远，各位有礼了"`,
|
||||
`${gender}<b>${uname}</b>开着宝马一路飞驰到此，推开车门走了下来，向大家挥了挥手`,
|
||||
`${gender}<b>${uname}</b>踩着风火轮呼啸而至，在人群中潇洒亮相`,
|
||||
`${gender}<b>${uname}</b>乘坐滑翔伞从天空缓缓降落，对大家喊道："hello，我从天上来！"`,
|
||||
`${gender}<b>${uname}</b>从地下钻了出来，拍了拍土，说："哎呀，走错路了，不过总算到了"`,
|
||||
`${gender}<b>${uname}</b>蹦蹦跳跳地跑了进来，嘻嘻哈哈地跟大家打招呼`,
|
||||
`${gender}<b>${uname}</b>悄悄地溜了进来，生怕被人发现，东张西望了一番`,
|
||||
`${gender}<b>${uname}</b>迈着六亲不认的步伐走进来，气场两米八`,
|
||||
];
|
||||
const msg = welcomeTemplates[Math.floor(Math.random() * welcomeTemplates.length)];
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
const sysDiv = document.createElement('div');
|
||||
sysDiv.className = 'msg-line';
|
||||
|
||||
// VIP 用户使用专属颜色和图标
|
||||
if (user.vip_icon && user.vip_name) {
|
||||
const vipColor = user.vip_color || '#f59e0b';
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color: ${vipColor}; font-weight: bold;">【${user.vip_icon} ${user.vip_name}】${msg}</span><span class="msg-time">(${timeStr})</span>`;
|
||||
} else {
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color: green">【欢迎】${msg}</span><span class="msg-time">(${timeStr})</span>`;
|
||||
}
|
||||
container.appendChild(sysDiv);
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
window.addEventListener('chat:leaving', (e) => {
|
||||
const user = e.detail;
|
||||
delete onlineUsers[user.username];
|
||||
renderUserList();
|
||||
|
||||
// 原版风格：趣味离开语（与进入一致的风格）
|
||||
const gender = user.sex == 2 ? '美女' : '帅哥';
|
||||
const uname = user.username;
|
||||
const leaveTemplates = [
|
||||
`${gender}<b>${uname}</b>潇洒地挥了挥手，骑着小毛驴哼着小调离去了`,
|
||||
`${gender}<b>${uname}</b>开着跑车扬长而去，留下一路烟尘`,
|
||||
`${gender}<b>${uname}</b>踩着七彩祥云飘然远去，消失在天际`,
|
||||
`${gender}<b>${uname}</b>悄无声息地溜走了，连个招呼都不打`,
|
||||
`${gender}<b>${uname}</b>跳上直升机螺旋桨呼呼作响，朝大家喊道："我先走啦！"`,
|
||||
`${gender}<b>${uname}</b>拱手告别："各位大虾，后会有期！"随后翩然离去`,
|
||||
`${gender}<b>${uname}</b>骑着自行车铃铛叮当响，远远就喊："下次再聊！拜拜！"`,
|
||||
`${gender}<b>${uname}</b>坐着热气球缓缓升空，朝大家挥手告别`,
|
||||
`${gender}<b>${uname}</b>迈着六亲不认的步伐离开了，留下一众人目瞪口呆`,
|
||||
`${gender}<b>${uname}</b>化作一缕青烟消散在空气中……`,
|
||||
];
|
||||
const msg = leaveTemplates[Math.floor(Math.random() * leaveTemplates.length)];
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
const sysDiv = document.createElement('div');
|
||||
sysDiv.className = 'msg-line';
|
||||
// VIP 用户离开也带专属颜色和图标
|
||||
if (user.vip_icon && user.vip_name) {
|
||||
const vipColor = user.vip_color || '#f59e0b';
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color: ${vipColor}; font-weight: bold;">【${user.vip_icon} ${user.vip_name}】${msg}</span><span class="msg-time">(${timeStr})</span>`;
|
||||
} else {
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color: #cc6600">【离开】${msg}</span><span class="msg-time">(${timeStr})</span>`;
|
||||
}
|
||||
container.appendChild(sysDiv);
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
window.addEventListener('chat:message', (e) => {
|
||||
@@ -642,6 +605,51 @@
|
||||
// DOMContentLoaded 后启动，确保 Vite 编译的 JS 已加载
|
||||
document.addEventListener('DOMContentLoaded', setupScreenClearedListener);
|
||||
|
||||
// ── 开发日志发布通知（仅 Room 1 大厅可见）────────────
|
||||
/**
|
||||
* 监听 ChangelogPublished 事件，在大厅聊天区展示系统通知
|
||||
* 通知包含版本号、标题和可点击的查看链接
|
||||
* 复用「系统传音」样式（金色左边框，不喧宾夺主）
|
||||
*/
|
||||
function setupChangelogPublishedListener() {
|
||||
if (!window.Echo || !window.chatContext) {
|
||||
setTimeout(setupChangelogPublishedListener, 500);
|
||||
return;
|
||||
}
|
||||
// 仅在 Room 1（星光大厅）时监听
|
||||
if (window.chatContext.roomId !== 1) {
|
||||
return;
|
||||
}
|
||||
window.Echo.join('room.1')
|
||||
.listen('.ChangelogPublished', (e) => {
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
const sysDiv = document.createElement('div');
|
||||
sysDiv.className = 'msg-line';
|
||||
// 金色左边框通知样式（复用「系统传音」风格）
|
||||
sysDiv.style.cssText =
|
||||
'background: #fffbeb; border-left: 3px solid #d97706; border-radius: 4px; padding: 5px 10px; margin: 3px 0;';
|
||||
sysDiv.innerHTML = `<span style="color: #b45309; font-weight: bold;">
|
||||
📋 【版本更新】v${e.version} · ${e.title}
|
||||
<a href="${e.url}" target="_blank" rel="noopener"
|
||||
style="color: #7c3aed; text-decoration: underline; margin-left: 8px; font-size: 0.85em;">
|
||||
查看详情 →
|
||||
</a>
|
||||
</span><span class="msg-time">(${timeStr})</span>`;
|
||||
|
||||
const say1 = document.getElementById('chat-messages-container');
|
||||
if (say1) {
|
||||
say1.appendChild(sysDiv);
|
||||
say1.scrollTop = say1.scrollHeight;
|
||||
}
|
||||
});
|
||||
console.log('ChangelogPublished 监听器已注册（Room 1 专属）');
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupChangelogPublishedListener);
|
||||
|
||||
// ── 全屏特效事件监听（烟花/下雨/雷电/下雪）─────────
|
||||
window.addEventListener('chat:effect', (e) => {
|
||||
const type = e.detail?.type;
|
||||
@@ -1397,4 +1405,174 @@
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════
|
||||
// 任命公告：复用现有礼花特效 + 隆重弹窗
|
||||
// ══════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* 显示任命公告弹窗（居中，5 秒后淡出）
|
||||
*/
|
||||
function showAppointmentBanner(data) {
|
||||
const dept = data.department_name ? escapeHtml(data.department_name) + ' · ' : '';
|
||||
const isRevoke = data.type === 'revoke';
|
||||
const banner = document.createElement('div');
|
||||
banner.id = 'appointment-banner';
|
||||
banner.style.cssText = `
|
||||
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
z-index: 99999; text-align: center; pointer-events: none;
|
||||
animation: appoint-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
`;
|
||||
|
||||
if (isRevoke) {
|
||||
banner.innerHTML = `
|
||||
<div style="background: linear-gradient(135deg, #374151, #4b5563, #6b7280);
|
||||
border-radius: 20px; padding: 24px 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
||||
border: 2px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px);">
|
||||
<div style="font-size: 36px; margin-bottom: 8px;">📋</div>
|
||||
<div style="color: #d1d5db; font-size: 12px; font-weight: bold; letter-spacing: 3px; margin-bottom: 12px;">
|
||||
── 职务撤销 ──
|
||||
</div>
|
||||
<div style="color: white; font-size: 20px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">
|
||||
${escapeHtml(data.position_icon)} ${escapeHtml(data.target_username)}
|
||||
</div>
|
||||
<div style="color: #d1d5db; font-size: 13px; margin-top: 8px;">
|
||||
<strong style="color: #f3f4f6;">${dept}${escapeHtml(data.position_name)}</strong> 职务已被撤销
|
||||
</div>
|
||||
<div style="color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 10px;">
|
||||
由 ${escapeHtml(data.operator_name)} 执行 · ${new Date().toLocaleTimeString('zh-CN')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
banner.innerHTML = `
|
||||
<div style="background: linear-gradient(135deg, #4f46e5, #7c3aed, #db2777);
|
||||
border-radius: 20px; padding: 28px 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
||||
border: 2px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px);">
|
||||
<div style="font-size: 40px; margin-bottom: 8px;">🎊🎖️🎊</div>
|
||||
<div style="color: #fde68a; font-size: 13px; font-weight: bold; letter-spacing: 3px; margin-bottom: 12px;">
|
||||
══ 任命公告 ══
|
||||
</div>
|
||||
<div style="color: white; font-size: 22px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">
|
||||
${escapeHtml(data.position_icon)} ${escapeHtml(data.target_username)}
|
||||
</div>
|
||||
<div style="color: #e0e7ff; font-size: 14px; margin-top: 8px;">
|
||||
荣任 <strong style="color: #fde68a;">${dept}${escapeHtml(data.position_name)}</strong>
|
||||
</div>
|
||||
<div style="color: rgba(255,255,255,0.5); font-size: 11px; margin-top: 10px;">
|
||||
由 ${escapeHtml(data.operator_name)} 任命 · ${new Date().toLocaleTimeString('zh-CN')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 弹窗动画关键帧（动态注入一次）
|
||||
if (!document.getElementById('appoint-keyframes')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'appoint-keyframes';
|
||||
style.textContent = `
|
||||
@keyframes appoint-pop {
|
||||
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
|
||||
70% { transform: translate(-50%,-50%) scale(1.05); }
|
||||
100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
|
||||
}
|
||||
@keyframes appoint-fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; transform: translate(-50%,-50%) scale(0.9); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
document.body.appendChild(banner);
|
||||
|
||||
// 4.5 秒后淡出移除
|
||||
setTimeout(() => {
|
||||
banner.style.animation = 'appoint-fade-out 0.5s ease forwards';
|
||||
setTimeout(() => banner.remove(), 500);
|
||||
}, 4500);
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听任命公告事件：根据 type 区分任命（礼花+紫色弹窗）和撤销（灰色弹窗）
|
||||
*/
|
||||
window.addEventListener('chat:appointment-announced', (e) => {
|
||||
const data = e.detail;
|
||||
const isRevoke = data.type === 'revoke';
|
||||
const dept = data.department_name ? escapeHtml(data.department_name) + ' · ' : '';
|
||||
|
||||
// ── 任命才有礼花 ──
|
||||
if (!isRevoke && typeof EffectManager !== 'undefined') {
|
||||
EffectManager.play('fireworks');
|
||||
}
|
||||
|
||||
showAppointmentBanner(data);
|
||||
|
||||
// ── 聊天区系统消息：操作者/被操作者 → 私聊面板；其余人 → 公屏 ──
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
const myName = window.chatContext?.username ?? '';
|
||||
const isInvolved = myName === data.operator_name || myName === data.target_username;
|
||||
|
||||
// 随机鼓励语库
|
||||
const appointPhrases = [
|
||||
'望再接再厉，大展宏图，为大家服务！',
|
||||
'期待在任期间带领大家更上一层楼！',
|
||||
'众望所归，任重道远，加油！',
|
||||
'新官上任，一展风采，前程似锦！',
|
||||
'相信你能胜任，期待你的精彩表现！',
|
||||
];
|
||||
const revokePhrases = [
|
||||
'感谢在任期间的辛勤付出，辛苦了！',
|
||||
'江湖路长，愿前程似锦，未来可期！',
|
||||
'感谢您为大家的奉献，一路顺风！',
|
||||
'在任一场，情谊长存，感谢付出！',
|
||||
'相信以后还有更多精彩，继续加油！',
|
||||
];
|
||||
const randomPhrase = isRevoke ?
|
||||
revokePhrases[Math.floor(Math.random() * revokePhrases.length)] :
|
||||
appointPhrases[Math.floor(Math.random() * appointPhrases.length)];
|
||||
|
||||
// 构建消息 DOM（内容相同，分配到不同面板）
|
||||
function buildSysMsg() {
|
||||
const sysDiv = document.createElement('div');
|
||||
sysDiv.className = 'msg-line';
|
||||
if (isRevoke) {
|
||||
sysDiv.style.cssText =
|
||||
'background:#f3f4f6; border-left:3px solid #9ca3af; border-radius:4px; padding:4px 10px; margin:2px 0;';
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color:#6b7280;">📋 </span>` +
|
||||
`<span style="color:#374151;"><b>${escapeHtml(data.target_username)}</b> 的 ${escapeHtml(data.position_icon)} ${dept}${escapeHtml(data.position_name)} 职务已被 <b>${escapeHtml(data.operator_name)}</b> 撤销。${randomPhrase}</span>` +
|
||||
`<span class="msg-time">(${timeStr})</span>`;
|
||||
} else {
|
||||
sysDiv.style.cssText =
|
||||
'background:#f5f3ff; border-left:3px solid #7c3aed; border-radius:4px; padding:4px 10px; margin:2px 0;';
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color:#7c3aed;">🎖️ </span>` +
|
||||
`<span style="color:#3730a3;">恭喜 <b>${escapeHtml(data.target_username)}</b> 荣任 ${escapeHtml(data.position_icon)} ${dept}<b>${escapeHtml(data.position_name)}</b>，由 <b>${escapeHtml(data.operator_name)}</b> 任命。${randomPhrase}</span>` +
|
||||
`<span class="msg-time">(${timeStr})</span>`;
|
||||
}
|
||||
return sysDiv;
|
||||
}
|
||||
|
||||
const say1 = document.getElementById('chat-messages-container');
|
||||
const say2 = document.getElementById('chat-messages-container2');
|
||||
|
||||
if (isInvolved) {
|
||||
// 操作者 / 被操作者：消息进私聊面板（包厢窗口）
|
||||
if (say2) {
|
||||
say2.appendChild(buildSysMsg());
|
||||
say2.scrollTop = say2.scrollHeight;
|
||||
}
|
||||
} else {
|
||||
// 其他人：消息进公屏
|
||||
if (say1) {
|
||||
say1.appendChild(buildSysMsg());
|
||||
say1.scrollTop = say1.scrollHeight;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -27,8 +27,10 @@
|
||||
<div class="tool-btn" onclick="window.open('{{ route('guestbook.index') }}', '_blank')" title="留言板/私信">留言</div>
|
||||
<div class="tool-btn" onclick="window.open('{{ route('guide') }}', '_blank')" title="规则/帮助">规则</div>
|
||||
|
||||
@if ($user->user_level >= $superLevel)
|
||||
@if ($user->id === 1 || $user->activePosition()->exists())
|
||||
<div class="tool-btn" style="color: #ffcc00;" onclick="window.open('/admin', '_blank')" title="管理后台">管理</div>
|
||||
<div class="tool-btn" onclick="window.open('{{ route('leaderboard.index') }}', '_blank')" title="排行榜">排行
|
||||
</div>
|
||||
@else
|
||||
<div class="tool-btn" onclick="window.open('{{ route('leaderboard.index') }}', '_blank')" title="排行榜">排行
|
||||
</div>
|
||||
|
||||
@@ -89,6 +89,18 @@
|
||||
giftCount: 1,
|
||||
sendingGift: false,
|
||||
|
||||
// 任命相关
|
||||
showAppointPanel: false,
|
||||
appointPositions: [],
|
||||
selectedPositionId: null,
|
||||
appointRemark: '',
|
||||
appointLoading: false,
|
||||
|
||||
// 折叠状态
|
||||
showAdminView: false, // 管理员视野
|
||||
showPositionHistory: false, // 职务履历
|
||||
showAdminPanel: false, // 管理操作（管理操作+职务操作合并）
|
||||
|
||||
/** 获取用户资料 */
|
||||
async fetchUser(username) {
|
||||
try {
|
||||
@@ -102,7 +114,6 @@
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json().catch(() => ({}));
|
||||
console.error('Failed to fetch user:', errorData.message || res.statusText);
|
||||
// 如果是 404 或者 500 等错误，直接静默退出或提示
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -113,12 +124,90 @@
|
||||
this.isMuting = false;
|
||||
this.showWhispers = false;
|
||||
this.whisperList = [];
|
||||
this.showAppointPanel = false;
|
||||
this.selectedPositionId = null;
|
||||
this.appointRemark = '';
|
||||
// 有职务的操作人预加载可用职务列表
|
||||
if (window.chatContext?.hasPosition) {
|
||||
this._loadPositions();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error fetching user:', e);
|
||||
}
|
||||
},
|
||||
|
||||
/** 加载可任命职务列表 */
|
||||
async _loadPositions() {
|
||||
if (!window.chatContext?.appointPositionsUrl) return;
|
||||
try {
|
||||
const res = await fetch(window.chatContext.appointPositionsUrl, {
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.status === 'success') {
|
||||
this.appointPositions = data.positions;
|
||||
if (this.appointPositions.length > 0) {
|
||||
this.selectedPositionId = this.appointPositions[0].id;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
/* 静默失败 */
|
||||
}
|
||||
},
|
||||
|
||||
/** 快速任命 */
|
||||
async doAppoint() {
|
||||
if (this.appointLoading || !this.selectedPositionId) return;
|
||||
this.appointLoading = true;
|
||||
try {
|
||||
const res = await fetch(window.chatContext.appointUrl, {
|
||||
method: 'POST',
|
||||
headers: this._headers(),
|
||||
body: JSON.stringify({
|
||||
username: this.userInfo.username,
|
||||
position_id: this.selectedPositionId,
|
||||
remark: this.appointRemark.trim() || null,
|
||||
room_id: window.chatContext.roomId ?? null,
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
alert(data.message);
|
||||
if (data.status === 'success') {
|
||||
this.showUserModal = false;
|
||||
}
|
||||
} catch (e) {
|
||||
alert('网络异常');
|
||||
}
|
||||
this.appointLoading = false;
|
||||
},
|
||||
|
||||
/** 快速撤销 */
|
||||
async doRevoke() {
|
||||
if (!confirm('确定要撤销 ' + this.userInfo.username + ' 的职务吗？')) return;
|
||||
this.appointLoading = true;
|
||||
try {
|
||||
const res = await fetch(window.chatContext.revokeUrl, {
|
||||
method: 'POST',
|
||||
headers: this._headers(),
|
||||
body: JSON.stringify({
|
||||
username: this.userInfo.username,
|
||||
remark: '聊天室快速撤销',
|
||||
room_id: window.chatContext.roomId ?? null,
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
alert(data.message);
|
||||
if (data.status === 'success') {
|
||||
this.showUserModal = false;
|
||||
}
|
||||
} catch (e) {
|
||||
alert('网络异常');
|
||||
}
|
||||
this.appointLoading = false;
|
||||
},
|
||||
/** 踢出用户 */
|
||||
async kickUser() {
|
||||
const reason = prompt('踢出原因（可留空）：', '违反聊天室规则');
|
||||
@@ -324,7 +413,14 @@
|
||||
:style="userInfo.sex === '男' ? 'color: blue' : (userInfo.sex === '女' ?
|
||||
'color: deeppink' : '')"></span>
|
||||
</h4>
|
||||
<div style="font-size: 11px; color: #999; margin-top: 2px;">
|
||||
{{-- 在职职务标签（有职务时才显示） --}}
|
||||
<div x-show="userInfo.position_name"
|
||||
style="display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 2px 8px; background: #f3e8ff; border: 1px solid #d8b4fe; border-radius: 20px; font-size: 11px; color: #7c3aed; font-weight: bold;">
|
||||
<span x-text="userInfo.position_icon" style="font-size: 13px;"></span>
|
||||
<span
|
||||
x-text="(userInfo.department_name ? userInfo.department_name + ' · ' : '') + userInfo.position_name"></span>
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #999; margin-top: 4px;">
|
||||
加入: <span x-text="userInfo.created_at"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -359,161 +455,260 @@
|
||||
|
||||
{{-- 管理员可见区域 (IP 与 归属地) --}}
|
||||
<div x-show="userInfo.last_ip !== undefined"
|
||||
style="margin-top: 8px; padding: 8px 10px; background: #fee2e2; border: 1px dashed #fca5a5; border-radius: 8px; font-size: 11px; color: #991b1b;">
|
||||
<div style="font-weight: bold; margin-bottom: 4px; display: flex; align-items: center; gap: 4px;">
|
||||
<span>🛡️</span> 管理员视野
|
||||
style="margin-top: 8px; border-radius: 8px; overflow: hidden;">
|
||||
{{-- 可点击标题 --}}
|
||||
<div x-on:click="showAdminView = !showAdminView"
|
||||
style="display: flex; align-items: center; justify-content: space-between; padding: 6px 10px;
|
||||
background: #fee2e2; border: 1px dashed #fca5a5; border-radius: 8px;
|
||||
cursor: pointer; font-size: 11px; color: #991b1b; font-weight: bold; user-select: none;">
|
||||
<span>🛡️ 管理员视野</span>
|
||||
<span x-text="showAdminView ? '▲' : '▼'" style="font-size: 10px; opacity: 0.6;"></span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 3px;">
|
||||
<div><span style="opacity: 0.8;">主要IP：</span><span x-text="userInfo.last_ip || '无'"></span>
|
||||
</div>
|
||||
<div><span style="opacity: 0.8;">本次IP：</span><span x-text="userInfo.login_ip || '无'"></span>
|
||||
</div>
|
||||
<div><span style="opacity: 0.8;">归属地：</span><span x-text="userInfo.location || '未知'"></span>
|
||||
{{-- 折叠内容 --}}
|
||||
<div x-show="showAdminView" x-transition
|
||||
style="display: none; padding: 8px 10px; background: #fff5f5; border: 1px dashed #fca5a5;
|
||||
border-top: none; border-radius: 0 0 8px 8px; font-size: 11px; color: #991b1b;">
|
||||
<div style="display: flex; flex-direction: column; gap: 3px;">
|
||||
<div><span style="opacity: 0.8;">主要IP：</span><span x-text="userInfo.last_ip || '无'"></span>
|
||||
</div>
|
||||
<div><span style="opacity: 0.8;">本次IP：</span><span x-text="userInfo.login_ip || '无'"></span>
|
||||
</div>
|
||||
<div><span style="opacity: 0.8;">归属地：</span><span x-text="userInfo.location || '未知'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-detail" x-text="userInfo.sign || '这家伙很懒，什么也没留下'" style="margin-top: 12px;"></div>
|
||||
</div>
|
||||
|
||||
{{-- 普通操作按钮 --}}
|
||||
<div class="modal-actions" x-show="userInfo.username !== window.chatContext.username">
|
||||
<button class="btn-whisper"
|
||||
x-on:click="document.getElementById('to_user').value = userInfo.username; document.getElementById('content').focus(); showUserModal = false;">
|
||||
悄悄话
|
||||
</button>
|
||||
<a class="btn-mail"
|
||||
:href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
|
||||
.username)"
|
||||
target="_blank">
|
||||
写私信
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- 送花/礼物互动区 --}}
|
||||
<div style="padding: 16px; margin: 0 16px 16px; background: #fff; border-radius: 12px; border: 1px solid #f1f5f9; box-shadow: 0 2px 8px rgba(0,0,0,0.02);"
|
||||
x-show="userInfo.username !== window.chatContext.username" x-data="{ showGiftPanel: false }">
|
||||
|
||||
{{-- 初始状态：只显示一个主操作按钮 --}}
|
||||
<button x-show="!showGiftPanel" x-on:click="showGiftPanel = true"
|
||||
style="width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #fce4ec 0%, #fbcfe8 100%); color: #db2777; border: 1px dashed #f9a8d4; border-radius: 10px; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(219, 39, 119, 0.1);"
|
||||
x-on:mousedown="$el.style.transform='scale(0.98)'" x-on:mouseup="$el.style.transform='scale(1)'"
|
||||
x-on:mouseleave="$el.style.transform='scale(1)'">
|
||||
<span style="font-size: 18px;">🎁</span>
|
||||
<span>赠送礼物给 TA</span>
|
||||
</button>
|
||||
|
||||
{{-- 展开状态：显示礼物面板 --}}
|
||||
<div x-show="showGiftPanel" style="display: none;" x-transition>
|
||||
<div
|
||||
style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
||||
<div style="display: flex; align-items: center; gap: 6px;">
|
||||
<span style="font-size: 16px;">🎁</span>
|
||||
<span style="font-size: 14px; color: #334155; font-weight: bold;">选择礼物</span>
|
||||
</div>
|
||||
<button x-on:click="showGiftPanel = false"
|
||||
style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px;">×</button>
|
||||
{{-- 职务履历时间轴（有任职记录才显示，可折叠） --}}
|
||||
<div x-show="userInfo.position_history && userInfo.position_history.length > 0"
|
||||
style="display: none; margin-top: 10px; border-top: 1px solid #f0f0f0; padding-top: 8px;">
|
||||
{{-- 可点击标题 --}}
|
||||
<div x-on:click="showPositionHistory = !showPositionHistory"
|
||||
style="display: flex; align-items: center; justify-content: space-between;
|
||||
cursor: pointer; font-size: 11px; font-weight: bold; color: #7c3aed;
|
||||
margin-bottom: 4px; user-select: none;">
|
||||
<span>🎖️ 职务履历 <span style="font-weight: normal; font-size: 10px; color: #9ca3af;"
|
||||
x-text="'（' + userInfo.position_history.length + ' 条）'"></span></span>
|
||||
<span x-text="showPositionHistory ? '▲' : '▼'" style="font-size: 10px; opacity:0.5;"></span>
|
||||
</div>
|
||||
|
||||
{{-- 礼物选择列表 --}}
|
||||
<div
|
||||
style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; max-height: 200px; overflow-y: auto; padding-right: 4px;">
|
||||
<template x-for="g in gifts" :key="g.id">
|
||||
<div x-on:click="selectedGiftId = g.id"
|
||||
:style="selectedGiftId === g.id ?
|
||||
'border-color: #f43f5e; background: #fff1f2; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15); transform: translateY(-1px);' :
|
||||
'border-color: #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03); transform: translateY(0);'"
|
||||
style="border: 2px solid; padding: 10px 4px; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<img :src="'/images/gifts/' + g.image"
|
||||
style="width: 44px; height: 44px; object-fit: contain; margin-bottom: 6px; transition: transform 0.2s ease;"
|
||||
:style="selectedGiftId === g.id ? 'transform: scale(1.1);' : ''"
|
||||
:alt="g.name">
|
||||
<div style="font-size: 12px; color: #1e293b; font-weight: 600; margin-bottom: 4px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
||||
x-text="g.name"></div>
|
||||
<div style="font-size: 10px; color: #e11d48; font-weight: 500; line-height: 1.3;">
|
||||
<div x-text="g.cost + ' 💰'"></div>
|
||||
<div x-text="'+' + g.charm + ' ✨'"></div>
|
||||
{{-- 折叠内容 --}}
|
||||
<div x-show="showPositionHistory" x-transition style="display: none;">
|
||||
<template x-for="(h, idx) in userInfo.position_history" :key="idx">
|
||||
<div style="display: flex; gap: 10px; margin-bottom: 8px; position: relative;">
|
||||
{{-- 线 --}}
|
||||
<div
|
||||
style="display: flex; flex-direction: column; align-items: center; width: 18px; flex-shrink: 0;">
|
||||
<div style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;"
|
||||
:style="h.is_active ? 'background: #7c3aed; box-shadow: 0 0 0 3px #ede9fe;' :
|
||||
'background: #d1d5db;'">
|
||||
</div>
|
||||
<template x-if="idx < userInfo.position_history.length - 1">
|
||||
<div style="width: 1px; flex: 1; background: #e5e7eb; margin-top: 2px;"></div>
|
||||
</template>
|
||||
</div>
|
||||
{{-- 内容 --}}
|
||||
<div style="flex: 1; font-size: 11px; padding-bottom: 4px;">
|
||||
<div style="font-weight: bold; color: #374151;">
|
||||
<span x-text="h.position_icon" style="margin-right: 2px;"></span>
|
||||
<span
|
||||
x-text="(h.department_name ? h.department_name + ' · ' : '') + h.position_name"></span>
|
||||
<span x-show="h.is_active"
|
||||
style="display: inline-block; margin-left: 4px; padding: 0 5px; background: #ede9fe; color: #7c3aed; border-radius: 10px; font-size: 10px;">在职中</span>
|
||||
</div>
|
||||
<div style="color: #9ca3af; font-size: 10px; margin-top: 2px;">
|
||||
<span x-text="h.appointed_at"></span>
|
||||
<span> – </span>
|
||||
<span x-text="h.is_active ? '至今' : (h.revoked_at || '')"></span>
|
||||
<span style="margin-left: 4px;" x-text="'(' + h.duration_days + ' 天)'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 数量 + 送出按钮 --}}
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
<div style="position: relative;">
|
||||
<select x-model.number="giftCount"
|
||||
style="appearance: none; width: 76px; height: 42px; padding: 0 24px 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; font-weight: 500; color: #334155; background-color: #fff; cursor: pointer; outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.2s ease;"
|
||||
onfocus="this.style.borderColor='#f43f5e'" onblur="this.style.borderColor='#cbd5e1'">
|
||||
<option value="1">1 个</option>
|
||||
<option value="5">5 个</option>
|
||||
<option value="10">10 个</option>
|
||||
<option value="66">66 个</option>
|
||||
<option value="99">99 个</option>
|
||||
<option value="520">520 个</option>
|
||||
</select>
|
||||
<div
|
||||
style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94a3b8; font-size: 10px;">
|
||||
▼
|
||||
{{-- 普通操作按鈕：写私信 + 送花 + 内联礼物面板 --}}
|
||||
<div x-data="{ showGiftPanel: false }" x-show="userInfo.username !== window.chatContext.username">
|
||||
|
||||
<div class="modal-actions" style="margin-bottom: 0;">
|
||||
{{-- 写私信 --}}
|
||||
<a class="btn-mail"
|
||||
:href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
|
||||
.username)"
|
||||
target="_blank">
|
||||
写私信
|
||||
</a>
|
||||
{{-- 送花按鈕（与写私信并列） --}}
|
||||
<button class="btn-whisper" x-on:click="showGiftPanel = !showGiftPanel">
|
||||
🎁 送礼物
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 内联礼物面板 --}}
|
||||
<div x-show="showGiftPanel" x-transition
|
||||
style="display: none;
|
||||
padding: 12px 16px; background: #fff; border-top: 1px solid #f1f5f9;">
|
||||
|
||||
<div
|
||||
style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span style="font-size: 13px; color: #334155; font-weight: bold;">🎁 选择礼物</span>
|
||||
<button x-on:click="showGiftPanel = false"
|
||||
style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 18px; line-height: 1;">×</button>
|
||||
</div>
|
||||
|
||||
{{-- 礼物选择列表 --}}
|
||||
<div
|
||||
style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; max-height: 180px; overflow-y: auto;">
|
||||
<template x-for="g in gifts" :key="g.id">
|
||||
<div x-on:click="selectedGiftId = g.id"
|
||||
:style="selectedGiftId === g.id ?
|
||||
'border-color: #f43f5e; background: #fff1f2; box-shadow: 0 4px 12px rgba(244,63,94,0.15);' :
|
||||
'border-color: #e2e8f0; background: #fff;'"
|
||||
style="border: 2px solid; padding: 8px 4px; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.15s;">
|
||||
<img :src="'/images/gifts/' + g.image"
|
||||
style="width: 36px; height: 36px; object-fit: contain; margin-bottom: 4px;"
|
||||
:alt="g.name">
|
||||
<div style="font-size: 11px; color: #1e293b; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
||||
x-text="g.name"></div>
|
||||
<div style="font-size: 10px; color: #e11d48;" x-text="g.cost + ' 💰'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{{-- 数量 + 送出 --}}
|
||||
<div style="display: flex; gap: 8px; align-items: center;">
|
||||
<select x-model.number="giftCount"
|
||||
style="width: 70px; height: 36px; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; color: #334155;">
|
||||
<option value="1">1 个</option>
|
||||
<option value="5">5 个</option>
|
||||
<option value="10">10 个</option>
|
||||
<option value="66">66 个</option>
|
||||
<option value="99">99 个</option>
|
||||
<option value="520">520 个</option>
|
||||
</select>
|
||||
<button x-on:click="sendGift(); showGiftPanel = false;" :disabled="sendingGift"
|
||||
style="flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); color: #fff; border: 1px solid #9f1239; border-radius: 8px; font-size: 16px; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);"
|
||||
x-on:mousedown="if(!sendingGift) { $el.style.transform='scale(0.96)'; $el.style.boxShadow='0 2px 6px rgba(225, 29, 72, 0.3)'; }"
|
||||
x-on:mouseup="if(!sendingGift) { $el.style.transform='scale(1)'; $el.style.boxShadow='0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3)'; }"
|
||||
x-on:mouseleave="if(!sendingGift) { $el.style.transform='scale(1)'; $el.style.boxShadow='0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3)'; }"
|
||||
:style="sendingGift ?
|
||||
'opacity: 0.7; cursor: not-allowed; transform: scale(1) !important; box-shadow: none;' :
|
||||
''">
|
||||
<span x-text="sendingGift ? '正在送出...' : '💝 确认赠送'"
|
||||
style="text-shadow: 0 1px 2px rgba(0,0,0,0.3);"></span>
|
||||
style="flex:1; height: 36px; background: linear-gradient(135deg,#f43f5e,#be123c); color:#fff;
|
||||
border: none; border-radius: 6px; font-size: 14px; font-weight: bold; cursor: pointer;"
|
||||
:style="sendingGift ? 'opacity:0.7; cursor:not-allowed;' : ''">
|
||||
<span x-text="sendingGift ? '正在送出...' : '💝 确认赠送'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 特权操作（各按钮按等级独立显示） --}}
|
||||
@if ($myLevel >= $levelWarn || $room->master == Auth::user()->username)
|
||||
<div style="padding: 0 16px 12px;"
|
||||
x-show="userInfo.username !== window.chatContext.username && userInfo.user_level < {{ $myLevel }}">
|
||||
<div style="font-size: 11px; color: #c00; margin-bottom: 6px; font-weight: bold;">管理操作</div>
|
||||
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
|
||||
@if ($myLevel >= $levelWarn)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef3c7; border: 1px solid #f59e0b; cursor: pointer;"
|
||||
x-on:click="warnUser()">⚠️ 警告</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelKick)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fee2e2; border: 1px solid #ef4444; cursor: pointer;"
|
||||
x-on:click="kickUser()">🚫 踢出</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelMute)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #e0e7ff; border: 1px solid #6366f1; cursor: pointer;"
|
||||
x-on:click="isMuting = !isMuting">🔇 禁言</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelFreeze)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #dbeafe; border: 1px solid #3b82f6; cursor: pointer;"
|
||||
x-on:click="freezeUser()">🧊 冻结</button>
|
||||
@endif
|
||||
@if ($myLevel >= $superLevel)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;"
|
||||
x-on:click="loadWhispers()">🔍 私信</button>
|
||||
@endif
|
||||
{{-- 管理操作 + 职务操作 合并折叠区 --}}
|
||||
@if (
|
||||
$myLevel >= $levelWarn ||
|
||||
$room->master == Auth::user()->username ||
|
||||
Auth::user()->activePosition ||
|
||||
$myLevel >= $superLevel)
|
||||
<div style="padding: 0 16px 12px;" x-show="userInfo.username !== window.chatContext.username">
|
||||
|
||||
{{-- 折叠标题 --}}
|
||||
<div x-on:click="showAdminPanel = !showAdminPanel"
|
||||
style="display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 6px 10px; background: #fef2f2; border: 1px solid #fecaca;
|
||||
border-radius: 6px; cursor: pointer; user-select: none;">
|
||||
<span style="font-size: 11px; color: #c00; font-weight: bold;">🔧 管理操作</span>
|
||||
<span x-text="showAdminPanel ? '▲' : '▼'"
|
||||
style="font-size: 10px; color: #c00; opacity: 0.6;"></span>
|
||||
</div>
|
||||
</div>
|
||||
{{-- 禁言表单 --}}
|
||||
<div x-show="isMuting" style="display: none; padding: 0 16px 12px;">
|
||||
<div style="display: flex; gap: 6px; align-items: center;">
|
||||
<input type="number" x-model="muteDuration" min="1" max="1440" placeholder="分钟"
|
||||
style="width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px;">
|
||||
<span style="font-size: 11px; color: #b86e00;">分钟</span>
|
||||
<button x-on:click="muteUser()"
|
||||
style="padding: 4px 12px; background: #6366f1; color: #fff; border: none; border-radius: 3px; font-size: 11px; cursor: pointer;">执行</button>
|
||||
|
||||
{{-- 折叠内容 --}}
|
||||
<div x-show="showAdminPanel" x-transition style="display: none; margin-top: 6px;">
|
||||
|
||||
@if ($myLevel >= $levelWarn || $room->master == Auth::user()->username)
|
||||
<div x-show="userInfo.user_level < {{ $myLevel }}">
|
||||
<div style="font-size: 10px; color: #9ca3af; margin-bottom: 4px; padding-left: 2px;">
|
||||
管理员操作</div>
|
||||
<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;">
|
||||
@if ($myLevel >= $levelWarn)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef3c7; border: 1px solid #f59e0b; cursor: pointer;"
|
||||
x-on:click="warnUser()">⚠️ 警告</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelKick)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fee2e2; border: 1px solid #ef4444; cursor: pointer;"
|
||||
x-on:click="kickUser()">🚫 踢出</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelMute)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #e0e7ff; border: 1px solid #6366f1; cursor: pointer;"
|
||||
x-on:click="isMuting = !isMuting">🔇 禁言</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelFreeze)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #dbeafe; border: 1px solid #3b82f6; cursor: pointer;"
|
||||
x-on:click="freezeUser()">🧊 冻结</button>
|
||||
@endif
|
||||
@if ($myLevel >= $superLevel)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;"
|
||||
x-on:click="loadWhispers()">🔍 私信</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (Auth::user()->activePosition || $myLevel >= $superLevel)
|
||||
<div>
|
||||
<div style="font-size: 10px; color: #9ca3af; margin-bottom: 4px; padding-left: 2px;">
|
||||
职务操作</div>
|
||||
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
|
||||
<template x-if="!userInfo.position_name">
|
||||
<button x-on:click="showAppointPanel = !showAppointPanel"
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;">✨
|
||||
任命职务</button>
|
||||
</template>
|
||||
<template x-if="userInfo.position_name">
|
||||
<button x-on:click="doRevoke()" :disabled="appointLoading"
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef9c3; border: 1px solid #eab308; cursor: pointer;">🔧
|
||||
撤销职务</button>
|
||||
</template>
|
||||
</div>
|
||||
<div x-show="showAppointPanel" x-transition
|
||||
style="display:none; margin-top:8px; padding:10px; background:#faf5ff; border:1px solid #d8b4fe; border-radius:6px;">
|
||||
<div style="font-size:11px; color:#7c3aed; margin-bottom:6px;">选择职务：</div>
|
||||
<select x-model.number="selectedPositionId"
|
||||
style="width:100%; padding:4px; border:1px solid #c4b5fd; border-radius:4px; font-size:11px; margin-bottom:6px;">
|
||||
<template x-for="p in appointPositions" :key="p.id">
|
||||
<option :value="p.id"
|
||||
x-text="(p.icon?p.icon+' ':'')+p.department+' · '+p.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
<input type="text" x-model="appointRemark" placeholder="备注（如任命原因）"
|
||||
style="width:100%; padding:4px; border:1px solid #c4b5fd; border-radius:4px; font-size:11px; box-sizing:border-box; margin-bottom:6px;">
|
||||
<div style="display:flex; gap:6px;">
|
||||
<button x-on:click="doAppoint()"
|
||||
:disabled="appointLoading || !selectedPositionId"
|
||||
style="flex:1; padding:5px; background:#7c3aed; color:#fff; border:none; border-radius:4px; font-size:11px; cursor:pointer;">
|
||||
<span x-text="appointLoading?'处理中...':'✅ 确认任命'"></span>
|
||||
</button>
|
||||
<button x-on:click="showAppointPanel=false"
|
||||
style="padding:5px 10px; background:#fff; border:1px solid #ccc; border-radius:4px; font-size:11px; cursor:pointer;">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>{{-- /折叠内容 --}}
|
||||
|
||||
{{-- 禁言输入表单 --}}
|
||||
<div x-show="isMuting" style="display:none; margin-top:6px;">
|
||||
<div style="display:flex; gap:6px; align-items:center;">
|
||||
<input type="number" x-model="muteDuration" min="1" max="1440"
|
||||
placeholder="分钟"
|
||||
style="width:60px; padding:4px; border:1px solid #ccc; border-radius:3px; font-size:11px;">
|
||||
<span style="font-size:11px; color:#b86e00;">分钟</span>
|
||||
<button x-on:click="muteUser()"
|
||||
style="padding:4px 12px; background:#6366f1; color:#fff; border:none; border-radius:3px; font-size:11px; cursor:pointer;">执行</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
@@ -0,0 +1,239 @@
|
||||
{{--
|
||||
文件功能：勤务台页面（职务管理荣誉展示台）
|
||||
左侧子菜单：任职列表、日榜、周榜、月榜、总榜
|
||||
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="/images/headface/{{ strtolower($up->user?->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
|
||||
{{-- 表头 --}}
|
||||
<div
|
||||
class="grid grid-cols-12 gap-4 px-5 py-2.5 bg-gray-50 border-b border-gray-100 text-xs font-bold text-gray-400 uppercase">
|
||||
<div class="col-span-1 text-center">名次</div>
|
||||
<div class="col-span-5">成员</div>
|
||||
<div class="col-span-3 text-right">在线时长</div>
|
||||
<div class="col-span-3 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,
|
||||
};
|
||||
@endphp
|
||||
<div
|
||||
class="grid grid-cols-12 gap-4 items-center px-5 py-3 border-b border-gray-50 last:border-0
|
||||
{{ $i === 0 ? 'bg-yellow-50/40' : ($i === 1 ? 'bg-gray-50/60' : ($i === 2 ? 'bg-amber-50/40' : '')) }}
|
||||
hover:bg-purple-50/30 transition-colors">
|
||||
{{-- 名次 --}}
|
||||
<div class="col-span-1 text-center">
|
||||
@if ($medal)
|
||||
<span class="text-lg">{{ $medal }}</span>
|
||||
@else
|
||||
<span class="text-sm font-bold text-gray-300">{{ $i + 1 }}</span>
|
||||
@endif
|
||||
</div>
|
||||
{{-- 成员 --}}
|
||||
<div class="col-span-5 flex items-center gap-3">
|
||||
<img src="/images/headface/{{ strtolower($row->user?->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-xs 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-3 text-right">
|
||||
<span class="text-sm font-bold text-indigo-500 tabular-nums">{{ $row->checkin_count }}
|
||||
次</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@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
|
||||
@@ -0,0 +1,480 @@
|
||||
{{--
|
||||
文件功能：用户反馈前台独立页面（/feedback）
|
||||
用户可提交 Bug 报告或功能建议，可赞同（Toggle）、补充评论
|
||||
支持按类型筛选（全部/Bug/建议），懒加载列表
|
||||
右上角按钮打开提交 Modal
|
||||
|
||||
@extends layouts.app
|
||||
--}}
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', '用户反馈 - 飘落流星')
|
||||
@section('nav-icon', '💬')
|
||||
@section('nav-title', '用户反馈')
|
||||
|
||||
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto py-8 px-4 sm:px-6" x-data="{
|
||||
// 列表状态
|
||||
items: [],
|
||||
lastId: null,
|
||||
hasMore: true,
|
||||
loading: false,
|
||||
filterType: 'all',
|
||||
|
||||
// 展开/评论状态
|
||||
expandedId: null,
|
||||
replyContent: {},
|
||||
submittingReply: {},
|
||||
|
||||
// 提交 Modal 状态
|
||||
showModal: false,
|
||||
submitting: false,
|
||||
form: { type: 'bug', title: '', content: '' },
|
||||
|
||||
// 当前用户已赞同的反馈 ID set
|
||||
myVotedIds: new Set({{ json_encode($myVotedIds) }}),
|
||||
|
||||
init() {
|
||||
// SSR 首屏数据
|
||||
const raw = {{ json_encode(
|
||||
$feedbacks->map(
|
||||
fn($f) => [
|
||||
'id' => $f->id,
|
||||
'type' => $f->type,
|
||||
'type_label' => $f->type_label,
|
||||
'title' => $f->title,
|
||||
'content' => $f->content,
|
||||
'status' => $f->status,
|
||||
'status_label' => $f->status_label,
|
||||
'status_color' => $f->status_config['color'],
|
||||
'admin_remark' => $f->admin_remark,
|
||||
'votes_count' => $f->votes_count,
|
||||
'replies_count' => $f->replies_count,
|
||||
'username' => $f->username,
|
||||
'created_at' => $f->created_at->diffForHumans(),
|
||||
'replies' => $f->replies->map(
|
||||
fn($r) => [
|
||||
'id' => $r->id,
|
||||
'username' => $r->username,
|
||||
'content' => $r->content,
|
||||
'is_admin' => $r->is_admin,
|
||||
'created_at' => $r->created_at->diffForHumans(),
|
||||
],
|
||||
)->values()->toArray(),
|
||||
],
|
||||
),
|
||||
) }};
|
||||
|
||||
this.items = raw.map(f => ({ ...f, voted: this.myVotedIds.has(f.id) }));
|
||||
|
||||
if (this.items.length > 0) {
|
||||
this.lastId = this.items[this.items.length - 1].id;
|
||||
this.hasMore = this.items.length >= 10;
|
||||
} else {
|
||||
this.hasMore = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 懒加载更多
|
||||
async loadMore() {
|
||||
if (this.loading || !this.hasMore) return;
|
||||
this.loading = true;
|
||||
try {
|
||||
const typeParam = this.filterType !== 'all' ? `&type=${this.filterType}` : '';
|
||||
const res = await fetch(`/feedback/more?after_id=${this.lastId}${typeParam}`);
|
||||
const data = await res.json();
|
||||
const newItems = data.items.map(f => ({ ...f, voted: this.myVotedIds.has(f.id) }));
|
||||
this.items.push(...newItems);
|
||||
if (data.items.length > 0) this.lastId = data.items[data.items.length - 1].id;
|
||||
this.hasMore = data.has_more;
|
||||
} catch (e) { console.error(e); } finally { this.loading = false; }
|
||||
},
|
||||
|
||||
// 切换类型筛选（重置并重新加载）
|
||||
async switchType(type) {
|
||||
this.filterType = type;
|
||||
this.items = [];
|
||||
this.lastId = 999999999;
|
||||
this.hasMore = true;
|
||||
this.expandedId = null;
|
||||
await this.loadMore();
|
||||
},
|
||||
|
||||
// 提交新反馈
|
||||
async submitFeedback() {
|
||||
if (this.submitting) return;
|
||||
if (!this.form.title.trim() || !this.form.content.trim()) {
|
||||
alert('请填写标题和详细描述！');
|
||||
return;
|
||||
}
|
||||
this.submitting = true;
|
||||
try {
|
||||
const res = await fetch('/feedback', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(this.form),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.status === 'success') {
|
||||
this.items.unshift(data.item);
|
||||
this.showModal = false;
|
||||
this.form = { type: 'bug', title: '', content: '' };
|
||||
} else {
|
||||
alert(data.message || '提交失败，请重试');
|
||||
}
|
||||
} catch (e) { alert('网络异常，请重试'); } finally { this.submitting = false; }
|
||||
},
|
||||
|
||||
// 赞同/取消赞同（乐观更新）
|
||||
async toggleVote(feedbackId) {
|
||||
const item = this.items.find(f => f.id === feedbackId);
|
||||
if (!item) return;
|
||||
const prev = { voted: item.voted, count: item.votes_count };
|
||||
item.voted = !item.voted;
|
||||
item.votes_count += item.voted ? 1 : -1;
|
||||
try {
|
||||
const res = await fetch(`/feedback/${feedbackId}/vote`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.status !== 'success') {
|
||||
// 回滚
|
||||
item.voted = prev.voted;
|
||||
item.votes_count = prev.count;
|
||||
alert(data.message || '操作失败');
|
||||
} else {
|
||||
item.votes_count = data.votes_count;
|
||||
if (data.voted) {
|
||||
this.myVotedIds.add(feedbackId);
|
||||
} else {
|
||||
this.myVotedIds.delete(feedbackId);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
item.voted = prev.voted;
|
||||
item.votes_count = prev.count;
|
||||
}
|
||||
},
|
||||
|
||||
// 提交补充评论
|
||||
async submitReply(feedbackId) {
|
||||
const content = (this.replyContent[feedbackId] || '').trim();
|
||||
if (!content) return;
|
||||
this.submittingReply[feedbackId] = true;
|
||||
try {
|
||||
const res = await fetch(`/feedback/${feedbackId}/reply`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ content }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.status === 'success') {
|
||||
const item = this.items.find(f => f.id === feedbackId);
|
||||
if (item) {
|
||||
item.replies.push(data.reply);
|
||||
item.replies_count++;
|
||||
}
|
||||
this.replyContent[feedbackId] = '';
|
||||
} else {
|
||||
alert(data.message || '评论失败');
|
||||
}
|
||||
} catch (e) { alert('网络异常'); } finally { this.submittingReply[feedbackId] = false; }
|
||||
},
|
||||
|
||||
// 辅助：状态徽标 CSS 类
|
||||
statusClass(color) {
|
||||
const map = {
|
||||
gray: 'bg-gray-100 text-gray-600',
|
||||
green: 'bg-green-100 text-green-700',
|
||||
blue: 'bg-blue-100 text-blue-700',
|
||||
emerald: 'bg-emerald-100 text-emerald-700',
|
||||
red: 'bg-red-100 text-red-700',
|
||||
orange: 'bg-orange-100 text-orange-700',
|
||||
};
|
||||
return map[color] || 'bg-gray-100 text-gray-600';
|
||||
},
|
||||
}">
|
||||
|
||||
{{-- ═══ 页面标题 + 提交按钮 ═══ --}}
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="text-2xl font-extrabold text-gray-800">💬 用户反馈</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">提交 Bug 报告或功能建议，开发者会跟进处理</p>
|
||||
</div>
|
||||
<button @click="showModal = true"
|
||||
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2.5 rounded-xl font-bold text-sm shadow-md hover:shadow-lg transition-all flex items-center gap-2 shrink-0">
|
||||
<span class="text-lg leading-none">＋</span> 提交反馈
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- ═══ 类型筛选 Tab ═══ --}}
|
||||
<div class="flex gap-2 mb-5">
|
||||
<button @click="switchType('all')"
|
||||
:class="filterType === 'all' ? 'bg-indigo-600 text-white shadow-sm' :
|
||||
'bg-white text-gray-600 border border-gray-200 hover:border-indigo-300 hover:text-indigo-600'"
|
||||
class="px-4 py-2 rounded-full text-xs font-bold transition-all">全部</button>
|
||||
<button @click="switchType('bug')"
|
||||
:class="filterType === 'bug' ? 'bg-rose-600 text-white shadow-sm' :
|
||||
'bg-white text-gray-600 border border-gray-200 hover:border-rose-300 hover:text-rose-600'"
|
||||
class="px-4 py-2 rounded-full text-xs font-bold transition-all">🐛 Bug 报告</button>
|
||||
<button @click="switchType('suggestion')"
|
||||
:class="filterType === 'suggestion' ? 'bg-blue-600 text-white shadow-sm' :
|
||||
'bg-white text-gray-600 border border-gray-200 hover:border-blue-300 hover:text-blue-600'"
|
||||
class="px-4 py-2 rounded-full text-xs font-bold transition-all">💡 功能建议</button>
|
||||
</div>
|
||||
|
||||
{{-- ═══ 空状态 ═══ --}}
|
||||
<template x-if="items.length === 0 && !loading">
|
||||
<div class="text-center py-24 text-gray-400">
|
||||
<p class="text-6xl mb-4">💬</p>
|
||||
<p class="text-lg font-bold text-gray-500">还没有任何反馈</p>
|
||||
<p class="text-sm mt-2">点击「提交反馈」成为第一个贡献者！</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- ═══ 反馈列表 ═══ --}}
|
||||
<div class="space-y-3">
|
||||
<template x-for="item in items" :key="item.id">
|
||||
<div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden
|
||||
hover:shadow-md transition-shadow duration-200"
|
||||
:class="{ 'ring-2 ring-indigo-200': expandedId === item.id }">
|
||||
|
||||
{{-- 卡片主区（点击展开/收起） --}}
|
||||
<div class="flex items-center gap-3 p-4 cursor-pointer"
|
||||
@click="expandedId = expandedId === item.id ? null : item.id">
|
||||
|
||||
{{-- 赞同按钮 --}}
|
||||
<div class="shrink-0" @click.stop>
|
||||
<button @click="toggleVote(item.id)"
|
||||
class="flex flex-col items-center justify-center w-12 h-14 rounded-xl border-2 font-bold transition-all"
|
||||
:class="item.voted ?
|
||||
'bg-indigo-600 border-indigo-600 text-white shadow-md' :
|
||||
'border-gray-200 text-gray-500 hover:border-indigo-400 hover:text-indigo-600 hover:bg-indigo-50'">
|
||||
<span class="text-base leading-none" x-text="item.voted ? '👍' : '👆'"></span>
|
||||
<span class="text-xs mt-1 font-bold" x-text="item.votes_count"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 内容摘要 --}}
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap mb-1.5">
|
||||
{{-- 类型标签 --}}
|
||||
<span class="px-2 py-0.5 rounded text-xs font-bold shrink-0"
|
||||
:class="item.type === 'bug' ? 'bg-rose-100 text-rose-700' : 'bg-blue-100 text-blue-700'"
|
||||
x-text="item.type_label"></span>
|
||||
{{-- 状态标签 --}}
|
||||
<span class="px-2 py-0.5 rounded text-xs font-bold shrink-0"
|
||||
:class="statusClass(item.status_color)" x-text="item.status_label"></span>
|
||||
{{-- 评论数 --}}
|
||||
<span class="text-gray-400 text-xs" x-text="'💬 ' + item.replies_count + ' 条'"></span>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-800 text-sm leading-snug truncate" x-text="item.title"></h4>
|
||||
<p class="text-gray-400 text-xs mt-1" x-text="'by ' + item.username + ' · ' + item.created_at">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- 展开指示箭头 --}}
|
||||
<div class="shrink-0 text-gray-300 transition-transform duration-200"
|
||||
:class="{ 'rotate-180 text-indigo-400': expandedId === item.id }">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 展开详情区 --}}
|
||||
<div x-show="expandedId === item.id" x-transition:enter="transition ease-out duration-150"
|
||||
x-transition:enter-start="opacity-0 -translate-y-1"
|
||||
x-transition:enter-end="opacity-100 translate-y-0" class="border-t border-gray-100">
|
||||
|
||||
{{-- 详细描述 --}}
|
||||
<div class="px-5 py-4 bg-gray-50/60">
|
||||
<p class="text-xs font-bold text-gray-400 mb-2">📝 详细描述</p>
|
||||
<p class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap" x-text="item.content"></p>
|
||||
</div>
|
||||
|
||||
{{-- 管理员官方回复 --}}
|
||||
<template x-if="item.admin_remark">
|
||||
<div class="mx-4 my-3 p-4 bg-indigo-50 border-l-4 border-indigo-400 rounded-r-xl">
|
||||
<p class="text-xs font-bold text-indigo-700 mb-1.5">🛡️ 开发者官方回复</p>
|
||||
<p class="text-sm text-indigo-800 whitespace-pre-wrap leading-relaxed"
|
||||
x-text="item.admin_remark"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- 补充评论列表 --}}
|
||||
<template x-if="item.replies && item.replies.length > 0">
|
||||
<div class="px-4 py-3 border-t border-gray-100 space-y-2">
|
||||
<p class="text-xs font-bold text-gray-400 mb-2">💬 补充评论 (<span
|
||||
x-text="item.replies_count"></span>)</p>
|
||||
<template x-for="reply in item.replies" :key="reply.id">
|
||||
<div class="rounded-xl px-3 py-2.5"
|
||||
:class="reply.is_admin ?
|
||||
'bg-indigo-50 border border-indigo-200' :
|
||||
'bg-gray-100'">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-bold text-xs"
|
||||
:class="reply.is_admin ? 'text-indigo-700' : 'text-gray-700'"
|
||||
x-text="reply.username"></span>
|
||||
<template x-if="reply.is_admin">
|
||||
<span
|
||||
class="text-xs bg-indigo-200 text-indigo-800 px-1.5 rounded font-bold">开发者</span>
|
||||
</template>
|
||||
<span class="text-gray-400 text-xs ml-auto" x-text="reply.created_at"></span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed"
|
||||
x-text="reply.content"></p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- 评论输入框 --}}
|
||||
<div class="px-4 pb-4 pt-2 border-t border-gray-100">
|
||||
<div class="flex gap-2">
|
||||
<textarea x-model="replyContent[item.id]" placeholder="补充说明、复现步骤或相关信息..." rows="2" maxlength="1000"
|
||||
class="flex-1 border border-gray-200 rounded-xl text-sm px-3 py-2 resize-none
|
||||
focus:ring-2 focus:ring-indigo-400 focus:border-transparent outline-none
|
||||
placeholder:text-gray-400"></textarea>
|
||||
<button @click="submitReply(item.id)"
|
||||
:disabled="submittingReply[item.id] || !replyContent[item.id]?.trim()"
|
||||
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl
|
||||
text-xs font-bold disabled:opacity-40 transition-all self-end shrink-0">
|
||||
发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- 懒加载哨兵 --}}
|
||||
<div x-show="hasMore && items.length > 0" x-intersect.threshold.10="loadMore()" class="py-4 text-center">
|
||||
<template x-if="loading">
|
||||
<div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
|
||||
<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
|
||||
stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z">
|
||||
</path>
|
||||
</svg>
|
||||
加载更多...
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div x-show="!hasMore && items.length > 0" class="text-center py-6 text-gray-400 text-sm">
|
||||
<div class="inline-flex items-center gap-2">
|
||||
<div class="h-px w-16 bg-gray-200"></div>
|
||||
<span>以上是全部反馈</span>
|
||||
<div class="h-px w-16 bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ═══════════ 提交反馈 Modal（必须在 x-data 容器内）═══════════ --}}
|
||||
<div x-show="showModal" style="display:none;" class="fixed inset-0 z-[200] flex items-center justify-center p-4"
|
||||
x-transition.opacity>
|
||||
{{-- 蒙板 --}}
|
||||
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="showModal = false"></div>
|
||||
|
||||
{{-- 弹窗 --}}
|
||||
<div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden"
|
||||
x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100">
|
||||
|
||||
{{-- 头部 --}}
|
||||
<div class="bg-gradient-to-r from-indigo-600 to-violet-600 px-6 py-5 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-white font-bold text-lg">📝 提交反馈</h3>
|
||||
<p class="text-indigo-200 text-xs mt-0.5">您的反馈将帮助我们改进产品</p>
|
||||
</div>
|
||||
<button @click="showModal = false"
|
||||
class="text-white/60 hover:text-white text-2xl font-light transition leading-none">×</button>
|
||||
</div>
|
||||
|
||||
{{-- 表单 --}}
|
||||
<div class="p-6 space-y-4">
|
||||
{{-- 类型选择 --}}
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-gray-700 mb-2">反馈类型 <span
|
||||
class="text-red-500">*</span></label>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label class="relative cursor-pointer">
|
||||
<input type="radio" x-model="form.type" value="bug" class="peer sr-only">
|
||||
<div
|
||||
class="border-2 border-gray-200 peer-checked:border-rose-500 peer-checked:bg-rose-50 rounded-xl p-3 text-center transition">
|
||||
<span class="text-2xl block mb-1">🐛</span>
|
||||
<span class="text-xs font-bold text-gray-700">Bug 报告</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">发现了问题</p>
|
||||
</div>
|
||||
</label>
|
||||
<label class="relative cursor-pointer">
|
||||
<input type="radio" x-model="form.type" value="suggestion" class="peer sr-only">
|
||||
<div
|
||||
class="border-2 border-gray-200 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-xl p-3 text-center transition">
|
||||
<span class="text-2xl block mb-1">💡</span>
|
||||
<span class="text-xs font-bold text-gray-700">功能建议</span>
|
||||
<p class="text-xs text-gray-400 mt-0.5">希望改进或新增</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 标题 --}}
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-gray-700 mb-2">
|
||||
标题 <span class="text-red-500">*</span>
|
||||
<span class="font-normal text-gray-400 ml-1 text-xs">(一句话描述)</span>
|
||||
</label>
|
||||
<input x-model="form.title" type="text" maxlength="200" placeholder="例：点击发送按钮后页面空白..."
|
||||
class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm
|
||||
focus:ring-2 focus:ring-indigo-400 focus:border-transparent outline-none">
|
||||
<p class="text-xs text-gray-400 mt-1" x-text="form.title.length + '/200'"></p>
|
||||
</div>
|
||||
|
||||
{{-- 详细描述 --}}
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-gray-700 mb-2">
|
||||
详细描述 <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea x-model="form.content" rows="5" maxlength="2000"
|
||||
:placeholder="form.type === 'bug' ?
|
||||
'请描述：\n1. 触发 Bug 的操作步骤\n2. 实际看到的现象\n3. 期望的正确行为' :
|
||||
'请描述：\n1. 您希望实现什么功能\n2. 这个功能对您有什么帮助'"
|
||||
class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm resize-none
|
||||
focus:ring-2 focus:ring-indigo-400 focus:border-transparent outline-none leading-relaxed"></textarea>
|
||||
<p class="text-xs text-gray-400 mt-1" x-text="form.content.length + '/2000'"></p>
|
||||
</div>
|
||||
|
||||
{{-- 操作按钮 --}}
|
||||
<div class="flex justify-end gap-3 pt-1">
|
||||
<button @click="showModal = false"
|
||||
class="px-5 py-2.5 border border-gray-200 rounded-xl text-gray-600 hover:bg-gray-50 text-sm font-medium transition">
|
||||
取消
|
||||
</button>
|
||||
<button @click="submitFeedback()"
|
||||
:disabled="submitting || !form.title.trim() || !form.content.trim()"
|
||||
class="px-6 py-2.5 bg-indigo-600 text-white rounded-xl font-bold
|
||||
hover:bg-indigo-700 disabled:opacity-40 text-sm shadow-sm transition">
|
||||
<span x-text="submitting ? '提交中...' : '确认提交'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -12,10 +12,6 @@
|
||||
@section('nav-title', '星光留言板')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@section('content')
|
||||
<div x-data="{ showWriteForm: false, towho: '{{ $defaultTo }}' }" class="w-full">
|
||||
|
||||
|
||||
@@ -26,6 +26,8 @@
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>@yield('title', '飘落流星聊天室')</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
{{-- Alpine.js Intersect 插件（懒加载 x-intersect 需要，必须在主包之前加载） --}}
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<style>
|
||||
/* 通用滚动条美化 */
|
||||
@@ -69,31 +71,43 @@
|
||||
{{-- 公共导航链接 --}}
|
||||
<a href="{{ route('rooms.index') }}"
|
||||
class="text-indigo-200 hover:text-white font-bold flex items-center transition hidden sm:flex">
|
||||
<span class="mr-1">🏠</span> 大厅
|
||||
大厅
|
||||
</a>
|
||||
<a href="{{ route('leaderboard.index') }}"
|
||||
class="text-yellow-400 hover:text-yellow-300 font-bold flex items-center transition hidden sm:flex">
|
||||
<span class="mr-1">🏆</span> 风云榜
|
||||
风云榜
|
||||
</a>
|
||||
<a href="{{ route('leaderboard.today') }}"
|
||||
class="text-green-400 hover:text-green-300 font-bold flex items-center transition hidden sm:flex">
|
||||
<span class="mr-1">📅</span> 今日榜
|
||||
今日榜
|
||||
</a>
|
||||
<a href="{{ route('duty-hall.index') }}"
|
||||
class="text-purple-300 hover:text-purple-100 font-bold flex items-center transition hidden sm:flex {{ request()->routeIs('duty-hall.*') ? 'text-purple-100 underline underline-offset-4' : '' }}">
|
||||
勤务台
|
||||
</a>
|
||||
<a href="{{ route('guestbook.index') }}"
|
||||
class="text-indigo-200 hover:text-white font-bold flex items-center transition hidden sm:flex">
|
||||
<span class="mr-1">✉️</span> 留言板
|
||||
留言板
|
||||
</a>
|
||||
<a href="{{ route('changelog.index') }}"
|
||||
class="text-purple-300 hover:text-purple-100 font-bold flex items-center transition hidden sm:flex {{ request()->routeIs('changelog.*') ? 'text-purple-100 underline underline-offset-4' : '' }}">
|
||||
更新日志
|
||||
</a>
|
||||
<a href="{{ route('feedback.index') }}"
|
||||
class="text-sky-300 hover:text-sky-100 font-bold flex items-center transition hidden sm:flex {{ request()->routeIs('feedback.*') ? 'text-sky-100 underline underline-offset-4' : '' }}">
|
||||
用户反馈
|
||||
</a>
|
||||
|
||||
{{-- 通用快捷操作区 --}}
|
||||
@auth
|
||||
<a href="{{ route('guide') }}"
|
||||
class="text-indigo-200 hover:text-white font-bold transition hidden sm:flex items-center">
|
||||
<span class="mr-1">📖</span> 说明
|
||||
说明
|
||||
</a>
|
||||
@if (Auth::user()->user_level >= 15)
|
||||
<a href="{{ route('admin.dashboard') }}"
|
||||
class="text-indigo-200 hover:text-white font-bold transition hidden sm:flex items-center">
|
||||
<span class="mr-1">⚙️</span> 后台
|
||||
后台
|
||||
</a>
|
||||
@endif
|
||||
|
||||
|
||||
Reference in New Issue
Block a user