mama/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Preline UI 改版與深色模式修復
All checks were successful
Star-Cloud-Deploy-System / deploy-demo (push) Successful in 35s
Details
Star-Cloud-Deploy-System / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
sky121113
2026-01-13 13:28:58 +08:00
parent 88c3678a4d
commit 74b6c71c95
20 changed files with 1053 additions and 909 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
resources/views/admin/dashboard.blade.php
View File

@@ -1,111 +1,165 @@
@extends('layouts.admin')
@section('content')
@php
$theme = request()->cookie('theme', 'dark-blue');
$isLight = in_array($theme, ['light-blue', 'light-green']);
$cardBg = $isLight ? 'bg-white' : 'bg-gray-800';
$textPrimary = $isLight ? 'text-gray-900' : 'text-gray-200';
$textSecondary = $isLight ? 'text-gray-600' : 'text-gray-400';
$borderColor = $isLight ? 'border-gray-200' : 'border-gray-700';
@endphp
<div class="container mx-auto px-6 py-8">
<h3 class="{{ $textPrimary }} text-3xl font-medium">儀表板</h3>
<div class="mt-4">
<div class="flex flex-wrap -mx-6">
<!-- Total Machines -->
<div class="w-full px-6 sm:w-1/2 xl:w-1/4">
<div class="flex items-center px-5 py-6 shadow-sm rounded-md {{ $cardBg }}">
<div class="p-3 rounded-full bg-indigo-600 bg-opacity-75">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
</div>
<div class="mx-5">
<h4 class="text-2xl font-semibold {{ $textPrimary }}">{{ $totalMachines }}</h4>
<div class="{{ $textSecondary }}">總機台數</div>
</div>
</div>
</div>
<!-- Online Machines -->
<div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-6 sm:mt-0">
<div class="flex items-center px-5 py-6 shadow-sm rounded-md {{ $cardBg }}">
<div class="p-3 rounded-full bg-green-600 bg-opacity-75">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div class="mx-5">
<h4 class="text-2xl font-semibold {{ $textPrimary }}">{{ $onlineMachines }}</h4>
<div class="{{ $textSecondary }}">連線中</div>
</div>
</div>
</div>
<!-- Offline Machines -->
<div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-6 xl:mt-0">
<div class="flex items-center px-5 py-6 shadow-sm rounded-md {{ $cardBg }}">
<div class="p-3 rounded-full bg-gray-600 bg-opacity-75">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
</svg>
</div>
<div class="mx-5">
<h4 class="text-2xl font-semibold {{ $textPrimary }}">{{ $offlineMachines }}</h4>
<div class="{{ $textSecondary }}">離線</div>
</div>
</div>
</div>
<!-- Error Machines -->
<div class="w-full px-6 sm:w-1/2 xl:w-1/4 mt-6 xl:mt-0">
<div class="flex items-center px-5 py-6 shadow-sm rounded-md {{ $cardBg }}">
<div class="p-3 rounded-full bg-red-600 bg-opacity-75">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="mx-5">
<h4 class="text-2xl font-semibold {{ $textPrimary }}">{{ $errorMachines }}</h4>
<div class="{{ $textSecondary }}">異常</div>
</div>
</div>
<div class="space-y-4 sm:space-y-6">
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
<!-- Card -->
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
<div class="p-4 md:p-5">
<div class="flex items-center gap-x-2">
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
總銷售額
</p>
<div class="hs-tooltip">
<div class="hs-tooltip-toggle">
<svg class="flex-shrink-0 w-4 h-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-slate-700" role="tooltip">
本月累計銷售總額
</span>
</div>
</div>
</div>
</div>
<div class="mt-8">
<div class="flex flex-col mt-8">
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b {{ $borderColor }}">
<!-- 這裡可以放最近的銷售紀錄或日誌 -->
<table class="min-w-full">
<thead>
<tr>
<th class="px-6 py-3 border-b {{ $borderColor }} {{ $cardBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">標題</th>
<th class="px-6 py-3 border-b {{ $borderColor }} {{ $cardBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">狀態</th>
<th class="px-6 py-3 border-b {{ $borderColor }} {{ $cardBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">時間</th>
</tr>
</thead>
<tbody class="{{ $cardBg }}">
<tr>
<td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
<div class="text-sm leading-5 {{ $textPrimary }}">系統初始化</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">正常</span>
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }} text-sm leading-5 {{ $textSecondary }}">
剛剛
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-1 flex items-center gap-x-2">
<h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
$72,540
</h3>
<span class="flex items-center gap-x-1 text-green-600">
<svg class="inline-block w-4 h-4 self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
<span class="inline-block text-sm">
1.7%
</span>
</span>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
<div class="p-4 md:p-5">
<div class="flex items-center gap-x-2">
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
活躍機台
</p>
</div>
<div class="mt-1 flex items-center gap-x-2">
<h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
124
</h3>
<span class="flex items-center gap-x-1 text-red-600">
<svg class="inline-block w-4 h-4 self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>
<span class="inline-block text-sm">
0.3%
</span>
</span>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
<div class="p-4 md:p-5">
<div class="flex items-center gap-x-2">
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
庫存警告
</p>
</div>
<div class="mt-1 flex items-center gap-x-2">
<h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
12
</h3>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
<div class="p-4 md:p-5">
<div class="flex items-center gap-x-2">
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
本月新增會員
</p>
</div>
<div class="mt-1 flex items-center gap-x-2">
<h3 class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
28
</h3>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Grid -->
<div class="grid lg:grid-cols-2 gap-4 sm:gap-6">
<!-- Card -->
<div class="p-4 md:p-5 min-h-[410px] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
<!-- Header -->
<div class="flex justify-between items-center">
<div>
<h2 class="text-sm text-gray-500 dark:text-gray-400">
營收趨勢
</h2>
<p class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
$123,450
</p>
</div>
<div>
<span class="py-[5px] px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-md bg-teal-100 text-teal-800 dark:bg-teal-500/10 dark:text-teal-500">
<svg class="inline-block w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
25%
</span>
</div>
</div>
<!-- End Header -->
<div id="hs-multiple-bar-charts"></div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="p-4 md:p-5 min-h-[410px] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700">
<!-- Header -->
<div class="flex justify-between items-center">
<div>
<h2 class="text-sm text-gray-500 dark:text-gray-400">
訪客分析
</h2>
<p class="text-xl sm:text-2xl font-medium text-gray-800 dark:text-gray-200">
92,913
</p>
</div>
<div>
<span class="py-[5px] px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-md bg-red-100 text-red-800 dark:bg-red-500/10 dark:text-red-500">
<svg class="inline-block w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
11%
</span>
</div>
</div>
<!-- End Header -->
<div id="hs-single-area-chart"></div>
</div>
<!-- End Card -->
</div>
</div>
@endsection
@section('scripts')
<script>
window.addEventListener('load', () => {
// Here you would initialize charts using ApexCharts or similar,
// as Preline examples often use ApexCharts.
// For now, placeholders are sufficient.
});
</script>
@endsection