flnxi-Wu/app/admin/_components/users/TransferSuperAdminModal.tsx
WuYongJie e4dcb6260a
Some checks failed
CI Check / check (push) Has been cancelled
feat: Admin页面重构 & UI三层架构系统
- 创建统一UI三层架构系统(基础层、颜色层、组合层)
- 拆分Admin页面为独立Tab组件(MonitorTab、UsersTab、DepartmentsTab等)
- 提取公共逻辑到Hooks(useToast、useDataFetch、useUserOperations等)
- 提取工具函数(validators、formatters、api等)
- 创建统一弹窗组件(Modal)和useModal Hook
- 添加错误边界和统一状态组件
- 完善类型定义和可访问性支持
- 更新文档(优化记录、优化计划、更新日志)
2025-11-22 15:17:10 +08:00

65 lines
2.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

'use client'
import type { User } from '../types'
import { buttonStyles, cn, inputStyles } from '@/lib/ui-styles'
interface TransferSuperAdminModalProps {
isOpen: boolean
targetUser: User | null
password: string
onClose: () => void
onChangePassword: (value: string) => void
onConfirm: () => void
}
export default function TransferSuperAdminModal({
isOpen,
targetUser,
password,
onClose,
onChangePassword,
onConfirm,
}: TransferSuperAdminModalProps) {
if (!isOpen || !targetUser) return null
return (
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
<div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl max-w-md w-full border border-slate-200/70 dark:border-slate-700/80">
<div className="px-6 py-4 border-b border-slate-200 dark:border-slate-700">
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">转移最高权限</h3>
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">请输入您的密码以确认此操作</p>
</div>
<div className="p-6 space-y-4">
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3 text-sm text-amber-800 dark:text-amber-100">
<strong>警告:</strong>转移给 <strong>{targetUser.username}</strong>({targetUser.email})后,当前账号将失去最高权限。
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-700 dark:text-slate-300">密码</label>
<input
type="password"
value={password}
onChange={(e) => onChangePassword(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
onConfirm()
}
}}
className={inputStyles.base}
placeholder="请输入您的密码"
/>
</div>
</div>
<div className="px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3">
<button type="button" onClick={onClose} className={cn(buttonStyles.ghost)}>
取消
</button>
<button type="button" onClick={onConfirm} className={cn(buttonStyles.primary)}>
确认转移
</button>
</div>
</div>
</div>
)
}