Porsche Chen
360533393f
Major Features: - ✅ Multi-tenant architecture (tenant isolation) - ✅ Employee CRUD with lifecycle management (onboarding/offboarding) - ✅ Department tree structure with email domain management - ✅ Company info management (single-record editing) - ✅ System functions CRUD (permission management) - ✅ Email account management (multi-account per employee) - ✅ Keycloak SSO integration (auth.lab.taipei) - ✅ Redis session storage (10.1.0.254:6379) - Solves Cookie 4KB limitation - Cross-system session sharing - Sliding expiration (8 hours) - Automatic token refresh Technical Stack: Backend: - FastAPI + SQLAlchemy - PostgreSQL 16 (10.1.0.20:5433) - Keycloak Admin API integration - Docker Mailserver integration (SSH) - Alembic migrations Frontend: - Next.js 14 (App Router) - NextAuth 4 with Keycloak Provider - Redis session storage (ioredis) - Tailwind CSS Infrastructure: - Redis 7 (10.1.0.254:6379) - Session + Cache - Keycloak 26.1.0 (auth.lab.taipei) - Docker Mailserver (10.1.0.254) Architecture Highlights: - Session管理由 Keycloak + Redis 統一控制 - 支援多系統 (HR/WebMail/Calendar/Drive/Office) 共享 session - Token 自動刷新,異質服務整合 - 未來可無縫遷移到雲端 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
/**
|
|
* 提示對話框組件 (單按鈕)
|
|
*/
|
|
'use client'
|
|
|
|
interface AlertDialogProps {
|
|
isOpen: boolean
|
|
title: string
|
|
message: string
|
|
confirmText?: string
|
|
onConfirm: () => void
|
|
type?: 'info' | 'warning' | 'error' | 'success'
|
|
}
|
|
|
|
export default function AlertDialog({
|
|
isOpen,
|
|
title,
|
|
message,
|
|
confirmText = '確定',
|
|
onConfirm,
|
|
type = 'info',
|
|
}: AlertDialogProps) {
|
|
if (!isOpen) return null
|
|
|
|
const getIcon = () => {
|
|
switch (type) {
|
|
case 'error':
|
|
return (
|
|
<div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
)
|
|
case 'warning':
|
|
return (
|
|
<div className="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>
|
|
)
|
|
case 'success':
|
|
return (
|
|
<div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
)
|
|
case 'info':
|
|
return (
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-4">
|
|
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[100] p-4 animate-fadeIn"
|
|
onClick={onConfirm}
|
|
>
|
|
<div
|
|
className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 animate-slideIn"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="text-center">
|
|
{getIcon()}
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
|
|
<p className="text-sm text-gray-600 mb-6">{message}</p>
|
|
</div>
|
|
|
|
<div className="flex justify-center">
|
|
<button
|
|
onClick={onConfirm}
|
|
className={`px-6 py-2 rounded-lg transition-colors text-sm font-medium text-white ${
|
|
type === 'error'
|
|
? 'bg-red-600 hover:bg-red-700'
|
|
: type === 'success'
|
|
? 'bg-green-600 hover:bg-green-700'
|
|
: type === 'warning'
|
|
? 'bg-yellow-600 hover:bg-yellow-700'
|
|
: 'bg-blue-600 hover:bg-blue-700'
|
|
}`}
|
|
>
|
|
{confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|