中后台组件产品系统Vibe Coding

项目面向企业级中后台管理和前端工程化场景，主要解决传统业务系统中页面结构重复、组件复用率低、数据管理效率不足以及权限控制不统一等问题。随着企业数字化建设不断深入，后台系统需要同时满足多角色协同、菜单动态展示、数据安全隔离和快速迭代等需求，因此搭建了集自研组件库、组件管理后台、权限管理和数据展示于一体的企业级管理平台，为后续业务系统提供统一的技术基础和可复用的前端解决方案。

系统主要包含登录认证、工作台、表格列表、表单管理、组件展示、个人信息和系统导航等模块。工作台用于展示组件数量、发布状态、测试覆盖率及近期更新记录；表格列表支持关键字、分类和状态筛选，以及组件新增、编辑、删除、版本维护、负责人维护、覆盖率展示和分页查询；表单模块提供输入框、下拉选择、级联选择、日期时间选择、文件上传、单选、多选和开关等交互能力；组件展示模块集中演示表格、虚拟滚动、描述列表、统计卡片、弹窗、抽屉、通知、反馈、树形组件、标签页、面包屑、步骤条和折叠面板等基础组件；系统同时支持动态菜单、角色权限、路由权限和按钮级权限控制，满足不同岗位用户的差异化操作需求。

项目采用 Vue 3.5、TypeScript、Vite、Vue Router、Pinia、Axios 和 UnoCSS 构建前端，基于 pnpm monorepo 管理业务后台与自研 @hubox/pro-ui 组件库，后端使用 Node.js、Express 和 TypeScript 提供真实接口及 Mock 数据切换能力。架构上按照页面、布局、路由、状态管理、接口服务和组件库进行模块化拆分，通过 import.meta.glob 实现动态路由组件加载，结合路由守卫、角色权限、菜单权限和 v-permission 指令完成 RBAC 权限控制。项目亮点是沉淀了表格、表单、查询表单、分页、弹窗、抽屉、通知、树形选择和导航等可复用组件，并支持类型提示、按需导出和单元测试；针对大数据量表格渲染卡顿问题，引入虚拟滚动降低页面渲染压力，同时通过 Axios 统一封装请求与认证逻辑，配合 Vitest、类型检查、Vite 构建优化以及 Nginx、PM2 部署脚本，提升系统的性能、稳定性和交付效率。