HaHafeng
11325f88a7
- React 19 + TypeScript + Vite - Module registration mechanism with dynamic loading - Permission management system (basic/advanced/premium) - Route guards for access control - Error boundaries for module isolation - 6 business module placeholders (AIA/ASL/PKB/DC/SSA/ST) - Top navigation layout - Tailwind CSS 3 + Ant Design 5
155 lines
4.4 KiB
TypeScript
155 lines
4.4 KiB
TypeScript
import { Result, Button } from 'antd'
|
||
import { LockOutlined, HomeOutlined, RocketOutlined } from '@ant-design/icons'
|
||
import { useNavigate } from 'react-router-dom'
|
||
|
||
/**
|
||
* 无权限访问提示页面
|
||
*
|
||
* @description
|
||
* 当用户尝试访问无权限的模块时显示
|
||
* 引导用户升级版本或返回首页
|
||
*
|
||
* @version Week 2 Day 7 - 任务17
|
||
*/
|
||
|
||
interface PermissionDeniedProps {
|
||
/** 模块名称 */
|
||
moduleName?: string
|
||
/** 所需权限等级 */
|
||
requiredVersion?: string
|
||
/** 用户当前权限等级 */
|
||
currentVersion?: string
|
||
}
|
||
|
||
const PermissionDenied = ({
|
||
moduleName = '该功能',
|
||
requiredVersion = 'advanced',
|
||
currentVersion = 'basic',
|
||
}: PermissionDeniedProps) => {
|
||
const navigate = useNavigate()
|
||
|
||
/**
|
||
* 返回首页
|
||
*/
|
||
const handleGoHome = () => {
|
||
navigate('/')
|
||
}
|
||
|
||
/**
|
||
* 去升级（后续实现）
|
||
*/
|
||
const handleUpgrade = () => {
|
||
// TODO: 跳转到升级页面或打开升级对话框
|
||
console.log('用户点击升级按钮')
|
||
// 暂时跳转到首页
|
||
navigate('/')
|
||
}
|
||
|
||
// 权限等级名称映射
|
||
const versionName: Record<string, string> = {
|
||
basic: '基础版',
|
||
advanced: '高级版',
|
||
premium: '旗舰版',
|
||
}
|
||
|
||
return (
|
||
<div className="flex-1 flex items-center justify-center bg-gray-50">
|
||
<Result
|
||
icon={<LockOutlined style={{ fontSize: 72, color: '#faad14' }} />}
|
||
title={<span className="text-2xl">访问受限</span>}
|
||
subTitle={
|
||
<div className="space-y-3 mt-4">
|
||
<p className="text-gray-600">
|
||
抱歉，您当前是<strong>{versionName[currentVersion]}</strong>用户，
|
||
无法访问<strong>{moduleName}</strong>。
|
||
</p>
|
||
<p className="text-gray-500">
|
||
该功能需要<strong className="text-blue-600">{versionName[requiredVersion]}</strong>及以上权限。
|
||
</p>
|
||
</div>
|
||
}
|
||
extra={
|
||
<div className="flex gap-3 justify-center mt-6">
|
||
<Button
|
||
type="primary"
|
||
icon={<RocketOutlined />}
|
||
onClick={handleUpgrade}
|
||
size="large"
|
||
>
|
||
升级到{versionName[requiredVersion]}
|
||
</Button>
|
||
<Button
|
||
icon={<HomeOutlined />}
|
||
onClick={handleGoHome}
|
||
size="large"
|
||
>
|
||
返回首页
|
||
</Button>
|
||
</div>
|
||
}
|
||
>
|
||
{/* 版本对比 */}
|
||
<div className="mt-8 max-w-md mx-auto">
|
||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<RocketOutlined className="text-blue-600" />
|
||
<span className="font-semibold text-blue-900">
|
||
升级{versionName[requiredVersion]}可解锁：
|
||
</span>
|
||
</div>
|
||
<ul className="space-y-2 text-sm text-gray-700 list-disc list-inside">
|
||
{requiredVersion === 'advanced' && (
|
||
<>
|
||
<li>AI智能文献筛选（4个LLM模型）</li>
|
||
<li>更多存储空间</li>
|
||
<li>优先技术支持</li>
|
||
</>
|
||
)}
|
||
{requiredVersion === 'premium' && (
|
||
<>
|
||
<li>智能统计分析（外部系统集成）</li>
|
||
<li>统计分析工具集</li>
|
||
<li>无限存储空间</li>
|
||
<li>专属客户经理</li>
|
||
</>
|
||
)}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</Result>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PermissionDenied
|
||
|
||
/**
|
||
* 🎨 设计说明：
|
||
*
|
||
* 1. 用户体验：
|
||
* - ✅ 明确告知用户为什么无法访问
|
||
* - ✅ 显示当前版本和所需版本
|
||
* - ✅ 提供明确的升级路径
|
||
* - ✅ 展示升级后的价值（功能列表）
|
||
*
|
||
* 2. 商业转化：
|
||
* - ✅ 突出显示"升级"按钮（主按钮）
|
||
* - ✅ 列举升级后可获得的功能
|
||
* - ✅ 引导用户做出升级决策
|
||
*
|
||
* 3. 后续优化：
|
||
* - [ ] 接入真实的升级流程（支付系统）
|
||
* - [ ] 显示价格对比
|
||
* - [ ] 添加"免费试用"选项
|
||
* - [ ] 记录转化数据（用户点击升级的次数）
|
||
*
|
||
* 4. 权限策略：
|
||
* 【当前阶段】所有用户都是premium，不会看到此页面
|
||
* 【Week 3+】ASL模块需要advanced权限，可测试此页面
|
||
* 【Week 5+】完整的权限和付费体系
|
||
*/
|
||
|
||
|
||
|
||
|