119 lines
3.7 KiB
TypeScript
119 lines
3.7 KiB
TypeScript
'use client'
|
||
|
||
/**
|
||
* UpgradeModal 组件
|
||
*
|
||
* 授权提示弹窗，当当前许可证不包含某个功能时显示
|
||
* 基于现有 Modal 组件构建，显示功能名称和限制说明
|
||
*
|
||
* @created 2025-12-16
|
||
* @component
|
||
*/
|
||
|
||
import Modal from './Modal'
|
||
import { cn } from '@/lib/ui-styles'
|
||
import { getFeatureDescription } from '@/lib/license/feature-descriptions'
|
||
import type { FeatureKey } from '@/lib/license/types'
|
||
|
||
interface UpgradeModalProps {
|
||
/** 是否显示弹窗 */
|
||
isOpen: boolean
|
||
/** 关闭弹窗回调 */
|
||
onClose: () => void
|
||
/** 功能键，用于获取功能描述 */
|
||
featureKey: FeatureKey
|
||
/** 自定义功能名称（可选，覆盖默认值） */
|
||
featureName?: string
|
||
/** 自定义功能描述（可选，覆盖默认值） */
|
||
featureDescription?: string
|
||
}
|
||
|
||
export default function UpgradeModal({
|
||
isOpen,
|
||
onClose,
|
||
featureKey,
|
||
featureName,
|
||
featureDescription,
|
||
}: UpgradeModalProps) {
|
||
const feature = getFeatureDescription(featureKey)
|
||
|
||
const displayName = featureName || feature.name
|
||
const displayDescription = featureDescription || feature.description
|
||
|
||
const handleContactAdminClick = () => {
|
||
// 目前先关闭弹窗，后续可接入客户自己的授权处理入口。
|
||
onClose()
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={isOpen}
|
||
onClose={onClose}
|
||
size="small"
|
||
showCloseButton={true}
|
||
>
|
||
<div className="p-5 space-y-5" data-testid="upgrade-modal">
|
||
<div className="flex items-start gap-3">
|
||
<div className={cn(
|
||
'h-10 w-10 flex-shrink-0 rounded-lg flex items-center justify-center',
|
||
'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-100',
|
||
'border border-slate-200 dark:border-slate-700'
|
||
)}>
|
||
<svg
|
||
className="w-5 h-5 text-slate-700 dark:text-slate-100"
|
||
stroke="currentColor"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="min-w-0 space-y-1">
|
||
<h3
|
||
className="text-base font-semibold text-slate-900 dark:text-white"
|
||
data-testid="upgrade-modal-feature-name"
|
||
>
|
||
{displayName}
|
||
</h3>
|
||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||
当前许可证未包含此功能，请联系管理员处理授权
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={cn(
|
||
'p-3 rounded-lg',
|
||
'bg-slate-50 dark:bg-slate-800/50',
|
||
'border border-slate-200 dark:border-slate-700'
|
||
)}>
|
||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||
{displayDescription}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-2 pt-1">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
|
||
>
|
||
关闭
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleContactAdminClick}
|
||
className="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
|
||
>
|
||
联系管理员
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|