feat(frontend): add frontend-v2 modular architecture (Task 17)
- 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
This commit is contained in:
140
frontend-v2/src/framework/permission/PermissionContext.tsx
Normal file
140
frontend-v2/src/framework/permission/PermissionContext.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { createContext, useState, useCallback, ReactNode } from 'react'
|
||||
import { UserInfo, PermissionContextType, checkVersionLevel, UserVersion } from './types'
|
||||
|
||||
/**
|
||||
* 权限上下文
|
||||
*
|
||||
* @description 提供全局权限状态管理
|
||||
* @version Week 2 Day 7 - 任务17
|
||||
*
|
||||
* 注意:当前阶段(Week 2)用户信息为硬编码,方便开发测试
|
||||
* 后续计划:Week 2 Day 8-9 对接后端JWT认证
|
||||
*/
|
||||
|
||||
/**
|
||||
* 模拟用户数据(开发阶段使用)
|
||||
*
|
||||
* 🔧 开发说明:
|
||||
* - 当前硬编码为 premium 权限,可以访问所有模块
|
||||
* - 方便开发和测试所有功能
|
||||
* - 后续将从后端 JWT token 中解析真实用户信息
|
||||
*/
|
||||
const MOCK_USER: UserInfo = {
|
||||
id: 'test-user-001',
|
||||
name: '测试研究员',
|
||||
email: 'test@example.com',
|
||||
version: 'premium', // 👈 硬编码为最高权限
|
||||
avatar: null,
|
||||
isTrial: false,
|
||||
trialEndsAt: null,
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建权限上下文
|
||||
*/
|
||||
export const PermissionContext = createContext<PermissionContextType | undefined>(undefined)
|
||||
|
||||
/**
|
||||
* 权限提供者组件
|
||||
*/
|
||||
interface PermissionProviderProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export const PermissionProvider = ({ children }: PermissionProviderProps) => {
|
||||
// 当前用户状态(开发阶段使用模拟数据)
|
||||
const [user, setUser] = useState<UserInfo | null>(MOCK_USER)
|
||||
|
||||
/**
|
||||
* 检查模块权限
|
||||
* @param requiredVersion 所需权限等级
|
||||
* @returns 是否有权限访问
|
||||
*/
|
||||
const checkModulePermission = useCallback(
|
||||
(requiredVersion?: UserVersion): boolean => {
|
||||
// 未登录用户无权限
|
||||
if (!user) return false
|
||||
|
||||
// 没有权限要求,允许访问
|
||||
if (!requiredVersion) return true
|
||||
|
||||
// 检查权限等级
|
||||
return checkVersionLevel(user.version, requiredVersion)
|
||||
},
|
||||
[user]
|
||||
)
|
||||
|
||||
/**
|
||||
* 检查功能权限
|
||||
* @param feature 功能标识
|
||||
* @returns 是否有权限使用该功能
|
||||
*
|
||||
* TODO: 后续可以基于功能列表进行更细粒度的权限控制
|
||||
*/
|
||||
const checkFeaturePermission = useCallback(
|
||||
(feature: string): boolean => {
|
||||
if (!user) return false
|
||||
|
||||
// 当前简化实现:premium用户拥有所有功能
|
||||
if (user.version === 'premium') return true
|
||||
|
||||
// 后续可以扩展为基于功能配置表的权限检查
|
||||
console.log('Feature permission check:', feature)
|
||||
return true
|
||||
},
|
||||
[user]
|
||||
)
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
const logout = useCallback(() => {
|
||||
setUser(null)
|
||||
// TODO: 清除后端session/token
|
||||
console.log('User logged out')
|
||||
}, [])
|
||||
|
||||
const value: PermissionContextType = {
|
||||
user,
|
||||
isAuthenticated: !!user,
|
||||
checkModulePermission,
|
||||
checkFeaturePermission,
|
||||
setUser,
|
||||
logout,
|
||||
}
|
||||
|
||||
return (
|
||||
<PermissionContext.Provider value={value}>
|
||||
{children}
|
||||
</PermissionContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 🔧 开发说明:权限系统演进计划
|
||||
*
|
||||
* 【当前阶段 - Week 2】
|
||||
* - ✅ 用户信息:硬编码为 premium
|
||||
* - ✅ 权限检查:基于 UserVersion 等级
|
||||
* - ✅ 功能完整:支持模块级权限控制
|
||||
*
|
||||
* 【Week 2 Day 8-9 - 对接后端】
|
||||
* - [ ] 从后端获取真实用户信息
|
||||
* - [ ] 解析 JWT token 获取用户权限
|
||||
* - [ ] 实现登录/登出功能
|
||||
* - [ ] 集成用户管理API
|
||||
*
|
||||
* 【Week 3-4 - ASL开发】
|
||||
* - [ ] 在ASL模块中应用权限控制
|
||||
* - [ ] 实现功能级权限(如:LLM模型选择权限)
|
||||
* - [ ] 添加试用期限制逻辑
|
||||
*
|
||||
* 【Week 5+ - 完善】
|
||||
* - [ ] 动态权限配置
|
||||
* - [ ] 权限缓存优化
|
||||
* - [ ] 权限变更实时通知
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user