Max-Cocos-Demo/extensions/max-studio/source/hotupdate/panel.ts

import { IBuildTaskOption } from "@cocos/creator-types/editor/packages/builder/@types";

export const style = `
.hotupdate-plugin {
    padding: 10px;
}

.minio-section {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.minio-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.minio-config-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.minio-config-row ui-label {
    width: 120px;
    min-width: 120px;
}

.minio-config-row ui-input,
.minio-config-row ui-checkbox {
    flex: 1;
    margin-left: 10px;
}

.minio-test-button {
    margin-top: 10px;
}
`;

export const temple = `
<div class="hotupdate-plugin">
    <div class="minio-section">
        <div class="minio-title">MinIO 上传配置</div>

        <div class="minio-config-row">
            <ui-label value="自动上传"></ui-label>
            <ui-checkbox id="minio-auto-upload"></ui-checkbox>
        </div>

        <div class="minio-config-row">
            <ui-label value="服务器地址"></ui-label>
            <ui-input id="minio-endpoint" placeholder="例: minio.example.com:9000"></ui-input>
        </div>

        <div class="minio-config-row">
            <ui-label value="Access Key"></ui-label>
            <ui-input id="minio-access-key" placeholder="Access Key ID"></ui-input>
        </div>

        <div class="minio-config-row">
            <ui-label value="Secret Key"></ui-label>
            <ui-input id="minio-secret-key" type="password" placeholder="Secret Access Key"></ui-input>
        </div>

        <div class="minio-config-row">
            <ui-label value="存储桶名称"></ui-label>
            <ui-input id="minio-bucket" placeholder="hotupdate"></ui-input>
        </div>

        <div class="minio-config-row">
            <ui-label value="使用SSL"></ui-label>
            <ui-checkbox id="minio-use-ssl"></ui-checkbox>
        </div>

        <div class="minio-config-row">
            <ui-label value="路径前缀"></ui-label>
            <ui-input id="minio-path-prefix" placeholder="hotupdate"></ui-input>
        </div>

        <div class="minio-test-button">
            <ui-button id="test-minio-connection">测试连接</ui-button>
        </div>
    </div>
</div>
`;

export const $ = {
    root: '.hotupdate-plugin',
    minioAutoUpload: '#minio-auto-upload',
    minioEndpoint: '#minio-endpoint',
    minioAccessKey: '#minio-access-key',
    minioSecretKey: '#minio-secret-key',
    minioBucket: '#minio-bucket',
    minioUseSSL: '#minio-use-ssl',
    minioPathPrefix: '#minio-path-prefix',
    testButton: '#test-minio-connection',
}

export async function update(options: IBuildTaskOption, key: string) {
    console.log(`update options ${options} and key ${key}`);
    if (key) {
        return;
    }

    updateMinIOConfigFromOptions(options);
}

export async function ready(options: IBuildTaskOption) {
    console.log(`ready options ${options}`);
    init();
    updateMinIOConfigFromOptions(options);
}

export async function close() {
    // 清理资源
}

function init() {
    // 绑定测试连接按钮事件
    const testButton = document.querySelector($.testButton) as HTMLElement;
    if (testButton) {
        testButton.addEventListener('click', testMinIOConnection);
    }

    // 绑定自动上传复选框事件
    const autoUploadCheckbox = document.querySelector($.minioAutoUpload) as HTMLInputElement;
    if (autoUploadCheckbox) {
        autoUploadCheckbox.addEventListener('change', onAutoUploadChange);
    }
}

/**
 * 从构建选项中更新MinIO配置
 */
function updateMinIOConfigFromOptions(options: IBuildTaskOption) {
    const config = options.packages?.['max-framework'];
    if (!config) return;

    // 更新UI元素的值
    updateInputValue($.minioAutoUpload, config.minioAutoUpload);
    updateInputValue($.minioEndpoint, config.minioEndpoint);
    updateInputValue($.minioAccessKey, config.minioAccessKeyId);
    updateInputValue($.minioSecretKey, config.minioSecretAccessKey);
    updateInputValue($.minioBucket, config.minioBucketName);
    updateInputValue($.minioUseSSL, config.minioUseSSL);
    updateInputValue($.minioPathPrefix, config.minioPathPrefix);
}

/**
 * 更新输入框的值
 */
function updateInputValue(selector: string, value: any) {
    const element = document.querySelector(selector) as HTMLInputElement;
    if (element) {
        if (element.type === 'checkbox') {
            element.checked = Boolean(value);
        } else {
            element.value = String(value || '');
        }
    }
}

/**
 * 自动上传复选框变化事件
 */
function onAutoUploadChange(event: Event) {
    const checkbox = event.target as HTMLInputElement;
    const isEnabled = checkbox.checked;

    // 可以在这里添加额外的逻辑，比如当启用自动上传时显示警告
    if (isEnabled) {
        console.log('已启用MinIO自动上传');
    }
}

/**
 * 测试MinIO连接
 */
async function testMinIOConnection() {
    try {
        // 获取当前配置
        const config = {
            endpoint: (document.querySelector($.minioEndpoint) as HTMLInputElement)?.value || '',
            accessKeyId: (document.querySelector($.minioAccessKey) as HTMLInputElement)?.value || '',
            secretAccessKey: (document.querySelector($.minioSecretKey) as HTMLInputElement)?.value || '',
            bucketName: (document.querySelector($.minioBucket) as HTMLInputElement)?.value || '',
            useSSL: (document.querySelector($.minioUseSSL) as HTMLInputElement)?.checked || false,
            pathPrefix: (document.querySelector($.minioPathPrefix) as HTMLInputElement)?.value || ''
        };

        // 验证必填字段
        if (!config.endpoint || !config.accessKeyId || !config.secretAccessKey || !config.bucketName) {
            alert('请填写完整的MinIO配置信息');
            return;
        }

        // 添加加载状态
        const testButton = document.querySelector($.testButton) as HTMLElement;
        const originalText = testButton.textContent;
        testButton.textContent = '测试中...';
        testButton.setAttribute('disabled', 'true');

        // 这里可以添加实际的连接测试逻辑
        // 由于在面板环境中，我们只做基本验证
        await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟网络请求

        alert('MinIO配置验证通过！\n注意：实际连接测试将在构建时进行。');

        // 恢复按钮状态
        testButton.textContent = originalText;
        testButton.removeAttribute('disabled');

    } catch (error) {
        console.error('测试MinIO连接失败:', error);
        alert(`测试失败: ${error}`);

        // 恢复按钮状态
        const testButton = document.querySelector($.testButton) as HTMLElement;
        testButton.textContent = '测试连接';
        testButton.removeAttribute('disabled');
    }
}