更新内容

app/Http/Controllers/HomeController.php

@@ -14,7 +14,7 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Validator;
 use ZipArchive;
-
+use Illuminate\Support\Facades\Session;
 
 class HomeController extends Controller
 {
@@ -26,6 +26,11 @@ class HomeController extends Controller
         return view('index',['foldersTree' => $this->foldersTree]);
     }
 
+    public function main(Request $request)
+    {
+        return view('main',['foldersTree' => $this->foldersTree]);
+    }
+
     /*
      * 分类列表
      */
@@ -34,7 +39,7 @@ class HomeController extends Controller
         $search = $request->input('search', '');
         if ($search) {
             $search = '%' . $search . '%';
-            $albums = SiteAlbum::where('title', 'like', $search)->get();
+            $albums = SiteAlbum::where('title', 'like', $search)->orderBy('id', 'desc')->get();
             $title = '搜索结果';
             $folder_id = 0;
             $father_id = 0;
@@ -45,7 +50,7 @@ class HomeController extends Controller
             $folder_id = $request->input('fid',$this->getFoldersTreeFirstId());
             $father_id = $this->getFoldersTreeFatherId($folder_id);
             $folder = SiteAlbumFolder::find($folder_id);
-            $albums = SiteAlbum::where('folder_id', $folder_id)->get();
+            $albums = SiteAlbum::where('folder_id', $folder_id)->orderBy('id', 'desc')->get();
             $albums = $albums->toArray();
             $title = $folder->title;
         }
@@ -60,6 +65,9 @@ class HomeController extends Controller
             $cover = empty($cover) ? ['/static/images/noimg.jpg'] : $cover;
             $albums[$key]['cover'] = $cover;
         }
+        // 面包屑导航
+        $breadcrumb = getBreadcrumb($folder_id, $this->foldersTree);
+        $breadcrumb = implode(' / ', $breadcrumb);
 
         return view('gallery',
             [
@@ -67,7 +75,8 @@ class HomeController extends Controller
                 'folderName'=> $title,
                 'folder_id' => $folder_id,
                 'father_id' => $father_id,
-                'albums' => $albums
+                'albums' => $albums,
+                'breadcrumb' => $breadcrumb,
             ]
         );
     }
@@ -112,7 +121,10 @@ class HomeController extends Controller
                         $title = 'PDF';
                         break;
                 }
-                $showTabs[$key] = ['value'=>$value,'column'=>$column, 'title'=>$title];
+                $content = json_decode($album[$column], true);
+                if (empty($content) == false) {
+                    $showTabs[$key] = ['value'=>$value,'column'=>$column, 'title'=>$title];
+                }
             }
         }
 
@@ -138,6 +150,7 @@ class HomeController extends Controller
 
     public function downloadAll(Request $request)
     {
+        Session::put('downloadAllStatus', '1');
         $id = $request->input('id', 0);
         $tab = $request->input('tab', 'cover');
         $album = SiteAlbum::find($id);
@@ -170,19 +183,27 @@ class HomeController extends Controller
                     $zip->close();
 
                     // 提供 ZIP 文件下载
+                    Session::put('downloadAllStatus', '0');
                     return response()->download($zipPath, $zipFileName)->deleteFileAfterSend(true);
                 } else {
-                    return response()->json(['error' => '无法创建 ZIP 文件'], 500);
+                    Session::put('downloadAllStatus', '0');
+                    return response()->json(['error' => '系统正在下载中，请稍后再试','status'=> 500]);
                 }
             } else {
-                return response()->json(['error' => '未找到指定的 Tab 数据'], 404);
+                Session::put('downloadAllStatus', '0');
+                return response()->json(['error' => '未找到指定的 Tab 数据','status'=> 404]);
             }
         } else {
-            return response()->json(['error' => '未找到相册'], 404);
+            Session::put('downloadAllStatus', '0');
+            return response()->json(['error' => '未找到相册','status'=> 404]);
         }
     }
 
