box-client/packages/build-helper/panel/index.js

const setting = Editor.require('packages://build-helper/core/build-setting.js');

// panel/index.js, this filename needs to match the one registered in package.json
Editor.Panel.extend({
    // css style for panel
    style: `
        :host {
            display: flex;
            flex-direction: column;
        }

        .wrapper {
            box-sizing: border-box;
            border: 2px solid white;
            font-size: 20px;
            font-weight: bold;
        }

        .top {
            height: 50px;
            border-color: red;
        }

        .middle {
            flex: 1;
            border-color: green;

            overflow-y: auto;
            overflow-x: hidden;
        }

        .bottom {
            height: 50px;
            border-color: blue;
        }
    `,

    // html template for panel
    template: `
        <div class="wrapper top layout horizontal center">
            <ui-select id="module" class="massive" value="assets-crypto-setting">
                <option value="assets-hotupdate-setting">资源热更</option>
                <option value="assets-obfuscator-setting">代码混淆</option>
                <option value="assets-compress-setting">资源压缩</option>
                <option value="assets-crypto-setting">资源加密</option>
                <option value="assets-android-pack-setting">安卓打包</option>
            </ui-select>
        </div>

        <div id="view" class="wrapper middle scroll">

        </div>

        <div class="wrapper bottom layout horizontal center-justified">
            <ui-button id="btn" class="massive">保存配置</ui-button>
        </div>
    `,

    // method executed when template and styles are successfully loaded and initialized
    ready () {
        // 加载编译配置
        setting.getInstance().load();

        this.$ = {
            module: this.shadowRoot.querySelector('#module'),
            view: this.shadowRoot.querySelector('#view'),
            btn: this.shadowRoot.querySelector('#btn')
        };

        // 模块
        let moduleValue = this.profiles.local.data.module;
        if (!moduleValue) {
            moduleValue = this.$.module.value;
            this.profiles.local.data.module = moduleValue;
        }
        this.$.module.value = moduleValue;
        this.showPreview(moduleValue);
        this.$.module.addEventListener('confirm', event => {
            let value = event.target.value;

            this.profiles.local.data.scrollTop = 0;
            this.profiles.local.data.module = value;
            this.profiles.local.save();

            this.showPreview(value);
        });

        this.$.btn.addEventListener('confirm', (event) => {
            this.saveSetting();
        });
    },

    close () {
        this.profiles.local.data.scrollTop = this.$.view.scrollTop;
        this.profiles.local.save();
    },

    showPreview (modeule) {
        Editor.import(`packages://build-helper/panel/${modeule}.js`).then(initFn => {
            initFn(this);
            setTimeout(() => {
                this.$.view.scrollTop = this.profiles.local.data.scrollTop;
            }, 10);
        });
    },

    getSettingItem (key) {
        return setting.getInstance().getItem(key);
    },

    setSettingItem (key, value) {
        setting.getInstance().setItem(key, value);
    },

    saveSetting () {
        setting.getInstance().save();

        let config = setting.getInstance().getConfig();
        Editor.Ipc.sendToMain('build-helper:panel-saved-setting', config);
    },

    // register your ipc messages here
    messages: {

    }
});