deployer/cafeg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat. spinners 旋轉器

Browse Source
This commit is contained in:
ukyo 2025-01-24 15:28:02 +08:00
parent 1858c5d70b
commit d99e3bb24c
3 changed files with 82 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/menu/verticalMenu.json
View File

@ -2,12 +2,12 @@
{
"name": "首 頁",
"icon": "menu-icon tf-icons ri-home-smile-line",
"slug": "dashboard",
"slug": "admin/memberlist",
"submenu": [
{
"url": "admin/memberlist",
"name": "會員列表",
"slug": "dashboard-analytics"
"slug": "memberlist"
}
]
@ -15,17 +15,17 @@
{
"name": "設 定",
"icon": "menu-icon tf-icons ri-settings-line",
"slug": "setting",
"slug": "admin/setting/*",
"submenu": [
{
"url": "admin/setting/promocode",
"name": "優惠代碼",
"slug": "setting-promocode"
"slug": "admin/setting"
},
{
"url": "admin/setting/adminlist",
"name": "後台登入人員",
"slug": "setting-adminlist"
"slug": "setting.adminlist"
}
]
},

65
resources/views/layouts/admin_app.blade.php
View File

@ -1,8 +1,11 @@
<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr" data-theme="theme-default" data-assets-path="{{ asset('assets') }}/" data-template="vertical-menu-template-starter" data-style="light">
<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
data-theme="theme-default" data-assets-path="{{ asset('assets') }}/" data-template="vertical-menu-template-starter"
data-style="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="csrf-token" content="{{ csrf_token() }}">
@ -17,7 +20,8 @@
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap"
rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('assets/vendor/fonts/remixicon/remixicon.css') }}" />
@ -27,7 +31,8 @@
<!-- Core CSS -->
<link rel="stylesheet" href="{{ asset('assets/vendor/css/rtl/core.css') }}" class="template-customizer-core-css" />
<link rel="stylesheet" href="{{ asset('assets/vendor/css/rtl/theme-default.css') }}" class="template-customizer-theme-css" />
<link rel="stylesheet" href="{{ asset('assets/vendor/css/rtl/theme-default.css') }}"
class="template-customizer-theme-css" />
<link rel="stylesheet" href="{{ asset('assets/css/demo.css') }}" />
<!-- Vendors CSS -->
@ -69,13 +74,22 @@
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
<div class="container-xxl flex-grow-1 container-p-y" id ="spinner-div">
@yield('content')
<div class="card mb-6">
<div id="global-spinner" class="spinner-border spinner-border-lg text-secondary"
role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<!-- / Content -->
@include('layouts.admin_footer')
<div class="content-backdrop fade"></div>
</div>
<!-- Content wrapper -->
@ -113,12 +127,45 @@
@yield('scripts')
<script>
//doucument ready functions
$(document).ready(function() {
console.log('Document ready');
});
// 全局 Spinner 控制
$(document).ready(function () {
console.log("Document ready");
// 顯示 Spinner
function showSpinner() {
console.log("spinner 显示");
$("#spinner-div").show();
$("#global-spinner").fadeIn();
}
// 隱藏 Spinner
function hideSpinner() {
console.log("spinner 隐藏");
$("#global-spinner").fadeOut();
$("#spinner-div").hide();
}
// 初始化時顯示 Spinner
showSpinner();
// AJAX 請求期間的 Spinner 控制
$(document).ajaxStart(function () {
console.log("AJAX 开始");
showSpinner();
}).ajaxStop(function () {
console.log("AJAX 停止");
hideSpinner();
});
// 當所有資源加載完成後，隱藏 Spinner
$(window).on("load", function () {
console.log("Window loaded");
hideSpinner();
});
});
</script>
</body>
</html>
<script></script>

57
resources/views/layouts/admin_aside.blade.php
View File

@ -19,43 +19,28 @@
</div>
<div class="menu-inner-shadow"> </div>
<ul class="menu-inner py-1 ps ps--active-y">
<li class="menu-header small fw-medium">Getting Started</li>
<ul class="menu-inner py-1">
{{-- {{ dd($menuData) }} --}}
@foreach ($menuData[0] as $menu)
@if(isset($menu->submenu[0]->url))
<li class="menu-item">
<a href="" class="menu-link menu-toggle">
<i class="{{$menu->icon}}"> </i>
<div>{{$menu->name}}</div>
</a>
@foreach ($menu->submenu as $sub)
<ul class="menu-sub">
<li class="menu-item">
<a href="{{url($sub->url)}}" class="menu-link">
<div>{{$sub->name}}</div>
</a>
</li>
</ul>
@endforeach
</li>
@else
<li class="menu-item">
<a href="{{url($menu->url)}}" class="menu-link">
<i class="{{$menu->icon}}"> </i>
<div>{{$menu->name}}</div>
</a>
</li>
@endif
<li class="menu-item @if(isset($menu->slug) && request()->is(ltrim($menu->slug, '/'))) open @endif">
<a href="{{ $menu->url ?? '#' }}" class="menu-link @if(!empty($menu->submenu)) menu-toggle @endif">
<i class="{{ $menu->icon ?? '' }}"></i>
<div>{{ $menu->name ?? '未命名' }}</div>
</a>
@if (!empty($menu->submenu))
<ul class="menu-sub">
@foreach ($menu->submenu as $sub)
<li class="menu-item @if(isset($sub->url) && request()->is(ltrim($sub->url, '/'))) active @endif">
<a href="{{ url($sub->url ?? '#') }}" class="menu-link">
<div>{{ $sub->name ?? '未命名' }}</div>
</a>
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
<div class="ps__rail-x" style="left: 0px; bottom: -427px;">
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps__rail-y" style="top: 427px; height: 571px; right: 4px;">
<div class="ps__thumb-y" tabindex="0" style="top: 80px; height: 106px;"></div>
</div>
</ul>
</aside>