feat: 提交资源
This commit is contained in:
han_han9
226
extensions/max-studio/source/hotupdate/panel.ts
Executable file
226
extensions/max-studio/source/hotupdate/panel.ts
Executable file
@@ -0,0 +1,226 @@
|
||||
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');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user