低代码智库平台产品系统Vibe Coding

本项目为电力政企数字化智库配套的低代码可视化页面搭建平台，针对单位内部各类业务报表、资料台账、数据看板需求立项。传统开发模式需求变更周期长、重复页面开发工作量大，业务人员无法自主配置页面。本平台提供拖拽式可视化搭建能力，业务人员无需编写代码即可快速生成业务表单、数据统计页面、文档查阅看板，快速适配智库资料归档、政策汇总、数据分析、内部调研填报等多样化业务场景，大幅缩短页面迭代上线周期，降低信息化定制开发成本。

项目主要包含组件设计器、页面设计器、属性配置面板、数据配置面板、事件配置面板、预览发布、保存回显等功能模块。支持导航树、基础表格、序列图、图片、外链、HTML、PDF、Word 等多种组件的配置化接入。用户可以通过拖拽组件到画布中，配置组件基础属性、高级属性、数据接口、事件联动和展示字段，最终生成可预览、可保存、可复用的业务页面。系统还支持组件选中联动、左侧物料高亮、右侧属性动态切换、配置回显、文件预览和图表展示等能力。可视化拖拽画布模块：内置基础布局、输入表单、选择控件、图表、文本容器等物料组件，支持拖拽添加、层级调整、复制删除、缩放对齐，可视化完成页面排版布局；
组件属性配置面板：可修改组件样式、文字内容、绑定后端接口数据源、配置字段联动、显隐判断、数据校验规则，实现业务逻辑可视化配置；
数据可视化模块：内置折线图、柱状图、饼图、表格等图表组件，可绑定接口数据自动渲染统计看板，支持筛选、分页、数据导出；
文件在线预览模块：支持智库 PDF、Word、Excel 政策文档在线预览、分页查看，适配不同格式资料查阅场景；
项目保存、预览与发布：将页面配置数据序列化存储，随时回显编辑，一键预览最终页面效果，发布后生成独立访问地址供内部人员使用；
权限管控模块：区分编辑者、查看者角色，控制页面编辑权限与访问权限，适配内部涉密智库资料管理要求。

我作为低代码智库平台前端核心开发者，主导并参与了平台前端核心能力从0到1的设计与落地。项目不是简单开发业务页面，而是搭建一套可扩展、可维护、可持续接入组件的低代码编辑器体系。我从整体架构、组件模型、拖拽交互、属性配置、数据绑定、事件联动、预览渲染、保存回显等方面进行了系统设计。
在架构上，我将平台拆分为组件编辑器、页面编辑器、物料体系、属性配置体系、数据配置体系、事件配置体系、渲染器和配置适配器等模块。组件编辑器负责定义组件能力，页面编辑器负责拖拽搭建页面，渲染器负责根据配置还原真实页面，适配器负责保存、回显、默认值补齐和格式转换，保证后续新增组件和扩展功能可低成本接入。
在物料体系上，我抽象了导航、列表、图表、工具、文本、报表、嵌入等组件分类，并为每类组件设计统一配置模型。每个组件包含基础属性、高级属性、数据结构、事件配置和预览渲染逻辑，实现“拖入的是组件，保存的是配置，预览时通过配置还原页面”的核心能力。
在配置模型上，我设计并落地了 propertyConfig、dataStructureConfig、eventConfig 三段式结构，分别负责属性样式、数据接口字段和组件事件联动，并通过适配器统一完成保存、更新、回显和默认值补齐，解决复杂组件配置难维护的问题。
在交互和事件能力上，我实现了拖拽画布、组件选中、高亮、左侧物料联动、右侧属性面板动态切换、预览发布和保存回显等能力。同时设计了“来源组件、来源控件、事件类型、目标组件、接口信息、参数映射、展示字段”的事件配置模型，使查询按钮可以驱动表格、图表等目标组件重新请求数据，实现页面级低代码联动。
我完成了导航树、基础表格、序列图、图片、外链、HTML、PDF、Word 等组件的低代码化接入，并解决图表变形、组件实例ID冲突、事件重复触发、同组件多次拖入、预览初始化查询等问题。