[FEAT] 儀表板 UI 大改造、中文化與項目開發規範同步 (含深色模式修復)
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 58s

This commit is contained in:
2026-03-09 11:30:06 +08:00
parent 02918ce0e1
commit 682a9e7ac3
11 changed files with 168 additions and 26 deletions

View File

@@ -112,8 +112,8 @@
.luxury-nav-item.active::before {
content: "";
@apply absolute left-0 w-1 h-5 bg-cyan-500 rounded-full shadow-[0_0_8px_rgba(6,182,212,0.5)];
left: 0;
@apply absolute left-0 w-1 h-5 bg-cyan-500 rounded-full;
box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
/* Submenu styling */
@@ -121,4 +121,38 @@
@apply mt-2 space-y-1 ps-4 border-l border-slate-200 ms-4;
@apply dark:border-white/10;
}
/* Luxury Buttons */
.btn-luxury-primary {
@apply inline-flex items-center justify-center gap-x-2 px-4 py-2.5 text-sm font-semibold rounded-xl text-white transition-all duration-200;
background: linear-gradient(135deg, #06b6d4, #3b82f6);
box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3);
}
.btn-luxury-primary:hover {
@apply -translate-y-0.5;
box-shadow: 0 8px 20px -4px rgba(6, 182, 212, 0.4);
filter: brightness(1.1);
}
.btn-luxury-primary:active {
@apply translate-y-0 scale-[0.98];
}
.btn-luxury-secondary {
@apply inline-flex items-center justify-center gap-x-2 px-3 py-2 text-sm font-semibold rounded-xl transition-all duration-200;
@apply bg-white text-slate-700 border border-slate-200 shadow-sm;
@apply dark:bg-slate-800 dark:text-white dark:border-slate-700;
}
.btn-luxury-secondary:hover {
@apply bg-slate-50 border-slate-300 -translate-y-0.5 shadow-md;
@apply dark:bg-slate-700/50 dark:border-slate-600;
}
.btn-luxury-ghost {
@apply inline-flex items-center justify-center gap-x-2 px-4 py-2 text-sm font-bold rounded-xl transition-all duration-200;
@apply text-slate-500 hover:bg-slate-100 hover:text-slate-900;
@apply dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-cyan-400;
}
}

View File

@@ -62,7 +62,7 @@
</div>
<div x-data="{ open: false, selected: '最近 7 天' }" class="relative inline-block text-left">
<button @click="open = !open" type="button" class="inline-flex items-center gap-x-2 px-3 py-2 text-sm font-semibold text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-all shadow-sm">
<button @click="open = !open" type="button" class="btn-luxury-secondary">
<span x-text="selected"></span>
<svg class="shrink-0 w-4 h-4 transition-transform" :class="open ? 'rotate-180' : ''" 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="m6 9 6 6 6-6"/></svg>
</button>
@@ -113,7 +113,7 @@
</div>
@endforelse
</div>
<button class="w-full mt-8 py-3 text-sm font-bold text-slate-500 hover:text-cyan-500 transition-colors uppercase">查看所有日誌 </button>
<button class="btn-luxury-ghost w-full mt-8 py-3 font-bold uppercase tracking-wider">查看所有日誌 </button>
</div>
</div>
</div>

View File

@@ -42,7 +42,7 @@
<div class="container mx-auto px-6 py-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-gray-900 dark:text-gray-200 text-3xl font-medium">禮品設定</h3>
<button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
<button onclick="document.getElementById('createModal').classList.remove('hidden')" class="btn-luxury-primary">
新增禮品
</button>
</div>
@@ -148,8 +148,8 @@
</div>
</div>
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
<button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
<button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">建立</button>
<button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="btn-luxury-secondary">取消</button>
<button type="submit" class="btn-luxury-primary">建立</button>
</div>
</form>
</div>

View File

@@ -44,7 +44,7 @@
<div class="flex justify-end">
<a href="{{ route('admin.machines.index') }}" class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded mr-2">取消</a>
<button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">建立</button>
<button type="submit" class="btn-luxury-primary">建立</button>
</div>
</form>
</div>

