✨ 支持查看图片详细信息
This commit is contained in:
Wisp X
@@ -61,12 +61,29 @@ class ImageController extends Controller
|
||||
$image->human_date = $image->created_at->diffForHumans();
|
||||
$image->date = $image->created_at->format('Y-m-d H:i:s');
|
||||
$image->append(['url', 'filename', 'links'])->setVisible([
|
||||
'id', 'filename', 'url', 'human_date', 'date', 'human_date', 'width', 'height', 'links'
|
||||
'id', 'filename', 'url', 'human_date', 'date', 'width', 'height', 'links'
|
||||
]);
|
||||
});
|
||||
return $this->success('success', compact('images'));
|
||||
}
|
||||
|
||||
public function image(Request $request): Response
|
||||
{
|
||||
/** @var User $user */
|
||||
$user = Auth::user();
|
||||
/** @var Image $image */
|
||||
if (! $image = $user->images()->find($request->route('id'))) {
|
||||
return $this->error('未找到该图片');
|
||||
}
|
||||
$image->strategy->setVisible(['name']);
|
||||
$image->album?->setVisible(['name']);
|
||||
$image->append(['url', 'filename', 'links'])->setVisible([
|
||||
'id', 'filename', 'origin_name', 'url', 'width', 'height', 'size', 'mimetype', 'md5', 'sha1', 'permission',
|
||||
'strategy', 'album', 'uploaded_ip', 'links', 'created_at'
|
||||
]);
|
||||
return $this->success('success', compact('image'));
|
||||
}
|
||||
|
||||
public function permission(Request $request): Response
|
||||
{
|
||||
/** @var User $user */
|
||||
|
||||
@@ -64,7 +64,6 @@ class Image extends Model
|
||||
'user_id',
|
||||
'album_id',
|
||||
'strategy_id',
|
||||
'uploaded_ip',
|
||||
'is_unhealthy',
|
||||
'permission',
|
||||
];
|
||||
|
||||
Vendored
+197
@@ -724,6 +724,18 @@ select {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.mx-2 {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.my-4 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.ml-3 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
@@ -790,9 +802,15 @@ select {
|
||||
.-mr-2 {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -802,6 +820,9 @@ select {
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -844,6 +865,9 @@ select {
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
.min-h-\[150px\] {
|
||||
min-height: 150px;
|
||||
}
|
||||
@@ -892,6 +916,12 @@ select {
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
.w-64 {
|
||||
width: 16rem;
|
||||
}
|
||||
.max-w-xl {
|
||||
max-width: 36rem;
|
||||
}
|
||||
@@ -907,6 +937,9 @@ select {
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -925,6 +958,14 @@ select {
|
||||
.origin-top-left {
|
||||
transform-origin: top left;
|
||||
}
|
||||
.translate-y-4 {
|
||||
--tw-translate-y: 1rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.translate-y-0 {
|
||||
--tw-translate-y: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.scale-95 {
|
||||
--tw-scale-x: .95;
|
||||
--tw-scale-y: .95;
|
||||
@@ -995,6 +1036,9 @@ select {
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1097,6 +1141,9 @@ select {
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.break-words {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
@@ -1227,6 +1274,14 @@ select {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-red-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-red-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-opacity-75 {
|
||||
--tw-bg-opacity: 0.75;
|
||||
}
|
||||
@@ -1341,9 +1396,24 @@ select {
|
||||
.pb-1 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.pb-20 {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
.pt-5 {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
.pb-4 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.align-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.font-sans {
|
||||
font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
@@ -1389,6 +1459,9 @@ select {
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.font-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1398,6 +1471,9 @@ select {
|
||||
.leading-7 {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.leading-6 {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.tracking-wider {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@@ -1526,6 +1602,11 @@ select {
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.shadow-xl {
|
||||
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
@@ -1626,6 +1707,14 @@ select {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:bg-red-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:bg-gray-50:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:text-gray-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
@@ -1703,6 +1792,14 @@ select {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
|
||||
}
|
||||
.focus\:ring-red-500:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
|
||||
}
|
||||
.focus\:ring-indigo-500:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
|
||||
}
|
||||
.focus\:ring-opacity-50:focus {
|
||||
--tw-ring-opacity: 0.5;
|
||||
}
|
||||
@@ -1752,6 +1849,16 @@ select {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.sm\:my-8 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.sm\:mx-0 {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.sm\:ml-64 {
|
||||
margin-left: 16rem;
|
||||
}
|
||||
@@ -1764,10 +1871,26 @@ select {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.sm\:ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.sm\:ml-3 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.sm\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sm\:inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sm\:flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -1776,6 +1899,14 @@ select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sm\:h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sm\:h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.sm\:min-h-\[340px\] {
|
||||
min-height: 340px;
|
||||
}
|
||||
@@ -1784,14 +1915,55 @@ select {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.sm\:w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sm\:w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.sm\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.sm\:max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.sm\:max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.sm\:flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.sm\:translate-y-0 {
|
||||
--tw-translate-y: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.sm\:scale-95 {
|
||||
--tw-scale-x: .95;
|
||||
--tw-scale-y: .95;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.sm\:scale-100 {
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.sm\:flex-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.sm\:items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sm\:items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1812,6 +1984,14 @@ select {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\:p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sm\:p-6 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
@@ -1826,11 +2006,28 @@ select {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.sm\:pb-4 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sm\:text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sm\:align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sm\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.sm\:text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.sm\:shadow-none {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
|
||||
Vendored
+6
-6
@@ -271,16 +271,16 @@ progress::-webkit-progress-value {
|
||||
cursor: not-allowed;
|
||||
color: grey;
|
||||
}
|
||||
#photos-grid a:hover,
|
||||
#photos-grid a.ds-selected {
|
||||
#images-grid a:hover,
|
||||
#images-grid a.ds-selected {
|
||||
outline-color: #3b82f6;
|
||||
}
|
||||
#photos-grid a:hover .photo-selector,
|
||||
#photos-grid a.ds-selected .photo-selector {
|
||||
#images-grid a:hover .image-selector,
|
||||
#images-grid a.ds-selected .image-selector {
|
||||
display: block;
|
||||
}
|
||||
#photos-grid a:hover.ds-selected .photo-selector i,
|
||||
#photos-grid a.ds-selected.ds-selected .photo-selector i {
|
||||
#images-grid a:hover.ds-selected .image-selector i,
|
||||
#images-grid a.ds-selected.ds-selected .image-selector i {
|
||||
border-color: white;
|
||||
color: #0061ff;
|
||||
}
|
||||
|
||||
@@ -73,16 +73,16 @@ progress::-webkit-progress-value {
|
||||
}
|
||||
|
||||
// 我的图片
|
||||
#photos-grid {
|
||||
#images-grid {
|
||||
a:hover, a.ds-selected {
|
||||
outline-color: #3b82f6;
|
||||
|
||||
.photo-selector {
|
||||
.image-selector {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.ds-selected {
|
||||
.photo-selector {
|
||||
.image-selector {
|
||||
i {
|
||||
border-color: white;
|
||||
color: #0061ff;
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
<a data-operate="movements" class="hidden text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">移动到相册</a>
|
||||
<a data-operate="remove" class="hidden text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">移出当前相册</a>
|
||||
<a data-operate="permission" class="hidden text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">设置可见性</a>
|
||||
<a data-operate="detail" class="hidden text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">详细信息</a>
|
||||
<a data-operate="rename" class="hidden text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">重命名</a>
|
||||
<a data-operate="delete" class="hidden text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">删除</a>
|
||||
</div>
|
||||
@@ -28,6 +29,7 @@
|
||||
<x-dropdown-link data-operate="movements" class="hidden" href="javascript:void(0)" @click="open = false">移动到相册</x-dropdown-link>
|
||||
<x-dropdown-link data-operate="remove" class="hidden" href="javascript:void(0)" @click="open = false">移出当前相册</x-dropdown-link>
|
||||
<x-dropdown-link data-operate="permission" class="hidden" href="javascript:void(0)" @click="open = false">设置可见性</x-dropdown-link>
|
||||
<x-dropdown-link data-operate="detail" class="hidden" href="javascript:void(0)" @click="open = false">详细信息</x-dropdown-link>
|
||||
<x-dropdown-link data-operate="rename" class="hidden" href="javascript:void(0)" @click="open = false">重命名</x-dropdown-link>
|
||||
<x-dropdown-link data-operate="delete" class="hidden" href="javascript:void(0)" @click="open = false">删除</x-dropdown-link>
|
||||
</x-slot>
|
||||
@@ -76,12 +78,12 @@
|
||||
</div>
|
||||
<div class="relative inset-0 h-full overflow-hidden select-none">
|
||||
<!-- content -->
|
||||
<div id="photos-scroll" class="absolute inset-0 overflow-y-scroll dragselect">
|
||||
<div id="photos-grid" class="dragselect"></div>
|
||||
<div id="images-scroll" class="absolute inset-0 overflow-y-scroll dragselect">
|
||||
<div id="images-grid" class="dragselect"></div>
|
||||
</div>
|
||||
<!-- right drawer -->
|
||||
<div id="drawer-mask" class="absolute hidden inset-0 bg-gray-500 bg-opacity-50 z-[2]" onclick="drawer.close()"></div>
|
||||
<div id="drawer" class="absolute bg-white w-52 md:w-72 top-0 -right-[1000px] bottom-0 z-[2] flex flex-col transition-all duration-300">
|
||||
<div id="drawer" class="absolute bg-white w-64 md:w-72 top-0 -right-[1000px] bottom-0 z-[2] flex flex-col transition-all duration-300">
|
||||
<div class="flex justify-between items-center text-md px-3 py-1 border-b">
|
||||
<span class="text-gray-600 truncate" id="drawer-title"></span>
|
||||
<a href="javascript:drawer.close()" class="p-2"><i class="fas fa-times text-blue-500"></i></a>
|
||||
@@ -90,14 +92,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="photos-item-tpl">
|
||||
<a href="javascript:void(0)" data-id="__id__" data-json='__json__' class="photos-item relative cursor-default rounded outline outline-2 outline-offset-2 outline-transparent">
|
||||
<div class="photo-selector absolute z-[2] top-0 right-0 overflow-hidden cursor-pointer sm:hidden group-hover:block">
|
||||
<script type="text/html" id="images-item-tpl">
|
||||
<a href="javascript:void(0)" data-id="__id__" data-json='__json__' class="images-item relative cursor-default rounded outline outline-2 outline-offset-2 outline-transparent">
|
||||
<div class="image-selector absolute z-[2] top-0 right-0 overflow-hidden cursor-pointer sm:hidden group-hover:block">
|
||||
<div class="p-1 text-xl sm:text-2xl">
|
||||
<i class="fas fa-check-circle block rounded-full bg-white text-white border border-gray-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo-mask absolute left-0 right-0 bottom-0 h-20 z-[1] bg-gradient-to-t from-black" onclick="$(this).siblings('img').trigger('click')">
|
||||
<div class="image-mask absolute left-0 right-0 bottom-0 h-20 z-[1] bg-gradient-to-t from-black" onclick="$(this).siblings('img').trigger('click')">
|
||||
<div class="absolute left-2 bottom-2 text-white z-[2] w-[90%]">
|
||||
<p class="text-sm truncate filename" title="__name__">__name__</p>
|
||||
<p class="text-xs date" title="__human_date__">__date__</p>
|
||||
@@ -142,6 +144,59 @@
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="image-detail-tpl">
|
||||
<div class="my-4 px-4 space-y-3">
|
||||
<div>
|
||||
<span class="text-sm">相册名称</span>
|
||||
<p class="my-2 break-words text-gray-700">__album_name__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">使用策略</div>
|
||||
<p class="my-2 break-words text-gray-600">__strategy_name__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">图片名称</div>
|
||||
<p class="my-2 break-words text-gray-600">__filename__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">图片原始名称</div>
|
||||
<p class="my-2 break-words text-gray-600">__origin_name__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">图片大小</div>
|
||||
<p class="my-2 break-words text-gray-600">__size__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">图片类型</div>
|
||||
<p class="my-2 break-words text-gray-600">__mimetype__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">尺寸</div>
|
||||
<p class="my-2 break-words text-gray-600">__width__ * __height__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">MD5</div>
|
||||
<p class="my-2 break-words text-gray-600">__md5__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">SHA-128</div>
|
||||
<p class="my-2 break-words text-gray-600">__sha1__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">权限</div>
|
||||
<p class="my-2 break-words text-gray-600">__permission__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">上传 IP</div>
|
||||
<p class="my-2 break-words text-gray-600">__uploaded_ip__</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm">上传时间</div>
|
||||
<p class="my-2 break-words text-gray-600">__created_at__</p>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
@push('scripts')
|
||||
<script src="{{ asset('js/justified-gallery/jquery.justifiedGallery.min.js') }}"></script>
|
||||
<script src="{{ asset('js/viewer-js/viewer.min.js') }}"></script>
|
||||
@@ -161,22 +216,22 @@
|
||||
let selectedAlbum = {}; // 选择的相册
|
||||
|
||||
const HEADER_TITLE = '#header-title';
|
||||
const PHOTOS_SCROLL = '#photos-scroll';
|
||||
const PHOTOS_GRID = '#photos-grid';
|
||||
const PHOTOS_ITEM = '.photos-item';
|
||||
const IMAGES_SCROLL = '#images-scroll';
|
||||
const IMAGES_GRID = '#images-grid';
|
||||
const IMAGES_ITEM = '.images-item';
|
||||
const ALBUM_ITEM = '.albums-item';
|
||||
|
||||
const $headerTitle = $(HEADER_TITLE);
|
||||
const $photos = $(PHOTOS_GRID);
|
||||
const $photos = $(IMAGES_GRID);
|
||||
const $drawer = $("#drawer");
|
||||
const $drawerMask = $('#drawer-mask');
|
||||
const viewer = new Viewer(document.getElementById('photos-grid'), {});
|
||||
const viewer = new Viewer(document.getElementById('images-grid'), {});
|
||||
const drawer = {
|
||||
open(title, $content, callback) {
|
||||
open(title, content, callback) {
|
||||
$drawerMask.fadeIn();
|
||||
$drawer.css('right', 0);
|
||||
$drawer.find('#drawer-title').html(title);
|
||||
$drawer.find('#drawer-content').html($content);
|
||||
$drawer.find('#drawer-content').html(content);
|
||||
callback && callback();
|
||||
},
|
||||
close(callback) {
|
||||
@@ -184,9 +239,9 @@
|
||||
$drawer.css('right', '-1000px');
|
||||
callback && callback();
|
||||
},
|
||||
toggle(title, $content, callback) {
|
||||
toggle(title, content, callback) {
|
||||
if ($drawerMask.is(':hidden')) {
|
||||
this.open(title, $content, callback);
|
||||
this.open(title, content, callback);
|
||||
} else {
|
||||
this.close(callback);
|
||||
}
|
||||
@@ -195,7 +250,7 @@
|
||||
|
||||
$photos.justifiedGallery(gridConfigs);
|
||||
|
||||
const imagesInfinite = utils.infiniteScroll(PHOTOS_SCROLL, {
|
||||
const imagesInfinite = utils.infiniteScroll(IMAGES_SCROLL, {
|
||||
url: '{{ route('user.images') }}',
|
||||
classes: ['dragselect'],
|
||||
success: function (response) {
|
||||
@@ -210,7 +265,7 @@
|
||||
|
||||
let html = '';
|
||||
for (const i in images) {
|
||||
html += $('#photos-item-tpl').html()
|
||||
html += $('#images-item-tpl').html()
|
||||
.replace(/__id__/g, images[i].id)
|
||||
.replace(/__name__/g, images[i].filename)
|
||||
.replace(/__human_date__/g, images[i].human_date)
|
||||
@@ -222,7 +277,7 @@
|
||||
}
|
||||
|
||||
$photos.append(html);
|
||||
ds.setSelectables($photos.find(PHOTOS_ITEM));
|
||||
ds.setSelectables($photos.find(IMAGES_ITEM));
|
||||
},
|
||||
complete: function () {
|
||||
if ($photos.html() !== '') {
|
||||
@@ -327,7 +382,7 @@
|
||||
|
||||
$albums.off('click', '.delete').on('click', '.delete', function (e) {
|
||||
e.stopPropagation();
|
||||
swal.fire({
|
||||
Swal.fire({
|
||||
title: '确认删除该相册?',
|
||||
text: "删除后相册中的图片将会被移出。",
|
||||
icon: 'warning',
|
||||
@@ -403,13 +458,13 @@
|
||||
$(document).keydown(e => {
|
||||
if (e.keyCode === 65 && (e.altKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
ds.setSelection($(PHOTOS_ITEM));
|
||||
ds.setSelection($(IMAGES_ITEM));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
const ds = new DragSelect({
|
||||
area: $(PHOTOS_SCROLL).get(0),
|
||||
area: $(IMAGES_SCROLL).get(0),
|
||||
keyboardDrag: false,
|
||||
});
|
||||
|
||||
@@ -426,7 +481,7 @@
|
||||
operates = ['refresh'];
|
||||
}
|
||||
if (selected.length === 1) {
|
||||
operates = ['refresh', 'movements', 'permission', 'rename', 'delete'];
|
||||
operates = ['refresh', 'movements', 'permission', 'detail', 'rename', 'delete'];
|
||||
}
|
||||
if (selected.length > 1) {
|
||||
operates = ['refresh', 'movements', 'permission', 'delete'];
|
||||
@@ -449,7 +504,7 @@
|
||||
ds.subscribe('elementselect', _ => bindOperates());
|
||||
ds.subscribe('elementunselect', _ => bindOperates());
|
||||
|
||||
$photos.on('click', '.photo-selector', function () {
|
||||
$photos.on('click', '.image-selector', function () {
|
||||
ds.toggleSelection($(this).closest('a'));
|
||||
bindOperates();
|
||||
})
|
||||
@@ -611,6 +666,31 @@
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
detail(e) {
|
||||
let item = $(e).data('json');
|
||||
axios.get(`/user/images/${item.id}`).then(response => {
|
||||
if (response.data.status) {
|
||||
let image = response.data.data.image;
|
||||
let content = $('#image-detail-tpl').html()
|
||||
.replace(/__album_name__/g, image.album ? data.album.name : '无')
|
||||
.replace(/__strategy_name__/g, image.strategy.name)
|
||||
.replace(/__filename__/g, image.filename)
|
||||
.replace(/__origin_name__/g, image.origin_name)
|
||||
.replace(/__size__/g, utils.formatSize(image.size))
|
||||
.replace(/__mimetype__/g, image.mimetype)
|
||||
.replace(/__width__/g, image.width)
|
||||
.replace(/__height__/g, image.height)
|
||||
.replace(/__md5__/g, image.md5)
|
||||
.replace(/__sha1__/g, image.sha1)
|
||||
.replace(/__permission__/g, image.permission === 1 ? '公开' : '私有')
|
||||
.replace(/__uploaded_ip__/g, image.uploaded_ip)
|
||||
.replace(/__created_at__/g, image.created_at)
|
||||
drawer.open(item.filename, content);
|
||||
} else {
|
||||
toastr.error(response.data.message);
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
// right click actions
|
||||
@@ -678,7 +758,7 @@
|
||||
action: _ => methods.remove(),
|
||||
visible: _ => selectedAlbum.id !== undefined,
|
||||
},
|
||||
detail: {text: '详细信息', action: e => {}},
|
||||
detail: {text: '详细信息', action: e => methods.detail(e)},
|
||||
delete: {
|
||||
text: '删除',
|
||||
action: _ => methods.delete(),
|
||||
@@ -688,13 +768,13 @@
|
||||
action: _ => methods.visibility(),
|
||||
},
|
||||
};
|
||||
// right click 'photos scroll' container
|
||||
context.attach(PHOTOS_SCROLL, {
|
||||
// right click 'images scroll' container
|
||||
context.attach(IMAGES_SCROLL, {
|
||||
data: [actions.refresh],
|
||||
beforeOpen: () => ds.clearSelection(),
|
||||
});
|
||||
// right click image
|
||||
context.attach(PHOTOS_ITEM, {
|
||||
context.attach(IMAGES_ITEM, {
|
||||
data: [
|
||||
{header: '图片操作'},
|
||||
actions.refresh,
|
||||
@@ -704,6 +784,7 @@
|
||||
actions.movements,
|
||||
actions.remove,
|
||||
actions.visibility,
|
||||
actions.detail,
|
||||
{divider: true},
|
||||
actions.rename,
|
||||
actions.delete,
|
||||
@@ -746,6 +827,9 @@
|
||||
case 'permission': // 设置可见性
|
||||
methods.visibility();
|
||||
break;
|
||||
case 'detail':
|
||||
methods.detail(selected[0]);
|
||||
break;
|
||||
case 'delete': // 删除
|
||||
methods.delete();
|
||||
break;
|
||||
|
||||
@@ -25,6 +25,7 @@ Route::group(['middleware' => ['auth']], function () {
|
||||
Route::get('/images', [ImageController::class, 'index'])->name('images');
|
||||
Route::group(['prefix' => 'user'], function () {
|
||||
Route::get('images', [ImageController::class, 'images'])->name('user.images');
|
||||
Route::get('images/{id}', [ImageController::class, 'image'])->name('user.image');
|
||||
Route::delete('images', [ImageController::class, 'delete'])->name('user.images.delete');
|
||||
Route::put('images/permission', [ImageController::class, 'permission'])->name('user.images.permission');
|
||||
Route::put('images/rename', [ImageController::class, 'rename'])->name('user.images.rename');
|
||||
|
||||
Reference in New Issue
Block a user