129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
'use client'
|
||
|
||
/**
|
||
* UpgradeModal 组件
|
||
*
|
||
* 升级提示弹窗，当免费版用户点击受限功能时显示
|
||
* 基于现有 Modal 组件构建，显示功能名称、限制说明和升级好处
|
||
*
|
||
* @created 2025-12-16
|
||
* @component
|
||
*/
|
||
|
||
import Modal from './Modal'
|
||
import { useThemeStyles, 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 styles = useThemeStyles()
|
||
const feature = getFeatureDescription(featureKey)
|
||
|
||
const displayName = featureName || feature.name
|
||
const displayDescription = featureDescription || feature.description
|
||
|
||
const handleUpgradeClick = () => {
|
||
// TODO: 跳转到升级页面或显示联系方式
|
||
// 目前先关闭弹窗
|
||
onClose()
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={isOpen}
|
||
onClose={onClose}
|
||
size="small"
|
||
showCloseButton={true}
|
||
>
|
||
<div className="p-6 space-y-6" data-testid="upgrade-modal">
|
||
{/* 图标和标题 */}
|
||
<div className="text-center space-y-3">
|
||
<div className={cn(
|
||
'mx-auto w-16 h-16 rounded-full 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-8 h-8 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>
|
||
<h3
|
||
className="text-xl 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 className={cn(
|
||
'p-4 rounded-xl',
|
||
'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 gap-3 pt-2">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className={cn(
|
||
styles.buttonStyles.secondary,
|
||
'flex-1 text-sm font-medium transition-all'
|
||
)}
|
||
>
|
||
关闭
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleUpgradeClick}
|
||
className={cn(
|
||
'flex-1 px-4 py-2 rounded-xl text-sm font-medium transition-all',
|
||
'bg-slate-900 text-white hover:bg-slate-800',
|
||
'dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white'
|
||
)}
|
||
>
|
||
联系管理员
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|