中后台系统开发中，团队常遇到这些问题：多项目UI风格不统一、组件重复开发、React/Vue技术栈切换成本高、阿拉伯语等RTL语言适配繁琐、设计交付后还原度难保证、组件缺乏统一文档和测试。我独立设计并开发了这套跨框架设计系统，就是为了解决企业级SaaS产品中"组件复用难、多端适配繁、设计协作乱"的核心痛点。适用于CRM、ERP、数据看板、内容管理等各类B端业务场景，服务于需要快速构建高质量、可访问、国际化界面的前端团队。通过统一的设计语言、双框架组件实现和完整的工程化体系，让团队不用再在基础组件上重复造轮子，可以专注于业务逻辑开发。
项目包含三大核心组件包和两大文档系统，形成完整的设计系统闭环：
1. @hugo-ui/mui（MUI+Emotion React组件包）： 提供15+企业级通用组件。内置双层设计令牌体系（原始色板→语义化角色）、自动RTL布局、多语言国际化（中/英/阿三语）、字体按需加载、WCAG无障碍工具
2. @hugo-ui/shadcn（Tailwind CSS React组件包） ：采用shadcn/ui设计风格，基于Radix UI无样式原语和Tailwind CSS v4构建
3. @hugo-ui/shadcn-vue（Tailwind CSS Vue 3组件包） ：同步提供Vue 3生态的20+组件实现，基于Reka UI（原Radix Vue）和Tailwind CSS v4
4. Storybook交互式文档： React和Vue双版本Storybook，包含所有组件的交互演示、视觉状态覆盖、主题切换，支持实时查看组件props和代码示例
5. AI Contract组件元数据系统： 自动从组件源码、Props类型、Storybook示例、测试用例、主题令牌中提取结构化契约文件，生成AI可消费的组件描述，用于AI辅助开发和代码生成场景
6. 工程化体系 pnpm monorepo工作区管理、Changesets版本发布、Vite库模式构建、Jest/Vitest单元测试（含React Testing Library和Vue Test Utils）、ESLint+Prettier代码规范、TypeScript严格类型、GitHub Actions CI/CD自动部署
技术栈： React 19、Vue 3、TypeScript、MUI 9 + Emotion、Tailwind CSS v4、Reka UI/Radix UI、Vite、Storybook 10、pnpm monorepo、@tanstack/table + @tanstack/virtual、react-intl。
核心技术亮点：
跨框架组件架构设计： 采用pnpm workspace monorepo管理三套独立可发布的组件包，通过统一的CSS变量设计令牌、对齐的组件API约定、一致的文档结构，保障React和Vue版本在视觉和交互体验上的统一，降低团队跨技术栈的学习成本。每个组件遵循"逻辑+样式+令牌+测试+stories"的拆分规范，保证可维护性。
高性能DataGrid虚拟滚动表格： 基于TanStack Table和TanStack Virtual构建企业级数据表格，解决长列表渲染性能问题；实现列宽拖拽调整、受控排序分页、行选中、空/加载/错误三态处理等功能，通过MUI主题隔离机制避免样式污染，可灵活接入服务端或客户端数据处理逻辑。
零侵入RTL国际化方案： 通过自定义Hook自动检测语言方向，支持CSS样式的自动RTL转换；同时实现了按语种策略加载字体的方案，支持中/英/阿三语文案，字体策略覆盖日/泰等语种。
设计令牌体系与AI Contract：设计了"原始色板→语义化角色"的双层令牌架构，组件只消费语义角色，不直接引用硬编码色值，从架构层面保障跨组件视觉一致性，也便于主题扩展；开发CLI工具链，结合TypeScript类型、组件元数据、Storybook示例和测试引用生成标准化AI组件契约，为AI辅助编程提供准确的组件上下文
评论