请求分步指导：为Kylo Feed Creation Wizard添加自定义Stepper-UI步骤

我之前折腾过Kylo Feed Creation Wizard的自定义步骤开发，踩过不少坑，给你梳理下完整的分步流程，应该能帮你理清思路：

1. 先搭好插件的基础结构 #

• 先把官方示例插件拉到本地，虽然文档写得简略，但它的项目结构是标准模板，你可以照着这个架子搭自己的项目。核心要分两个模块：ui（放前端资源）和core（后端配置，按需添加）
• 确保Maven依赖里正确引入Kylo的相关包，比如kylo-feed-stepper-plugin-api和kylo-ui，版本必须和你在用的Kylo完全一致，不然容易出兼容性问题
• 参考示例的目录结构，别乱改层级：

  your-plugin/
  ├── core/
  │   ├── src/main/java/com/yourcompany/plugin/
  │   └── pom.xml
  ├── ui/
  │   ├── src/main/resources/static/
  │   │   ├── app/
  │   │   │   ├── feed-stepper/
  │   │   │   │   ├── your-custom-step/
  │   │   │   │   │   ├── your-custom-step.controller.js
  │   │   │   │   │   ├── your-custom-step.html
  │   │   │   │   │   └── your-custom-step.module.js
  │   │   │   └── plugins.js
  │   └── pom.xml
  └── pom.xml
  

2. 前端自定义步骤开发（核心部分） #

2.1 注册你的步骤到Stepper #

在your-custom-step.module.js里定义Angular模块，依赖kyloFeedStepper，然后注册你的步骤：

angular.module('yourCustomStep', ['kyloFeedStepper'])
    .config(['feedStepperProvider', function(feedStepperProvider) {
        // 注册自定义步骤
        feedStepperProvider.addStep({
            id: 'custom-step', // 唯一ID，别和现有步骤重复
            name: '我的自定义步骤', // 显示在Stepper上的名称
            templateUrl: 'app/feed-stepper/your-custom-step/your-custom-step.html',
            controller: 'YourCustomStepController',
            order: 2, // 控制步骤位置，比如2就是在"基础信息"之后
            validators: { required: true } // 设置是否必填，可选
        });
    }]);

2.2 写步骤的控制器逻辑 #

在your-custom-step.controller.js里处理数据绑定和交互逻辑，重点是和Stepper的feedModel联动，这样数据才能在步骤间传递：

angular.module('yourCustomStep')
    .controller('YourCustomStepController', ['$scope', function($scope) {
        // 绑定父级的feedModel，用来获取/保存自定义数据
        $scope.feed = $scope.$parent.feedModel;

        // 初始化自定义字段，避免空指针
        if (!$scope.feed.customData) {
            $scope.feed.customData = {};
        }

        // 可选：监听步骤激活事件，比如进入步骤时加载数据
        $scope.$on('feed-stepper-step-activated', function(event, stepId) {
            if (stepId === 'custom-step') {
                // 这里写步骤激活时的逻辑，比如从后端拉取配置
            }
        });
    }]);

2.3 编写步骤的HTML模板 #

your-custom-step.html里写你的表单内容，用Angular的双向绑定和feed对象关联：

<div class="step-content">
    <h3>我的自定义步骤</h3>
    <form name="customStepForm">
        <div class="form-group">
            <label>自定义字段</label>
            <input type="text" class="form-control" ng-model="feed.customData.customField" required>
            <p class="help-block">这里可以添加字段说明</p>
        </div>
    </form>
</div>

2.4 让Kylo加载你的插件 #

在plugins.js里把你的模块加到Kylo的依赖里，不然启动时不会加载：

angular.module('kylo').requires.push('yourCustomStep');

3. 后端配置（按需添加） #

如果需要在后端做数据验证、预处理或者持久化，就需要在core模块里实现FeedStepPlugin接口：

package com.yourcompany.plugin;

import com.thinkbiganalytics.feedmgr.service.feed.FeedStepPlugin;
import com.thinkbiganalytics.metadata.api.feed.Feed;
import org.springframework.stereotype.Component;

@Component
public class CustomFeedStepPlugin implements FeedStepPlugin {

    @Override
    public String getStepId() {
        return "custom-step"; // 和前端注册的ID保持一致
    }

    @Override
    public void validate(Feed feed) {
        // 自定义验证逻辑，比如检查必填字段
        if (feed.getFeedMetadata().get("customData") == null) {
            throw new IllegalArgumentException("自定义数据不能为空");
        }
    }

    @Override
    public void beforeSave(Feed feed) {
        // 保存前的预处理逻辑，比如格式化数据
    }
}

然后在core/src/main/resources/META-INF/spring下创建Spring配置文件，注册这个Bean：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

    <bean class="com.yourcompany.plugin.CustomFeedStepPlugin"/>
</beans>

4. 打包部署 #

• 用Maven打包：执行mvn clean install，会生成your-plugin-ui-*.jar和your-plugin-core-*.jar两个包
• 把这两个Jar包放到Kylo的plugins目录（默认是/opt/kylo/plugins）
• 重启Kylo服务，登录后新建Feed，就能看到你的自定义步骤出现在Stepper流程里了

常见坑排查 #

• 步骤不显示：检查plugins.js有没有正确引入模块，或者模块依赖写错了
• 数据不保存：确认feedModel绑定正确，后端插件的beforeSave有没有处理自定义数据
• 报错看日志：Kylo的UI日志在/opt/kylo/logs/kylo-ui.log，服务端日志在kylo-services.log，大部分问题都能在日志里找到原因

内容的提问来源于stack exchange，提问作者Sudarshan Sunder