View File

@@ -45,7 +45,7 @@
<div class="flex justify-end">
<a href="{{ route('admin.machines.index') }}" class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded mr-2">取消</a>
<button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">更新</button>
<button type="submit" class="btn-luxury-primary">更新</button>
</div>
</form>
</div>

View File

@@ -27,7 +27,7 @@
<div class="container mx-auto px-6 py-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-gray-900 dark:text-gray-200 text-3xl font-medium">會員等級設定</h3>
<button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
<button onclick="document.getElementById('createModal').classList.remove('hidden')" class="btn-luxury-primary">
新增等級
</button>
</div>
@@ -110,8 +110,8 @@
</div>
</div>
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
<button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
<button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">建立</button>
<button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="btn-luxury-secondary">取消</button>
<button type="submit" class="btn-luxury-primary">建立</button>
</div>
</form>
</div>

View File

@@ -35,7 +35,7 @@
<div class="container mx-auto px-6 py-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-gray-900 dark:text-gray-200 text-3xl font-medium">點數規則設定</h3>
<button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
<button onclick="document.getElementById('createModal').classList.remove('hidden')" class="btn-luxury-primary">
新增規則
</button>
</div>
@@ -128,8 +128,8 @@
</div>
</div>
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
<button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
<button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">建立</button>
<button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="btn-luxury-secondary">取消</button>
<button type="submit" class="btn-luxury-primary">建立</button>
</div>
</form>
</div>

View File

@@ -41,8 +41,10 @@
<!-- ========== HEADER ========== -->
<header class="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white/80 backdrop-blur-md border-b border-slate-200/50 text-sm py-2.5 sm:py-4 lg:pl-64 dark:bg-[#0f172a]/80 dark:border-slate-800/50 shadow-sm">
<nav class="flex basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8" aria-label="Global">
<div class="mr-5 lg:mr-0 lg:hidden">
<a class="flex-none text-xl font-semibold dark:text-white" href="#" aria-label="Brand">Star Cloud</a>
<div class="mr-5 lg:mr-0 lg:hidden text-center">
<a class="flex-none text-xl font-bold dark:text-white font-display tracking-tight" href="{{ route('admin.dashboard') }}" aria-label="Brand">
Star<span class="text-cyan-500">Cloud</span>
</a>
</div>
<div class="w-full flex items-center justify-end ml-auto sm:justify-between sm:gap-x-3 sm:order-3">
@@ -93,9 +95,9 @@
<p class="text-sm font-medium text-gray-800 dark:text-gray-300">{{ Auth::user()->email }}</p>
</div>
<div class="mt-2 py-2 first:pt-0 last:pb-0">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="{{ route('profile.edit') }}">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition-colors" href="{{ route('profile.edit') }}">
<svg class="flex-shrink-0 w-4 h-4" 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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
個人檔案
帳戶設定
</a>
<form method="POST" action="{{ route('logout') }}">
@csrf
@@ -135,7 +137,7 @@
</svg>
</li>
<li class="text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
Dashboard
儀表板
</li>
</ol>
<!-- End Breadcrumb -->
@@ -155,9 +157,12 @@
</svg>
</button>
<div class="px-6 mb-4">
<a class="flex-none text-2xl font-bold text-slate-900 dark:text-white font-display tracking-tight" href="#" aria-label="Brand">
Star<span class="text-cyan-500">Cloud</span>
<div class="px-6 mb-8 mt-2">
<a class="flex items-center gap-x-2 text-2xl font-bold text-slate-900 dark:text-white font-display tracking-tight whitespace-nowrap" href="{{ route('admin.dashboard') }}" aria-label="Brand">
<div class="w-8 h-8 rounded-lg bg-luxury-gradient flex items-center justify-center shadow-lg shadow-cyan-500/20">
<span class="text-white text-base">S</span>
</div>
<span>Star<span class="text-cyan-500">Cloud</span></span>
</a>
</div>