feat: 新增租戶品牌客製化系統（Logo、主色系）、修正 hardcoded 顏色為 CSS 變數

2026-01-16 14:36:24 +08:00
parent a2c99e3a36
commit 55272d5d43
36 changed files with 568 additions and 70 deletions
--- a/resources/js/Layouts/AuthenticatedLayout.tsx
+++ b/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -20,7 +20,7 @@ import {
 } from "lucide-react";
 import { toast, Toaster } from "sonner";
 import { useState, useEffect, useMemo } from "react";
-import { Link, usePage } from "@inertiajs/react";
+import { Link, usePage, Head } from "@inertiajs/react";
 import { cn } from "@/lib/utils";
 import BreadcrumbNav, { BreadcrumbItemType } from "@/Components/shared/BreadcrumbNav";
 import {
@@ -33,6 +33,7 @@ import {
 } from "@/Components/ui/dropdown-menu";
 import { usePermission } from "@/hooks/usePermission";
 import ApplicationLogo from "@/Components/ApplicationLogo";
+import { generateLightestColor, generateLightColor, generateDarkColor, generateActiveColor } from "@/utils/colorUtils";

 interface MenuItem {
    id: string;
@@ -328,6 +329,18 @@ export default function AuthenticatedLayout({

    return (
        <div className="flex min-h-screen bg-slate-50">
+            <Head>
+                <link rel="icon" type="image/png" href="/favicon.png" />
+                <style>{`
+                    :root {
+                        --primary-main: ${(props as any).branding?.primary_color || '#01ab83'};
+                        --primary-dark: ${generateDarkColor((props as any).branding?.primary_color || '#01ab83')};
+                        --primary-light: ${generateLightColor((props as any).branding?.primary_color || '#01ab83')};
+                        --primary-lightest: ${generateLightestColor((props as any).branding?.primary_color || '#01ab83')};
+                        --button-main-active: ${generateActiveColor((props as any).branding?.primary_color || '#01ab83')};
+                    }
+                `}</style>
+            </Head>
            {/* Mobile Header -> Global Header */}
            <header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 z-[60] flex items-center justify-between px-4 transition-all duration-300">
                <div className="flex items-center gap-2">
@@ -395,7 +408,7 @@ export default function AuthenticatedLayout({
                    {!isCollapsed && (
                        <Link href="/" className="flex items-center gap-2 group">
                            <ApplicationLogo className="w-8 h-8 rounded-lg object-contain group-hover:scale-110 transition-transform" />
-                            <span className="font-extrabold text-[#01ab83] text-lg tracking-tight">小小冰室 ERP</span>
+                            <span className="font-extrabold text-primary-main text-lg tracking-tight">小小冰室 ERP</span>
                        </Link>
                    )}
                    {isCollapsed && (
@@ -444,7 +457,7 @@ export default function AuthenticatedLayout({
                <div className="h-16 flex items-center justify-between px-6 border-b border-slate-100">
                    <Link href="/" className="flex items-center gap-2">
                        <ApplicationLogo className="w-8 h-8 rounded-lg object-contain" />
-                        <span className="font-extrabold text-[#01ab83] text-lg">小小冰室 ERP</span>
+                        <span className="font-extrabold text-primary-main text-lg">小小冰室 ERP</span>
                    </Link>
                    <button onClick={() => setIsMobileOpen(false)} className="p-2 text-slate-400">
                        <X className="h-5 w-5" />
--- a/resources/js/Layouts/LandlordLayout.tsx
+++ b/resources/js/Layouts/LandlordLayout.tsx
@@ -1,4 +1,4 @@
-import { Link, usePage } from "@inertiajs/react";
+import { Link, usePage, Head } from "@inertiajs/react";
 import { cn } from "@/lib/utils";
 import {
    Building2,
@@ -8,6 +8,8 @@ import {
    Menu,
    X,
    Settings,
+    PanelLeftClose,
+    PanelLeftOpen,
 } from "lucide-react";
 import { Toaster } from "sonner";
 import {
@@ -18,7 +20,7 @@ import {
    DropdownMenuSeparator,
    DropdownMenuTrigger,
 } from "@/Components/ui/dropdown-menu";
-import { useState } from "react";
+import { useState, useEffect } from "react";

 interface LandlordLayoutProps {
    children: React.ReactNode;
@@ -46,9 +48,24 @@ export default function LandlordLayout({ children, title }: LandlordLayoutProps)
    ];

    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+    const [isCollapsed, setIsCollapsed] = useState(() => {
+        if (typeof window !== "undefined") {
+            return localStorage.getItem("landlord-sidebar-collapsed") === "true";
+        }
+        return false;
+    });
+
+    useEffect(() => {
+        localStorage.setItem("landlord-sidebar-collapsed", String(isCollapsed));
+    }, [isCollapsed]);

    return (
        <div className="flex min-h-screen bg-slate-50 relative">
+            <Head>
+                <link rel="icon" type="image/png" href="/favicon-landlord.png" />
+                <link rel="shortcut icon" href="/favicon-landlord.png" type="image/png" />
+                <link rel="apple-touch-icon" href="/favicon-landlord.png" />
+            </Head>
            {/* Sidebar Overlay for mobile */}
            {isSidebarOpen && (
                <div
@@ -59,46 +76,75 @@ export default function LandlordLayout({ children, title }: LandlordLayoutProps)

            {/* Sidebar */}
            <aside className={cn(
-                "fixed left-0 top-0 bottom-0 w-64 bg-slate-900 text-white flex flex-col z-50 transition-transform duration-300 lg:translate-x-0",
-                isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+                "fixed left-0 top-0 bottom-0 bg-slate-900 text-white flex flex-col z-50 transition-all duration-300 ease-in-out lg:translate-x-0",
+                isSidebarOpen ? "translate-x-0" : "-translate-x-full",
+                isCollapsed ? "lg:w-20" : "lg:w-64"
            )}>
-                <div className="h-16 flex items-center justify-between px-6 border-b border-slate-800">
+                <div className={cn(
+                    "h-16 flex items-center border-b border-slate-800 transition-all",
+                    isCollapsed ? "justify-center px-0" : "justify-between px-6"
+                )}>
                    <Link href="/landlord" className="flex items-center gap-2">
-                        <div className="w-8 h-8 bg-primary-main rounded-lg flex items-center justify-center">
+                        <div className="w-8 h-8 bg-primary-main rounded-lg flex items-center justify-center shrink-0">
                            <Building2 className="w-5 h-5 text-white" />
                        </div>
-                        <span className="font-bold text-lg">中央後台</span>
+                        {!isCollapsed && <span className="font-bold text-lg whitespace-nowrap">中央後台</span>}
                    </Link>
-                    <button
-                        className="lg:hidden text-slate-400 hover:text-white"
-                        onClick={() => setIsSidebarOpen(false)}
-                    >
-                        <X className="w-6 h-6" />
-                    </button>
+                    {!isCollapsed && (
+                        <button
+                            className="lg:hidden text-slate-400 hover:text-white"
+                            onClick={() => setIsSidebarOpen(false)}
+                        >
+                            <X className="w-6 h-6" />
+                        </button>
+                    )}
                </div>

-                <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+                <nav className="flex-1 p-3 space-y-1 overflow-y-auto overflow-x-hidden">
                    {menuItems.map((item) => (
                        <Link
                            key={item.href}
                            href={item.href}
                            onClick={() => setIsSidebarOpen(false)}
+                            title={isCollapsed ? item.label : ""}
                            className={cn(
-                                "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors",
+                                "flex items-center rounded-lg transition-all",
+                                isCollapsed ? "justify-center px-0 h-10 w-10 mx-auto" : "gap-3 px-3 py-2.5",
                                item.active
                                    ? "bg-primary-main text-white"
                                    : "text-slate-400 hover:bg-slate-800 hover:text-white"
                            )}
                        >
-                            <item.icon className="w-5 h-5" />
-                            <span className="font-medium">{item.label}</span>
+                            <item.icon className="w-5 h-5 shrink-0" />
+                            {!isCollapsed && <span className="font-medium whitespace-nowrap">{item.label}</span>}
                        </Link>
                    ))}
                </nav>
+
+                <div className="p-4 border-t border-slate-800 hidden lg:block">
+                    <button
+                        onClick={() => setIsCollapsed(!isCollapsed)}
+                        className={cn(
+                            "w-full flex items-center transition-colors text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg p-2",
+                            isCollapsed ? "justify-center" : "gap-3"
+                        )}
+                        title={isCollapsed ? "展開側邊欄" : "收合側邊欄"}
+                    >
+                        {isCollapsed ? <PanelLeftOpen className="w-5 h-5" /> : (
+                            <>
+                                <PanelLeftClose className="w-5 h-5" />
+                                <span className="text-sm font-medium">收合側邊欄</span>
+                            </>
+                        )}
+                    </button>
+                </div>
            </aside>

            {/* Main Content */}
-            <main className="flex-1 lg:ml-64 w-full">
+            <main className={cn(
+                "flex-1 flex flex-col transition-all duration-300 min-h-screen",
+                isCollapsed ? "lg:ml-20" : "lg:ml-64"
+            )}>
                {/* Header */}
                <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 lg:px-6">
                    <div className="flex items-center gap-4">