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:
2025-11-16 15:43:17 +08:00
parent 5579ffa78e
commit 11325f88a7
39 changed files with 8051 additions and 0 deletions

View 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+ - 完善】
* - [ ] 动态权限配置
* - [ ] 权限缓存优化
* - [ ] 权限变更实时通知
*/