feat: 新增租戶品牌客製化系統（Logo、主色系）、修正 hardcoded 顏色為 CSS 變數
This commit is contained in:
@@ -27,17 +27,20 @@ export default function LandlordLogin() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-900 relative overflow-hidden">
|
||||
<Head title="總後台登入" />
|
||||
<Head title="總後台登入">
|
||||
<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>
|
||||
|
||||
{/* 深色背景裝飾 */}
|
||||
<div className="absolute top-0 -left-4 w-96 h-96 bg-indigo-900/30 rounded-full mix-blend-screen filter blur-3xl opacity-50 animate-blob"></div>
|
||||
<div className="absolute bottom-0 -right-4 w-96 h-96 bg-blue-900/30 rounded-full mix-blend-screen filter blur-3xl opacity-50 animate-blob animation-delay-2000"></div>
|
||||
|
||||
<div className="w-full max-w-md p-8 relative z-10">
|
||||
<div className="flex flex-col items-center mb-8">
|
||||
{/* 使用不同風格的 Logo 或純文字 */}
|
||||
<div className="text-white text-3xl font-bold tracking-wider mb-2">Star ERP</div>
|
||||
<div className="text-slate-400 text-sm tracking-widest uppercase">中央管理系統</div>
|
||||
<div className="flex flex-col items-center mb-12">
|
||||
<div className="text-white text-5xl font-bold tracking-wider mb-3">Star ERP</div>
|
||||
<div className="text-slate-400 text-sm tracking-widest uppercase font-semibold">中央管理系統</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-panel p-8 rounded-xl shadow-2xl bg-slate-800/50 backdrop-blur-md border border-slate-700/50">
|
||||
|
||||
196
resources/js/Pages/Landlord/Tenant/Branding.tsx
Normal file
196
resources/js/Pages/Landlord/Tenant/Branding.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
import LandlordLayout from "@/Layouts/LandlordLayout";
|
||||
import { Link, useForm } from "@inertiajs/react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Card } from "@/Components/ui/card";
|
||||
import { ArrowLeft, LayoutDashboard } from "lucide-react";
|
||||
import { FormEventHandler, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { generateLightestColor } from "@/utils/colorUtils";
|
||||
|
||||
interface Tenant {
|
||||
id: string;
|
||||
name: string;
|
||||
branding?: {
|
||||
logo_path?: string;
|
||||
primary_color?: string;
|
||||
text_color?: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface BrandingProps {
|
||||
tenant: Tenant;
|
||||
logo_url?: string;
|
||||
}
|
||||
|
||||
export default function Branding({ tenant, logo_url }: BrandingProps) {
|
||||
const { data, setData, post, processing, errors } = useForm({
|
||||
logo: null as File | null,
|
||||
primary_color: tenant.branding?.primary_color || '#01ab83',
|
||||
});
|
||||
|
||||
const [logoPreview, setLogoPreview] = useState<string | null>(logo_url || null);
|
||||
|
||||
const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setData('logo', file);
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setLogoPreview(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const submit: FormEventHandler = (e) => {
|
||||
e.preventDefault();
|
||||
post(route('landlord.tenants.branding.update', tenant.id), {
|
||||
onSuccess: () => {
|
||||
toast.success('樣式設定已更新');
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('更新失敗，請檢查輸入');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<LandlordLayout title="客戶樣式管理">
|
||||
<div className="space-y-6 p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href={route('landlord.tenants.show', tenant.id)}>
|
||||
<Button variant="outline" size="sm">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">
|
||||
客戶樣式管理
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 mt-1">
|
||||
{tenant.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Branding Form */}
|
||||
<Card className="p-6">
|
||||
<form onSubmit={submit} className="space-y-6">
|
||||
{/* Logo Upload */}
|
||||
<div>
|
||||
<Label htmlFor="logo" className="text-base font-semibold">
|
||||
客戶 Logo
|
||||
</Label>
|
||||
<p className="text-sm text-slate-500 mb-3">
|
||||
上傳客戶專屬 Logo，建議尺寸 200×200 px，最大 2MB
|
||||
</p>
|
||||
<Input
|
||||
id="logo"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleLogoChange}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
{errors.logo && (
|
||||
<p className="text-sm text-red-600 mt-1">{errors.logo}</p>
|
||||
)}
|
||||
{logoPreview && (
|
||||
<div className="mt-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
|
||||
<p className="text-sm text-slate-600 mb-2">預覽：</p>
|
||||
<img
|
||||
src={logoPreview}
|
||||
alt="Logo Preview"
|
||||
className="h-20 w-20 object-contain rounded-lg border border-slate-300"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Primary Color */}
|
||||
<div>
|
||||
<Label htmlFor="primary_color" className="text-base font-semibold">
|
||||
主色系
|
||||
</Label>
|
||||
<p className="text-sm text-slate-500 mb-3">
|
||||
設定客戶後台的主要品牌色（按鈕、連結等）
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<Input
|
||||
id="primary_color"
|
||||
type="color"
|
||||
value={data.primary_color}
|
||||
onChange={(e) => setData('primary_color', e.target.value)}
|
||||
className="w-16 h-10 cursor-pointer"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
value={data.primary_color}
|
||||
onChange={(e) => setData('primary_color', e.target.value)}
|
||||
pattern="^#[0-9A-Fa-f]{6}$"
|
||||
className="w-32"
|
||||
placeholder="#01ab83"
|
||||
/>
|
||||
</div>
|
||||
{errors.primary_color && (
|
||||
<p className="text-sm text-red-600 mt-1">{errors.primary_color}</p>
|
||||
)}
|
||||
{/* Preview */}
|
||||
<div className="mt-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
|
||||
<p className="text-sm text-slate-600 mb-3">預覽效果：</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{/* 按鈕預覽 */}
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-2">按鈕</p>
|
||||
<Button
|
||||
type="button"
|
||||
style={{ backgroundColor: data.primary_color }}
|
||||
className="text-white"
|
||||
>
|
||||
預覽按鈕
|
||||
</Button>
|
||||
</div>
|
||||
{/* 側邊欄選中狀態預覽 */}
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-2">側邊欄選中狀態</p>
|
||||
<div
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg"
|
||||
style={{
|
||||
backgroundColor: generateLightestColor(data.primary_color),
|
||||
color: data.primary_color
|
||||
}}
|
||||
>
|
||||
<LayoutDashboard className="w-5 h-5" />
|
||||
<span className="font-medium">儀表板</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="flex justify-end gap-3 pt-4 border-t">
|
||||
<Link href={route('landlord.tenants.show', tenant.id)}>
|
||||
<Button type="button" variant="outline">
|
||||
取消
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={processing}
|
||||
className="bg-primary-main hover:bg-primary-dark"
|
||||
>
|
||||
{processing ? '儲存中...' : '儲存樣式設定'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</LandlordLayout>
|
||||
);
|
||||
}
|
||||
@@ -64,12 +64,20 @@ export default function TenantShow({ tenant }: Props) {
|
||||
<h1 className="text-2xl font-bold text-slate-900">{tenant.name}</h1>
|
||||
<p className="text-slate-500 mt-1">客戶 ID: {tenant.id}</p>
|
||||
</div>
|
||||
<Link
|
||||
href={`/landlord/tenants/${tenant.id}/edit`}
|
||||
className="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
編輯
|
||||
</Link>
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
href={`/landlord/tenants/${tenant.id}/branding`}
|
||||
className="bg-primary-main hover:bg-primary-dark text-white px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
樣式管理
|
||||
</Link>
|
||||
<Link
|
||||
href={`/landlord/tenants/${tenant.id}/edit`}
|
||||
className="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
編輯
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Card */}
|
||||
|
||||
Reference in New Issue
Block a user