企业级管理后台系统

项目简介

基于 React + TypeScript 开发的企业级 B 端管理后台系统，支持知识图谱节点管理、关系网络构建、数据统计分析、内容管理等核心功能。

项目周期：2025.06 - 2026.01（8 个月，持续维护）

技术栈

核心框架

• 前端框架: React 18 + TypeScript (strict mode)
• 管理后台框架: Refine.dev v4（企业级 CRUD 框架）
• 路由: React Router v7
• 构建工具: Vite 4

UI & 样式

• 组件库: Ant Design 5 + shadcn/ui（混合方案）
• 样式方案: Tailwind CSS 3 + CSS-in-JS

状态管理 & 表单

• 状态管理: Jotai（原子化状态管理）
• 表单方案: React Hook Form + Zod（类型安全验证）
• 表格: TanStack Table v8（虚拟滚动）

核心功能模块

1. 知识图谱节点系统

• 多类型节点管理: 支持 5 种节点类型，每种类型具有独立的字段结构
• 动态表单设计: 基于节点类别动态渲染表单，使用 Base Schema + Category Schema 合并模式
• 富文本编辑: 集成 Markdown 编辑器，支持内容创作
• 媒体上传: 支持封面图片上传、Feed Items 批量管理

2. 关系网络系统

• 双向关系管理: 支持节点间多对多关系绑定与可视化
• AI 辅助生成: 集成 AI 接口自动分析并生成节点关联关系
• 内联编辑: 表格内直接编辑关系标签、原因等元数据
• 批量操作: 支持批量创建、删除关系连接

3. 数据统计分析系统

• 多维度统计: 用户行为数据、Token 消耗、费用统计等
• 可视化报表: 基于 Recharts 的交互式图表展示
• CSV 导出: 动态表头生成，支持大数据量导出

4. 运营管理系统

• 官方码管理: 邀请码生成、使用记录追踪、过期时间管理
• 配额系统: 用户配额调整、批量 CSV 导入、审计日志
• 用户管理: 用户搜索、数据查看、删除操作
• 订阅管理: 订阅记录查询、分页展示

技术亮点

1. 架构设计

• 自定义数据提供者: 扩展 Refine 默认 Data Provider，支持复杂业务场景
• 资源分层管理: 父子资源嵌套结构设计，清晰的模块划分
• Schema 合并模式: 基础 Schema + 类别 Schema 动态合并，保证类型安全

2. 性能优化

• 虚拟滚动: 使用 TanStack Virtual 处理大数据量表格
• 客户端搜索分页: 减少网络请求，提升用户体验
• 懒加载: 组件按需加载，优化首屏加载时间

3. 工程化实践

• 类型安全: 全量 TypeScript strict 模式，Zod Runtime 验证
• 代码规范: ESLint + Prettier + Git Hooks，保证代码质量
• 自定义 Hooks: 抽象业务逻辑（节点选择、连接操作、反馈处理等）

工作成果

• 独立完成 10+ 个功能模块 的开发，包含 50+ 页面
• 编写 80+ 个自定义 Hook 和工具函数
• 实现 客户端搜索分页 功能，减少 60% 以上的 API 请求
• 优化表格性能，支持 10000+ 条数据流畅滚动
• 通过 Schema 合并模式 减少 40% 重复表单代码
• 集成 AI 辅助功能，提升内容关联效率 3 倍以上