MLZ-Advanced
面向土地与房产销售的全流程商业平台：集成公开线索获取、基于地图的客户选购旅程，以及涵盖房源库存、交易销售、款项收支与业务审批的综合型内部管理控制台。
Next.js 16
React 19
TypeScript
Prisma + MongoDB
Mapbox GL
SCSS
Recharts
概览
MLZ-Advanced 是驱动地产销售业务运转的综合运营平台。前端面向公众与客户：提供品牌着陆页、基于地图的项目与地块交互式浏览，以及支持手机号验证的认购意向提交流程。后台则提供深度定制的内部控制台，供团队统一管理整套销售运营体系，涵盖房源库存、客户关系、认购申请、款项收付、审批流、数据报表及联络沟通。这是一套长期演进的大型企业级应用，以渐进式 Web 应用 (PWA) 形式交付，并原生支持阿拉伯语与英语双语运行。
问题
土地和地块销售涉及大量难以理清的状态。每个地块都关联着定价、尺寸、朝向、产权归属、市政配套设施，以及随着销售推进而动态变更的状态。客户经历从线索、商机到成交买家的逐步转化，付款方式涵盖多种结构且均需审批，转售、取消、权限变更等诸多操作也必须经过签字核准。依靠电子表格和分散孤立的工具根本无法规模化运作。该业务需要一套统揽对外面向客户的业务旅程与内部后台运转机制的统一系统，并具备房地产运营所必需的完整审计追踪和审批流能力。
我的角色与方法
这是一个长期演进的大型团队项目，我在其中担任前端工程师。代码库经过合理组织，使得公众访客、注册客户及内部员工等不同受众群体在共用同一套部署的同时，能够通过路由分组和权限机制保持清晰隔离。我的大部分前端工作聚焦于高交互界面：地图、批量编辑器、图表，以及员工实际开展日常工作的数据密集型详情视图，这些均作为客户端组件构建在服务端渲染且受访问控制的数据层之上。
技术栈
主要功能
图集
挑战与解决方案
该平台通过单个应用同时服务三类受众，这种架构极易出现设计偏差。该架构借助 Next.js 路由分组（route groups），让公开展示网站、客户购买旅程和内部管理控制台在共享单套部署的同时，按功能与权限严格隔离。控制台布局本身会加载当前登录用户，推导其所属部门的可用模块，并相应筛选导航菜单。
在真实数据量下的性能表现是另一个持续面临的挑战。土地库存意味着庞大的列表、高负荷的地图以及高数据密度的详情页，因此该应用将数据获取与权限校验保留在服务端，并将客户端组件专门留给真正需要交互的部分：地图、批量表格编辑器、图表与模态框。虚拟化列表确保了长表格的流畅响应，地图数据经过 GeoJSON 转换，使得地块作为真实的地理空间对象而非静态图像进行渲染。
成果
MLZ-Advanced 是一套完备的系统，涵盖房地产业务从公开访客到最终完成核准、付款销售的全流程，并具备该业务运作所必需的库存明细、CRM 深度功能与审批审计追踪。其历时多年的持续活跃代码库与庞大规模，充分印证了这是一套真正支撑实际业务运转的成熟平台，而非实验性原型。