-
+    public function getDownloadAllStatus()
+    {
+        $status = Session::get('downloadAllStatus',0);
+        return response()->json(['status' => $status]);
+    }
 
     /*
      * 更新日志

app/helpers.php

@@ -12,3 +12,30 @@ if (! function_exists('ossUrl')) {
         return env('OSS_HOST'). $path;
     }
 }
+
+
+
+if (! function_exists('getBreadcrumb')) {
+    function getBreadcrumb($id, $data, $path = []) {
+        foreach ($data as $item) {
+            // 如果当前项的 id 匹配，将其 title 加入路径
+            if ($item['id'] == $id) {
+                $path[] = $item['title'];
+                return $path;
+            }
+
+            // 如果有子节点，递归查找
+            if (!empty($item['children'])) {
+                $result = getBreadcrumb($id, $item['children'], $path);
+                if (!empty($result)) {
+                    // 如果找到匹配的子节点，将当前项的 title 加入路径
+                    array_unshift($result, $item['title']);
+                    return $result;
+                }
+            }
+        }
+
+        // 如果没有找到匹配的 id，返回空数组
+        return [];
+    }
+}

public/static/css/main.css

@@ -1,3 +1,53 @@
+/* 更新日志*/
+.log-page {
+    margin-bottom: 50px;
+}
+.update-content {
+    margin-left: 100px;
+    padding: 10px 60px;
+}
+
+.update-log {
+    margin:auto;
+    margin-top: 10px;
+    max-width: 1200px;
+    background-color: #f9f9f9;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    color: #333;
+}
+.update-log .timestamp {
+    color: #555;
+    font-size: 12px;
+}
+.update-log .message {
+    margin-top: 5px;
+    font-size: 12px;
+    padding-left: 20px;
+    color: #555;
+}
+.update-log .highlight {
+    color: #007BFF;
+    text-decoration: none;
+    font-size: 12px;
+}
+.update-log .log-date {
+    border-bottom: 1px solid #ddd;
+    padding:10px 0;
+}
+.update-log .log-date a {
+    color: #555;
+}
+.update-log .log-line {
+    padding: 10px 0;
+    display: none;
+}
+.update-log .active {
+    display: block;
+}
+
 /* Fonts START */
 @font-face {
   font-family: 'Roboto';
@@ -70,7 +120,7 @@ body {
   line-height: 1.5;
   margin: 0;
   padding: 0;
-  min-width: 320px;
+  min-width: 310px;
   position: relative;
   font-weight: 300;
 }
@@ -148,11 +198,12 @@ a {
 
 .content {
   width: 100%;
-  padding-left: 85px;
+  padding-left: 307px;
 }
+
 .content-inner {
-  max-width: 1200px;
-  margin: 0 auto;
+    padding: 10px 60px;
+    margin: 0 auto;
 }
 
 
@@ -471,18 +522,18 @@ a {
   transform: translateX(-100%);
   overflow-y: auto;
   -ms-overflow-style: none;
-  scrollbar-width: none
+  scrollbar-width: none;
+    background-color:var(--color-def);
 }
 
 .menu-nav {
   padding: 50px;
-  padding-top: 150px;
+  padding-top: 120px;
   transition: 0.5s ease;
   opacity: 0;
   transform: translateX(-100%);
   z-index: 0;
   position: relative;
-
 }
 
 @media screen and (min-height: 610px) {
@@ -522,7 +573,7 @@ a {
   text-transform: uppercase;
   text-decoration: none;
   font-weight: 300;
-  font-size: 20px;
+  font-size: 18px;
   display: block;
   letter-spacing: 2px;
   position: relative;
@@ -1127,7 +1178,6 @@ a {
 /* Album START */
 .gallery-content {
   min-height: 1000px;
-  overflow: hidden;
 }
 .grid-album {
   display: none;
@@ -1138,26 +1188,27 @@ a {
 
 .album-tab {
   display: flex;
-  justify-content: center;
+  justify-content: left;
   flex-wrap: wrap;
   column-gap: 15px;
   margin-bottom: 30px;
 }
 
 .album-tab a {
-  border: 2px solid rgba(255, 255, 255, 0.7);
+  border: 2px solid #ccc;
   border-radius: 30px;
   display: inline-block;
   padding: 5px 25px;
   transition: 0.5s ease;
   margin-bottom: 15px;
+    color: #000;
 }
 .album-tab a:hover {
   background-color: #fff;
   color: #000;
 }
 .album-tab a.is-active {
-  background-color: #fff;
+  background-color: #e4e4e4;
   color: #000;
   font-weight: 500;
 }
@@ -1201,10 +1252,11 @@ a {
 }
 .grid-album .grid-sizer,
 .grid-album .grid-item {
-  width: calc(33% - 15px);
-  margin-bottom: 15px;
+    width: calc(25% - 15px);
+    margin-bottom: 15px;
 }
 
+
 .grid-album .grid-item {
   float: left;
   z-index: 0;
@@ -1246,7 +1298,6 @@ a {
 }
 
 .gallery-wrap {
-  margin-left: 100px;
   padding: 50px 0;
 }
 
@@ -1404,12 +1455,11 @@ a {
 /* Footer START */
 .site-footer {
   padding: 20px 20px 20px 110px;
-  background-color: var(--color-def);
-  filter: brightness(0.9)
+
 }
 .footer-copyright {
   text-align: center;
-  color: #bab7b7;
+  color: #2a2832;
 }
 /* Footer END */
 
@@ -1537,7 +1587,11 @@ a {
     font-size: 14px;
   }
   /* Footer 768 END */
+    .update-content {
+        padding: 10px 10px;
+    }
 
+    .album_table .void-img{width: 100px;}
 }
 
 @media screen and (max-width: 575px) {
@@ -1593,7 +1647,13 @@ a {
     padding: 40px 20px;
   }
   /* Contact page 575 END */
-
+    .update-content {
+        padding: 10px 10px;
+    }
+    .breadcrumb-box {
+        display: none;
+    }
+    .album_table .void-img{width: 100px;}
 }
 
 @media screen and (max-width: 480px) {
@@ -1642,7 +1702,11 @@ a {
 }
 /* Responsive END */
 .menu-nav .menu-nav-son {
-  display: none;
+  display: block;
+}
+
+.menu-nav .menu-nav-son .menu-nav-son2 {
+    display: none;
 }
 
 .menu-nav .son-active {
@@ -1652,8 +1716,9 @@ a {
 .menu-nav .menu-nav-son li {
   padding-left: 20px;
 }
+
 .menu-nav .menu-nav-son li a{
-  font-size: 18px;
+  font-size: 16px;
 }
 
 
@@ -1815,10 +1880,14 @@ a {
 .gallery-album-line {
   width: 100%;
   height: 20px;
-  border-bottom: 1px solid #ffffff;
+  border-bottom: 1px solid #ccc;
   margin-bottom: 30px;
   font-size: 12px;
-  text-align: left;
+  text-align: right;
+}
+
+.gallery-album-line a{
+    color: #000;
 }
 
 
@@ -1828,7 +1897,7 @@ a {
 }
 
 .gallery-album-line .gallery-album-prev {
-    color: #ffffff;
+    color: #000;
 }
 
 /*表格样式*/
@@ -1875,7 +1944,7 @@ table.album_table button:hover {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.89);
   justify-content: center;
   align-items: center;
   z-index: 1000;
@@ -1908,54 +1977,7 @@ video {
   margin-left: 10px;
 }
 
-/* 更新日志*/
-.log-page {
-  margin-bottom: 50px;
-}
-.update-content {
-  margin-left: 100px;
-  padding: 0px;
-}
-.update-log {
-  margin:auto;
-  margin-top: 10px;
-  max-width: 1200px;
-  background-color: #f9f9f9;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  font-family: Arial, sans-serif;
-  color: #333;
-}
-.update-log .timestamp {
-  color: #555;
-  font-size: 12px;
-}
-.update-log .message {
-  margin-top: 5px;
-  font-size: 12px;
-  padding-left: 20px;
-  color: #555;
-}
-.update-log .highlight {
-  color: #007BFF;
-  text-decoration: none;
-  font-size: 12px;
-}
-.update-log .log-date {
-  border-bottom: 1px solid #ddd;
-  padding:10px 0;
-}
-.update-log .log-date a {
-  color: #555;
-}
-.update-log .log-line {
-  padding: 10px 0;
-  display: none;
-}
-.update-log .active {
-  display: block;
-}
+
 
 
 .search-wrapper {
@@ -1968,9 +1990,9 @@ video {
 
 .search-box {
     position: relative;
-    float: right;
+    float: left;
     right: 10px;
-    width: 300px;
+    width: 290px;
     display: flex;
     align-items: center;
     background-color: #f9f9f9;
@@ -2001,3 +2023,50 @@ video {
 .search-box .fa-search:hover {
     color: #888;
 }
+
+.breadcrumb-box {
+    float: right;
+    min-width: 300px;
+    font-size: 16px;
+}
+
+
+#videoPlayer {
+    max-height: 600px;
+}
+
+/* iframe 主体内容 */
+.main-body{
+    background-color:#ffffff;
+}
+
+.main-body .album-thumb {
+    border:2px solid #ccc;
+    width: 100%;
+    min-height: 345px;
+}
+.main-body  {
+    color: #2a2832;
+}
+.main-body .album-name {
+    color: #2a2832;
+}
+.main-body .album-desc {
+    color: #2a2832;
+}
+.main-body .update-content {
+    margin-left: 0px;
+}
+.main-body .update-content .update-log {
+    max-width: none;
+}
+
+.is-hidden {
+    visibility: hidden;
+}
+
+
+
+
+
+

public/static/js/script.js

@@ -62,19 +62,29 @@ $(document).ready(function() {
 	// Banner END
 
 
+
 	// Menu START
 	$('body').on('click', '.hamburger-button', function(e) {
 		e.preventDefault();
-		hamburgerButton = $('.hamburger-button');
-		hamburgerMenuWrap = $('.menu-wrap');
-		hamburgerMenuItem = $('.menu-nav');
 
-		hamburgerMenuWrap.addClass('menu-active');
-		hamburgerMenuItem.addClass('menu-item-active');
-		menuOverlay = $('.menu-overlay');
-	//	menuOverlay.addClass('menu-overlay__active');
+            hamburger_click = 1;
+            hamburgerButton = $('.hamburger-button');
+            hamburgerMenuWrap = $('.menu-wrap');
+            hamburgerMenuItem = $('.menu-nav');
+
+            hamburgerMenuWrap.addClass('menu-active');
+            hamburgerMenuItem.addClass('menu-item-active');
+            menuOverlay = $('.menu-overlay');
+
+            if ( window.innerWidth <= 768) {
+                $(".content").css("padding-left","257px");
+            } else {
+                $(".content").css("padding-left","307px");
+            }
+
 	});
 
+    /*
 	$('.menu-close__wrap').on('mouseup', function(e) {
 		e.preventDefault();
 		menuClose = $('.menu-close');
@@ -93,7 +103,21 @@ $(document).ready(function() {
 			hamburgerMenuItem.removeClass('menu-item-active');
 			menuOverlay.removeClass('menu-overlay__active');
 		});
+
+        $(".content").css("padding-left","80px");
 	});
+	*/
+    $('.menu-close__wrap').on('click', function(e) {
+        e.preventDefault();
+        menuClose = $('.menu-close');
+        hamburgerMenuWrap = $('.menu-wrap');
+        hamburgerMenuItem = $('.menu-nav');
+        menuOverlay = $('.menu-overlay');
+        hamburgerMenuWrap.removeClass('menu-active');
+        hamburgerMenuItem.removeClass('menu-item-active');
+        menuOverlay.removeClass('menu-overlay__active');
+        $(".content").css("padding-left","80px");
+    });
 	// Menu END
 
 
@@ -201,18 +225,21 @@ $(document).ready(function() {
 	});
 	// Settings END
 
+    $('.menu-nav-item a').first().click(function () {
+        $(this).parent().find('.menu-nav-son').stop(true, true).slideToggle(200);
+    });
 
-	$('.menu-nav-item').hover(
+	$('.menu-nav-son-li').hover(
 		function () {
 			// 显示当前 li 的子菜单
-			$(this).find('.menu-nav-son').stop(true, true).slideDown(200);
+			$(this).find('.menu-nav-son2').stop(true, true).slideDown(200);
 		}
 	);
 
 	// 当鼠标离开 .menu-nav ul 时
-	$('.menu-nav-item').mouseleave(function () {
+	$('.menu-nav-son-li').mouseleave(function () {
 		// 隐藏所有子菜单
-		$('.menu-nav-son').stop(true, true).slideUp(0);
+		$('.menu-nav-son2').stop(true, true).slideUp(0);
 	});
 
 
@@ -357,25 +384,74 @@ $(document).ready(function() {
         setInterval(fetchUpdate, 20000); // 10000 毫秒 = 10 秒
     }
 
-
-    // 监听 .download-all 的点击事件
-    $('.download-all').on('click', function() {
+    var loadIndex = null;
+    var downdHref = function() {
         // 查找 .album-tab 中带有 is-active 类的 <a> 标签
         let activeTab = $('.album-tab a.is-active').attr('href');
-
         // 将 #album- 替换为空，得到 tab 变量
         let tab = activeTab.replace('#album-', '');
-
         // 获取当前 URL 中的 id 参数
         let currentUrl = window.location.href;
         let urlParams = new URLSearchParams(currentUrl.split('?')[1]);
         let id = urlParams.get('id');
-
         // 拼接新的 URL
-        let newUrl = `/download-all?id=${id}&tab=${tab}`;
-
+        let newUrl = `/download-all?id=${id}&tab=${tab}&refresh=true`;
         // 跳转到新 URL
         window.location.href = newUrl;
+    }
+
+    //ajax 定时请求 /download-status，直到返回状态为 0 时
+    var checkDownloadStatus = function() {
+        var intervalId = setInterval(function() {
+            $.ajax({
+                url: '/download-status',
+                method: 'GET',
+                dataType: 'json',
+                success: function(response) {
+                    if (response.status == 0) {
+                        clearInterval(intervalId);
+                        layer.close(loadIndex); // 关闭加载层
+                    }
+                }
+            });
+        }, 1000); // 每秒请求一次
+    }
+
+    // 监听 .download-all 的点击事件
+    $('.download-all').on('click', function() {
+        loadIndex = layer.load(2, { shade: [0.8, '#000'] }); // 参数1表示加载样式，shade
+        //jquery  请求 /download-status
+        $.ajax({
+            url: '/download-status',
+            method: 'GET',
+            dataType: 'json',
+            success: function(response) {
+                if (response.status == 0) {
+                    downdHref();
+                    checkDownloadStatus();
+                }
+            }
+        });
     });
 
+
+    if ( window.innerWidth <= 768) {
+        hamburgerMenuWrap = $('.menu-wrap');
+        hamburgerMenuWrap.removeClass('menu-active');
+        $(".content").css("padding-left","80px");
+    }
+
+
 });
+
+function changeIframeSrc(url) {
+    // 获取 iframe 元素
+    const iframe = document.getElementById('myFrame');
+    // 改变 iframe 的 src 属性
+    iframe.src = url;
+    if ( window.innerWidth <= 768) {
+        hamburgerMenuWrap = $('.menu-wrap');
+        hamburgerMenuWrap.removeClass('menu-active');
+        $(".content").css("padding-left","80px");
+    }
+}

resources/views/__sidebar.blade.php

@@ -1,24 +1,24 @@
 <div class="sidebar">
     <div class="menu-wrap @if ($active) menu-active @endif">
-        <a href="/" class="sidebar-logo">
-            <img src="/static/images/logo.svg" alt="Sylvia">
+        <a href="#" class="sidebar-logo">
+            <img src="/static/images/logo.png" alt="Sylvia" width="60px">
         </a>
         <nav class="menu-nav @if ($active) menu-item-active @endif">
             <ul>
-                <li><a href="/index">主页</a></li>
+{{--                <li><a href="/index">主页</a></li>--}}
                 @foreach ($foldersTree as $tree)
                 <li class="menu-nav-item">
-                    <a @if (empty($tree['children']) == false) href="javascript:void(0)" @else href="/gallery?fid={{ $tree['id'] }}" @endif>{{ $tree['title'] }}</a>
+                    <a @if (empty($tree['children']) == false) href="javascript:void(0)" @else href="#" onclick="changeIframeSrc('/gallery?fid={{ $tree['id'] }}')" @endif>{{ $tree['title'] }}</a>
                     @if (isset($tree['children']))
                     <ul class="menu-nav-son" @if($tree['checked'] == true)style="display: block;"@endif>
                         @foreach ($tree['children'] as $child)
-                        <li>
-                            <a @if (empty($child['children']) == false) href="javascript:void(0)" @else href="/gallery?fid={{ $child['id'] }}" @endif>{{ $child['title'] }}</a>
+                        <li class="menu-nav-son-li">
+                            <a @if (empty($child['children']) == false) href="javascript:void(0)" @else href="#" onclick="changeIframeSrc('/gallery?fid={{ $child['id'] }}')" @endif>{{ $child['title'] }}</a>
                             @if (isset($child['children']))
-                            <ul>
+                            <ul class="menu-nav-son2">
                                 @foreach ($child['children'] as $grandchild)
                                 <li>
-                                    <a href="/gallery?fid={{ $grandchild['id'] }}">{{ $grandchild['title'] }}</a>
+                                    <a href="#" onclick="changeIframeSrc('/gallery?fid={{ $grandchild['id'] }}')">{{ $grandchild['title'] }}</a>
                                 </li>
                                 @endforeach
                             </ul>
@@ -41,13 +41,13 @@
                 </a>
             </div>
             <div class="menu-close__wrap">
-                <a href="#" class="menu-close"><img style="transform: rotate(180deg);" src="/static/images/arrow-right.svg" alt=""></a>
+                <a href="javascript:void(0)" class="menu-close"><img style="transform: rotate(180deg);" src="/static/images/arrow-right.svg" alt=""></a>
             </div>
         </nav>
     </div>
 
     <a href="/" class="logo">
-        <img src="/static/images/logo.svg" alt="">
+        <img src="/static/images/logo.png" alt="">
     </a>
 
     <a href="#" class="hamburger-button">

resources/views/gallery-detail.blade.php

@@ -16,9 +16,11 @@
     <link rel="stylesheet" href="/static/css/font-awesome.min.css">
     <link rel="stylesheet" href="/static/css/magnific-popup.min.css">
     <link rel="stylesheet" href="/static/css/animate.min.css">
+    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
     <link rel="stylesheet" href="/static/css/main.css">
+
 </head>
-<body>
+<body class="main-body">
 
 <div class="menu-overlay"></div>
 
@@ -27,13 +29,13 @@
 
     <section class="gallery">
 
-        @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])
+{{--        @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])--}}
 
         <div class="update-content">
             <div class="update-log" >
                 <a href="/update-log">
-                    <div class="timestamp"><i class="fa fa-volume-up"></i> <span class="update-time">&nbsp;</span></div>
-                    <div class="message"><span class="user_name">&nbsp;</span> <span class="action">&nbsp;</span> <span class="model">&nbsp;</span>  <span class="highlight log-content">&nbsp;</span></div>
+                    <div class="timestamp"><i class="fa fa-volume-up"></i> <span class="update-time">&nbsp;</span> <span class="user_name">&nbsp;</span> <span class="action">&nbsp;</span> <span class="model">&nbsp;</span>  <span class="highlight log-content">&nbsp;</span></div>
+                    <div class="message"></div>
                 </a>
             </div>
         </div>
@@ -41,7 +43,7 @@
 
         <div class="content-page gallery-content gallery-wrap">
             <div class="content-inner">
-                <div class="title-wrapper text-center">
+                <div class="title-wrapper" style="margin-left: 0">
                     <h2 class="title">{{$album['title']}}</h2>
                     <div class="subtitle">
                         <p></p>
@@ -57,25 +59,26 @@
                 <!-- Album Animals START -->
                 <div class="gallery-album-line">
                     <a href="javascript:void(0);" class="download-all">下载全部 <i class="fa fa-download"></i></a>
-                    <a href="javascript:history.back();" class="gallery-album-prev"><i class="fa fa-angle-double-left"></i> 返回 </a>
                 </div>
 
                 @foreach($showTabs as $tab)
-                <div class="grid-album   @if($loop->first)gallery-album is-active @endif" id="album-{{$tab['column']}}">
-                    <div class="grid-sizer"></div>
+                <div class="grid-album @if($loop->first)gallery-album is-active @endif" id="album-{{$tab['column']}}">
                     @php
                         $content = json_decode($album[$tab['column']], true);
                     @endphp
                     @if (empty($content))
                         数据为空
+                    @else
+                        <div class="grid-sizer"></div>
                     @endif
+
                     @if ($tab['column'] == 'video' || $tab['column'] == 'pdf')
                         @if ($tab['column'] == 'video' && empty($content) == false)
                             <table class="album_table">
                                 <thead>
                                 <tr>
                                     <th>图片</th>
-                                    <th width="15%">操作</th>
+                                    <th>操作</th>
                                 </tr>
                                 </thead>
                                 <tbody>
@@ -83,7 +86,7 @@
                                 <tr>
                                     <td>
                                         <a href="{{ossUrl($item['cover'])}}" target="_blank">
-                                            <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_100"   width="100">
+                                            <img src="{{ossUrl($item['cover'])}}?x-oss-process=image/resize,w_260" class="void-img">
                                         </a>
                                     </td>
                                     <td>
@@ -120,7 +123,7 @@
                         @foreach($content as $item)
                         <div class="grid-item album-item">
                             <div class="album-thumb album-thumb-detail">
-                                <img  data-src="{{ossUrl($item)}}" src="{{ossUrl($item)}}?x-oss-process=image/resize,m_fill,w_380,h_380" alt="1">
+                                <img  data-src="{{ossUrl($item)}}" src="{{ossUrl($item)}}?x-oss-process=image/resize,w_380"  loading="lazy" alt="1">
                                 <div class="album-mask">
                                     <!-- 下载图标 -->
                                     <a href="{{ossUrl($item)}}" download class="download-icon" target="_blank">
@@ -149,11 +152,11 @@
     </section> <!-- end gallery -->
 </main>
 
-<footer class="site-footer">
-    <div class="footer-copyright">
-        © 2025 <strong>mietub</strong>. All rights reserved.
-    </div>
-</footer>
+{{--<footer class="site-footer">--}}
+{{--    <div class="footer-copyright">--}}
+{{--        © 2025 <strong>mietub</strong>. All rights reserved.--}}
+{{--    </div>--}}
+{{--</footer>--}}
 
 
 
@@ -165,6 +168,14 @@
 <script src="/static/js/magnific-popup.min.js"></script>
 <script src="/static/js/blazy.min.js"></script>
 <script src="/static/js/parazoom.min.js"></script>
+<script src="/static/js/layui/layui.js"></script>
 <script src="/static/js/script.js"></script>
+
+
+<script>
+    $(document).ready(function() {
+        $('.grid-album:first').addClass('');
+    });
+</script>
 </body>
 </html>

resources/views/gallery.blade.php

@@ -18,7 +18,7 @@
     <link rel="stylesheet" href="/static/css/animate.min.css">
     <link rel="stylesheet" href="/static/css/main.css">
 </head>
-<body>
+<body class="main-body">
 
 <div class="menu-overlay"></div>
 
@@ -27,18 +27,17 @@
 
     <section class="gallery">
 
-        @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])
+{{--        @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])--}}
 
         <div class="update-content">
             <div class="update-log" >
                 <a href="/update-log">
-                    <div class="timestamp"><i class="fa fa-volume-up"></i> <span class="update-time">&nbsp;</span></div>
-                    <div class="message"><span class="user_name">&nbsp;</span>   <span class="action">&nbsp;</span> <span class="model">&nbsp;</span>  <span class="highlight log-content">&nbsp;</span></div>
+                    <div class="timestamp"><i class="fa fa-volume-up"></i> <span class="update-time">&nbsp;</span> <span class="user_name">&nbsp;</span>   <span class="action">&nbsp;</span> <span class="model">&nbsp;</span>  <span class="highlight log-content">&nbsp;</span></div>
                 </a>
             </div>
         </div>
 
-        <div class="content-page gallery-content gallery-wrap">
+        <div class="content-page gallery-content gallery-wrap ">
             <div class="content-inner">
 
                 <div class="title-wrapper text-center">
@@ -48,26 +47,29 @@
                     </div>
                 </div>
 
-                <form action="/gallery" method="get" enctype="multipart/form-data">
+                <form action="/gallery" method="get" enctype="multipart/form-data" id="search-form">
                 <div class="search-wrapper">
                     <div class="search-box">
                         <input type="text" placeholder="搜索..." name="search" value="{{request('search')}}">
                         <i class="fa fa-search"></i>
                     </div>
+                    <div class="breadcrumb-box">
+                        {{$breadcrumb}}
+                    </div>
                 </div>
                 </form>
 
                 <!-- Album Animals START -->
-                <div class="grid-album is-active gallery-album" >
-                    <div class="grid-sizer"></div>
+                <div class="grid-album gallery-album is-active" >
                     @if (empty($albums) == true)
                         数据为空
                     @else
+                        <div class="grid-sizer"></div>
                         @foreach($albums as $album)
                         <div class="grid-item album-item">
                             <a href="/detail?id={{$album['id']}}">
                                 <div class="album-thumb">
-                                    <img src="{{ossUrl($album['cover'][0])}}?x-oss-process=image/resize,m_fill,w_380,h_380" data-src="{{ossUrl($album['cover'][0])}}?x-oss-process=image/resize,m_fill,w_380,h_380" class="" alt="Graceful Zebra">
+                                    <img src="{{ossUrl($album['cover'][0])}}?x-oss-process=image/resize,m_fill,w_380,h_380" data-src="{{ossUrl($album['cover'][0])}}?x-oss-process=image/resize,m_fill,w_380,h_380" class="" loading="lazy" alt="Graceful Zebra">
                                 </div>
                                 <div class="album-name" title="{{$album['title']}}">{{$album['title']}}</div>
                                 <div class="album-desc" title="型号：{{$album['model']}}">
@@ -85,11 +87,11 @@
 
 </main>
 
-<footer class="site-footer">
-    <div class="footer-copyright">
-        © 2025 <strong>mietub</strong>. All rights reserved.
-    </div>
-</footer>
+{{--<footer class="site-footer">--}}
+{{--    <div class="footer-copyright">--}}
+{{--        © 2025 <strong>mietub</strong>. All rights reserved.--}}
+{{--    </div>--}}
+{{--</footer>--}}
 
 
 
@@ -102,5 +104,16 @@
 <script src="/static/js/blazy.min.js"></script>
 <script src="/static/js/parazoom.min.js"></script>
 <script src="/static/js/script.js"></script>
+<script>
+    $(document).ready(function() {
+        // 当点击按钮时，为 .grid-album.gallery-album 添加 is-active 类
+        $('.grid-album.gallery-album').addClass('');
+
+        $('.fa-search').on('click', function () {
+            // 触发表单提交
+            $('#search-form').submit();
+        });
+    });
+</script>
 </body>
 </html>

resources/views/index.blade.php

@@ -25,11 +25,11 @@
 
         @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>false])
 
-        <div class="prelodaer-wrap">
-            <div class="preloader-item">
-                <img src="/static/images/logo-preloader.svg" alt="Preloader">
-            </div>
-        </div>
+{{--        <div class="prelodaer-wrap">--}}
+{{--            <div class="preloader-item">--}}
+{{--                <img src="/static/images/logo-preloader.svg" alt="Preloader">--}}
+{{--            </div>--}}
+{{--        </div>--}}
 
         <div class="content home-content">
 

resources/views/login.blade.php

@@ -7,7 +7,7 @@
     <title>相册系统登录</title>
     <style>
         body {
-            background-color: #2B2C30;
+            background-color: #ed9027;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -42,7 +42,10 @@
             margin: 10px 0;
             border: 1px solid #ccc;
             border-radius: 4px;
+            box-sizing: border-box;
+            transition: border-color 0.3s ease;
         }
+
         .login-container button {
             margin-top: 20px;
             width: 40%;
@@ -53,9 +56,16 @@
             border-radius: 4px;
             cursor: pointer;
         }
+
         .login-container button:hover {
             background-color: #45a049;
         }
+
+        /* 取消默认 focus 样式并自定义 */
+        .login-container input:focus {
+            outline: none; /* 取消默认的蓝色轮廓 */
+            border-color: #fbb141; /* 自定义聚焦时的边框颜色 */
+        }
     </style>
 </head>
 <body>
@@ -95,7 +105,7 @@
                 },
                 success: function(res) {
                     if (res.status == 'success') {
-                        window.location.href = '/index';
+                        window.location.href = '/main';
                     } else {
                         $('#errorMsg').html(res.message);
                     }

resources/views/main.blade.php

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>相册</title>
+    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
+    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
+    <link rel="stylesheet" href="/static/css/magnific-popup.min.css">
+    <link rel="stylesheet" href="/static/css/animate.min.css">
+    <link rel="stylesheet" href="/static/css/main.css">
+
+    <script src="/static/js/jquery-3.7.0.min.js"></script>
+    <script src="/static/js/swiper-bundle.min.js"></script>
+    <script src="/static/js/wow.min.js"></script>
+    <script src="/static/js/masonry.pkgd.min.js"></script>
+    <script src="/static/js/imagesloaded.pkgd.min.js"></script>
+    <script src="/static/js/magnific-popup.min.js"></script>
+    <script src="/static/js/blazy.min.js"></script>
+    <script src="/static/js/parazoom.min.js"></script>
+    <script src="/static/js/script.js"></script>
+</head>
+<body>
+
+<div class="menu-overlay"></div>
+
+<main class="main">
+
+    <div class="home def-row">
+
+        @include('__sidebar', ['foldersTree'=> $foldersTree,'active'=>true])
+
+
+        <div class="content home-content">
+            <iframe id="myFrame" src="/gallery"  style="width: 100%; height: 99%; border: none;overflow: hidden;" />
+        </div><!-- end home-content -->
+    </div><!-- end home -->
+</main>
+
+</body>
+</html>

routes/web.php

@@ -17,11 +17,13 @@ use Illuminate\Support\Facades\Route;
 Route::get('/', [AuthController::class, 'getLogin']);
 Route::post('/post-login', [AuthController::class, 'postLogin']);
 Route::get('/index', [HomeController::class, 'index']);
+Route::get('/main', [HomeController::class, 'main']);
 Route::get('/gallery', [HomeController::class, 'gallery']);
 Route::get('/next-log', [HomeController::class, 'nextLog']);
 Route::get('/update-log', [HomeController::class, 'updateLog']);
 Route::get('/detail', [HomeController::class, 'detail']);
 Route::get('/download-all', [HomeController::class, 'downloadAll']);
+Route::get('/download-status', [HomeController::class, 'getDownloadAllStatus']);