VCM
一款基于角色的 Web 应用，将住宅社区所需的全部功能整合至一个界面中：业主、住户、财务、预约、请求及报表。
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging
概览
VCM 是物业和社区管理平台的前端，通过同一个代码库服务两个截然不同的受众。管理员使用它来进行运营：房产、住户、财务、事件、报表和沟通。业主和住户使用它来处理自己的事务，包括支付、服务请求、设施预约、文档和社区信息。该产品将大量分散的手动工作流整合到了一个一致的地方。
问题
运营一个住宅社区意味着同时兼顾许多移动的部分：住户和业主记录、维护和服务请求、设施预约、投诉、支付历史、对账单、检查和事件报告以及公告。当这些内容分散在电子表格、电子邮件主题和脱节的工具中时，事情就会从缝隙中溜走。挑战在于构建一个单一的界面，既服务于运营团队，又服务于他们照顾的住户这两种真正不同的体验，同时随着更多工作流的添加，保持产品快速、一致和可维护。
我的角色与方法
我主导了前端构建：应用架构、共享数据层、可复用 UI 模式，以及将这一切结合在一起的基于角色的结构。作为代码库的最主要贡献者，我设定了后续工作遵循的约定。我的首要任务是避免此类应用通常会陷入的陷阱，即为每个新实体重新构建相同的表格、筛选和表单逻辑。相反，我构建了一小组强大的基元和一个支持权限的外壳，因此添加新工作流成为了一个组合而不是重新构建的问题。
技术栈
主要功能
图集
挑战与解决方案
核心挑战在于界面面积的规模：数十种实体类型，每种都需要跨两个用户角色进行列表、筛选、创建、编辑和导出。每个功能都重写一遍会产生一个不可维护的应用程序。我用可复用的基元和一个可配置的、由权限驱动的导航模型解决了这个问题，因此界面可以适应后端授予的内容，而无需硬编码菜单或重复逻辑。
另一个反复出现的需求是能够在真实世界中留存的状态。我通过 URL 的查询字符串驱动列表分页和筛选，这使视图变得可分享，保持浏览器后退和前进自然工作，并在重新加载时保留表格状态。我将身份验证集中到共享状态和请求层中，以便功能组件保持轻量级，并添加了错误边界、加载状态和会话过期时的优雅重定向，因此一个密集的仪表盘绝不会静默失败。
成果
VCM 是一个真正服务于社区管理双方的单一前端。运营团队在一个管理员工作区中管理完整的物业生命周期，居民在支付、请求、预约和文档上进行自助服务。因为它建立在共享基元和支持权限的外壳之上，随着新工作流的添加，代码库不断扩展，而不是每个新工作流都让它变得更重。