sky121113
3ce96537b3
1. UI 標準化： - 針對全系統數值輸入欄位統一加上 step='any' 以支援小數點。 - 表格形式 (Table) 的數值輸入欄位統一加上 text-right 靠右對齊。 - 修正 Components 與 Pages 中所有涉及金額與數量的輸入框。 2. 功能擴充與修正： - 擴充 Product 模型與相關 Dialog 以支援多種價格設定。 - 修正 Inventory/GoodsReceipt/Create.tsx 未使用的變數錯誤。 - 優化庫存相關頁面的 UI 一致性。 3. 其他： - 更新相關的 Type 定義與 Controller 邏輯。
100 lines
4.1 KiB
TypeScript
100 lines
4.1 KiB
TypeScript
import { Head, Link } from "@inertiajs/react";
|
|
import { ShieldAlert, FileQuestion, ServerCrash, HardHat, Home, ArrowLeft } from "lucide-react";
|
|
import { Button } from "@/Components/ui/button";
|
|
|
|
interface Props {
|
|
status: number;
|
|
message?: string;
|
|
}
|
|
|
|
export default function ErrorPage({ status, message }: Props) {
|
|
const errorDetails: Record<number, { title: string; description: string; icon: any; color: string }> = {
|
|
403: {
|
|
title: "無此權限 (403)",
|
|
description: "抱歉，您沒有權限存取此頁面。如果您認為這是個錯誤，請聯繫系統管理員。",
|
|
icon: ShieldAlert,
|
|
color: "text-yellow-500 bg-yellow-100 border-yellow-200",
|
|
},
|
|
404: {
|
|
title: "頁面未找到 (404)",
|
|
description: "抱歉，我們找不到您要訪問的頁面。它可能已被移除、更改名稱或暫時不可用。",
|
|
icon: FileQuestion,
|
|
color: "text-blue-500 bg-blue-100 border-blue-200",
|
|
},
|
|
500: {
|
|
title: "伺服器錯誤 (500)",
|
|
description: "抱歉，伺服器發生了內部錯誤。我們的技術團隊已經收到通知，正在努力修復中。",
|
|
icon: ServerCrash,
|
|
color: "text-red-500 bg-red-100 border-red-200",
|
|
},
|
|
503: {
|
|
title: "服務維護中 (503)",
|
|
description: "抱歉，系統目前正在進行維護。請稍後再試。",
|
|
icon: HardHat,
|
|
color: "text-orange-500 bg-orange-100 border-orange-200",
|
|
},
|
|
};
|
|
|
|
const defaultError = {
|
|
title: "發生錯誤",
|
|
description: message || "發生了未知的錯誤。",
|
|
icon: ShieldAlert,
|
|
color: "text-gray-500 bg-gray-100 border-gray-200",
|
|
};
|
|
|
|
const details = errorDetails[status] || defaultError;
|
|
const Icon = details.icon;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
|
|
<Head title={details.title} />
|
|
|
|
<div className="max-w-md w-full text-center slide-in-bottom"> {/* slide-in-bottom need to be defined in global css or just use simple animation */}
|
|
|
|
{/* Icon Circle */}
|
|
<div className="mb-8 flex justify-center relative">
|
|
<div className={`absolute inset-0 rounded-full animate-ping opacity-20 ${details.color.split(' ')[1]}`}></div>
|
|
<div className={`relative w-24 h-24 rounded-full flex items-center justify-center border-4 shadow-xl ${details.color}`}>
|
|
<Icon className="w-12 h-12" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text Content */}
|
|
<h1 className="text-3xl font-bold text-slate-900 mb-3 tracking-tight">
|
|
{details.title}
|
|
</h1>
|
|
|
|
<p className="text-slate-500 mb-10 text-lg leading-relaxed">
|
|
{details.description}
|
|
</p>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="gap-2 min-w-[140px] border-slate-300 hover:bg-slate-100 text-slate-700"
|
|
onClick={() => window.history.back()}
|
|
>
|
|
<ArrowLeft className="h-5 w-5" /> 返回上一頁
|
|
</Button>
|
|
|
|
<Link href={route('dashboard')}>
|
|
<Button
|
|
variant="default"
|
|
size="lg"
|
|
className="gap-2 min-w-[140px] shadow-lg shadow-primary/20"
|
|
>
|
|
<Home className="h-5 w-5" /> 返回首頁
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-16 text-sm text-slate-400 font-mono">
|
|
Error Code: {status} | Star ERP System
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|