引言
在零衍门户的实际应用中，不少用户反馈，平台提供的标准组件虽能满足通用场景，但面对企业个性化业务需求时，往往需要自行开发定制组件， 但自行开发组件又面临着诸多问题。对此，我们推出了AI Coding生成自定义组件 功能，通过“需求描述 → 文档生成 → 文档优化 → 代码生成”的完整链路，即时创建新的组件资源，旨在帮助开发者及业务人员更高效地完成门户搭建工作。
自定义门户组件开发的常见挑战
自定义组件是门户搭建体系中的重要扩展机制。平台提供标准化的组件开发规范，用户按规范编写代码并上传后，即可像标准组件一样在门户中拖拽配置。但在实际执行中，开发过程常面临以下问题：
◆ 研发周期紧张： 业务需求提出到上线往往时间紧迫，传统开发流程需经历设计、编码、测试等环节，难以快速响应。
◆ 质量与体验要求高： 组件需兼顾视觉风格、交互细节、数据联动及多端适配，开发成本与调试难度不容忽视。
◆ 技术门槛存在： 部分门户管理员具备业务知识但缺乏前端开发经验，自行编码的可行性较低。
上述因素导致自定义组件的应用潜力未能充分释放。
AI 生成自定义门户组件
降低技术门槛，提升产出效率
用户在搭建门户过程中通常会先快速通过标准组件先搭建出一个基础门户。
然后补充添加自定义组件来不断丰富门户的内容，用户只需通过自然语言描述组件的功能、样式和交互需求，AI即可帮你生成符合平台开发规范的完整组件代码，并实时呈现预览效果。该功能的核心价值在于：将“人工编码”转变为“需求描述”，有效缩短从构思到上线的路径。
整个流程围绕“需求文档”这一核心产物展开，包含以下三个关键阶段：
阶段一：生成需求文档
用户在 AI 对话界面中，用自然语言描述组件需求（如功能用途、包含元素、交互方式等）。AI 自动解析用户的描述，生成一份结构化的需求 Markdown 文档。该文档涵盖组件名称、功能说明、UI 布局、数据字段定义、交互行为等关键信息，作为后续生成的依据。
阶段二：持续优化需求文档
需求文档生成后，用户可通过两种方式对其进行优化调整：
◈直接编辑文档： 在界面上手动修改 Markdown 文档中的内容，精确定制每一处细节。
◈ 继续对话沟通： 在对话框中继续提出修改意见（如“增加筛选条件”“调整数据展示格式”等），AI 会根据反馈自动更新需求文档。
这一阶段支持多轮迭代，直至需求文档完全符合预期。
阶段三：生成组件并实时预览
◈ 需求文档定稿后，用户提交生成指令，AI 据此生成完整的组件代码（包含样式、逻辑、Props 定义及注释）。组件生成后，直接在 AI 对话框内即可进行预览。
◈ 此外，预览页面还支持用户在线查看并编辑组件源代码，专业开发者可以进行更精细的调整。
与标准门户配置的协同
◈ 门户配置： 侧重于利用现有组件库，快速通过拖拽完成页面布局与配置。
◈ AI生成自定义组件： 侧重于在缺少现成组件时，通过“需求描述 → 文档生成 → 文档优化 → 代码生成”的完整链路，即时创建新的组件资源。
两者结合，可构建完整的门户搭建闭环——既支持快速拼装，也支持按需扩展，从而实现更灵活、自主的页面构建流程，搭建出样式美观，功能丰富的门户页面。
小结
AI 生成自定义组件功能，将组件开发从传统的“编码实现”转变为“需求表达 + 文档协作”的模式，通过结构化的需求文档作为中间载体，既保留了人工精调的空间，又借助 AI 大幅降低了编码工作量。无论是专业前端开发者，还是业务侧人员，均可借助该能力更高效地满足复杂多变的业务场景，帮助用户将更多精力投入到业务创新中。
零衍致力于系统管理降本增效，让系统管理变得更简单。欢迎联系零衍运营人员申请试用~
操作手册
汉得焱牛开放平台 文档>技术产品>零衍系统管理平台KINGPAAS
联系邮箱
试用零衍管理平台期间，若您有任何问题需要咨询，都可前往焱牛开放平台（open.hand-china.com）提反馈，或将疑问发往联系邮箱，我们有专业人员针对您的问题进行解决回复，有技术精良的研发团队根据您的反馈进行应用优化。期待您的反馈，我们将用心对待每一份回应。 .com）提反馈，或将疑问发往联系邮箱，我们有专业人员针对您的问题进行解决回复，有技术精良的研发团队根据您的反馈进行应用优化。期待您的反馈，我们将用心对待每一份回应。
