oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2026-04-29 21:54:37 +08:00
1 parent 3620369d47
commit 217838c615
11 files changed
+1268 -1022
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/file-preview/g3-file/index.js
+83 -346
View File
@@ -65,16 +65,17 @@
*/
data: [],
mode: "aliyun",
onBeforeDelete: null,
onDeleteBefore: null,
onDelete: null,
onDownload: null,
onSelect: null,
onUpload: null,
onUploadBefore: null,
onDblClick: null,
onUploadSuccess: null,
onUploadError: null,
onUploadComplete: null,
onPreview: null,
getActionMenu: null,
customActionMenu: null,
language: "zh-CN",
maxFileSize: 10 * 1024 * 1024,
// 上传配置
@@ -313,23 +314,6 @@
</div>
</div>
<div class="g3-global-menu"></div>
<div class="g3-modal-overlay">
<div class="g3-modal">
<div class="g3-modal-header">
<span class="g3-modal-title"></span>
<div class="g3-modal-actions">
<button class="g3-modal-btn g3-modal-btn-toggle" title="${this.language.modal.maximize}">
${G3FileIcons.modal.maximize}
</button>
<button class="g3-modal-btn g3-modal-btn-close" title="${this.language.modal.close}">
${G3FileIcons.modal.close}
</button>
</div>
</div>
<div class="g3-modal-body"></div>
<div class="g3-modal-footer"></div>
</div>
</div>
</div>
`;
@@ -353,14 +337,6 @@
this.$previewName = this.$container.find(".g3-preview-name");
this.$previewCounter = this.$container.find(".g3-preview-counter");
this.$modalOverlay = this.$container.find(".g3-modal-overlay");
this.$modal = this.$container.find(".g3-modal");
this.$modalTitle = this.$container.find(".g3-modal-title");
this.$modalBody = this.$container.find(".g3-modal-body");
this.$modalBtnToggle = this.$container.find(".g3-modal-btn-toggle");
this.$modalBtnClose = this.$container.find(".g3-modal-btn-close");
this.$modalFooter = this.$container.find(".g3-modal-footer");
return this;
},
@@ -431,7 +407,10 @@
var rect = $anchor[0].getBoundingClientRect();
var $mainContainer = this.$container.find(".main");
var mainRect = $mainContainer.length > 0 ? $mainContainer[0].getBoundingClientRect() : null;
var mainRect =
$mainContainer.length > 0
? $mainContainer[0].getBoundingClientRect()
: null;
var menuWidth = 160;
var itemHeight = 36;
@@ -549,12 +528,18 @@
// <span>${G3FileUtils.formatDate(file.uploadDate)}</span>
var actionMenuItems = (this.options.getActionMenu && this.options.getActionMenu(file)) || [];
var moreActionHtml = actionMenuItems && actionMenuItems.length > 0 ? `
var actionMenuItems =
(this.options.customActionMenu &&
this.options.customActionMenu(file)) ||
[];
var moreActionHtml =
actionMenuItems && actionMenuItems.length > 0
? `
<div class="g3-file-action g3-action-more" title="${this.language.more}">
${G3FileIcons.action.more}
</div>
` : "";
`
: "";
return `
<div class="g3-file-item" data-id="${file._id}">
@@ -845,7 +830,10 @@
var $currentIframe = $content.find(".g3-preview-iframe.current");
var $nextIframe = $content.find(".g3-preview-iframe.next");
if ($nextIframe.length && this.previewCache.nextUrl === fullPreviewUrl) {
if (
$nextIframe.length &&
this.previewCache.nextUrl === fullPreviewUrl
) {
$currentIframe.removeClass("current").addClass("next").hide();
$nextIframe.removeClass("next").addClass("current").show();
this.previewCache.currentUrl = fullPreviewUrl;
@@ -880,12 +868,14 @@
newIframe.on("error", function () {
newIframe.remove();
self.showPlaceholder($content, `<p class="g3-url-error">${self.language.urlError}</p>`);
self.showPlaceholder(
$content,
`<p class="g3-url-error">${self.language.urlError}</p>`,
);
});
$content.append(newIframe);
this.previewCache.nextUrl = fullPreviewUrl;
} else {
this.previewCache = null;
var tipsHtml = "";
@@ -910,285 +900,6 @@
`);
},
showModalPlaceholder: function ($container, tipsHtml) {
$container.find(".g3-modal-preview-iframe").remove();
$container.html(`
<div class="g3-modal-preview-placeholder">
${tipsHtml}
</div>
`);
},
openModal: function (options) {
var defaults = {
title: "",
content: "",
width: "80%",
height: "80%",
showToggle: true,
showClose: true
};
var opts = $.extend({}, defaults, options);
this.$modalTitle.text(opts.title || "");
this.$modalBody.html(opts.content || "");
this.$modal.css({
width: opts.width,
height: opts.height
});
this.$modalBtnToggle.toggle(opts.showToggle);
this.$modalBtnClose.toggle(opts.showClose);
this.$modalOverlay.addClass("is-visible");
this.$modal.removeClass("is-maximized");
this.$modalBtnToggle.html(G3FileIcons.modal.maximize);
this.$modalBtnToggle.attr("title", this.language.modal.maximize);
},
openPreviewModal: function (fileId) {
var file = this.getFileById(fileId);
if (!file) return;
var isUploaded = file.status === "uploaded";
var isPreviewable = this.isPreviewableFile(file.name);
var fileUrl = file.url && file.url !== "" ? file.url : null;
var toolbarHtml = `
<div class="g3-modal-preview-toolbar">
<div class="g3-modal-preview-nav">
<button class="g3-modal-preview-btn g3-modal-preview-prev" disabled>
${G3FileIcons.preview.prev}
</button>
<span class="g3-modal-preview-counter">0/0</span>
<button class="g3-modal-preview-btn g3-modal-preview-next" disabled>
${G3FileIcons.preview.next}
</button>
</div>
<div class="g3-modal-preview-filename">${file.name}</div>
</div>
`;
var contentHtml = "";
if (isUploaded && fileUrl && isPreviewable) {
var previewUrl = this.options.previewUrl || "";
var fullPreviewUrl = previewUrl
? previewUrl + G3FileUtils.base64Encode(fileUrl)
: fileUrl;
contentHtml = `
<div class="g3-modal-preview-content">
<iframe
src="${fullPreviewUrl}"
class="g3-modal-preview-iframe current"
frameborder="0"
allowfullscreen
></iframe>
</div>
`;
} else {
var tipsHtml = "";
if (!isUploaded) {
tipsHtml = `<p class="g3-upload-tip">${this.language.uploadToPreview}</p>`;
} else if (!isPreviewable) {
tipsHtml = `<p class="g3-cannot-preview">${this.language.downloadToPreview}</p>`;
} else if (!fileUrl) {
tipsHtml = `<p class="g3-url-error">${this.language.urlError}</p>`;
}
contentHtml = `
<div class="g3-modal-preview-content">
<div class="g3-modal-preview-placeholder">
${tipsHtml}
</div>
</div>
`;
}
var previewContent = toolbarHtml + contentHtml;
this.currentModalFileId = fileId;
this.openModal({
title: this.language.filePreview,
content: previewContent,
width: "90%",
height: "90%",
});
var self = this;
setTimeout(function () {
self.$modal.find(".g3-modal-preview-prev").off("click").on("click", function () {
self.modalPrev();
});
self.$modal.find(".g3-modal-preview-next").off("click").on("click", function () {
self.modalNext();
});
self.updateModalPreviewCounter(fileId);
}, 0);
},
updateModalPreviewCounter: function (fileId) {
var allFiles = this.getUploadedFiles();
var currentIndex = allFiles.findIndex(function (f) { return f._id === fileId; });
var total = allFiles.length;
var $counter = this.$modal.find(".g3-modal-preview-counter");
var $prevBtn = this.$modal.find(".g3-modal-preview-prev");
var $nextBtn = this.$modal.find(".g3-modal-preview-next");
if ($counter.length) {
$counter.text((currentIndex + 1) + "/" + total);
}
if ($prevBtn.length) {
$prevBtn.prop("disabled", currentIndex === 0);
}
if ($nextBtn.length) {
$nextBtn.prop("disabled", currentIndex === total - 1);
}
},
modalPrev: function () {
var uploadedFiles = this.getUploadedFiles();
if (uploadedFiles.length === 0) return;
var currentIndex = this.getPreviewFileIndex(this.currentModalFileId);
var newIndex = currentIndex > 0 ? currentIndex - 1 : uploadedFiles.length - 1;
this.currentModalFileId = uploadedFiles[newIndex]._id;
this.updateModalPreviewWithFile(uploadedFiles[newIndex]);
},
modalNext: function () {
var uploadedFiles = this.getUploadedFiles();
if (uploadedFiles.length === 0) return;
var currentIndex = this.getPreviewFileIndex(this.currentModalFileId);
var newIndex = currentIndex < uploadedFiles.length - 1 ? currentIndex + 1 : 0;
this.currentModalFileId = uploadedFiles[newIndex]._id;
this.updateModalPreviewWithFile(uploadedFiles[newIndex]);
},
updateModalPreviewWithFile: function (file) {
var $content = this.$modal.find(".g3-modal-preview-content");
var $title = this.$modal.find(".g3-modal-title");
var $filename = this.$modal.find(".g3-modal-preview-filename");
if (!file || !$content.length) return;
$title.text(this.language.filePreview);
if ($filename.length) {
$filename.text(file.name);
}
var isUploaded = file.status === "uploaded";
var isPreviewable = this.isPreviewableFile(file.name);
var fileUrl = file.url && file.url !== "" ? file.url : null;
if (isUploaded && fileUrl && isPreviewable) {
var previewUrl = this.options.previewUrl || "";
var fullPreviewUrl = previewUrl
? previewUrl + G3FileUtils.base64Encode(fileUrl)
: fileUrl;
var newIframe = $(`
<iframe
src="${fullPreviewUrl}"
class="g3-modal-preview-iframe"
frameborder="0"
allowfullscreen
></iframe>
`);
$content.html(newIframe);
} else {
var tipsHtml = "";
if (!isUploaded) {
tipsHtml = `<p class="g3-upload-tip">${this.language.uploadToPreview}</p>`;
} else if (!isPreviewable) {
tipsHtml = `<p class="g3-cannot-preview">${this.language.downloadToPreview}</p>`;
} else if (!fileUrl) {
tipsHtml = `<p class="g3-url-error">${this.language.urlError}</p>`;
}
$content.html(`
<div class="g3-modal-preview-placeholder">
${tipsHtml}
</div>
`);
}
this.updateModalPreviewCounter(file._id);
},
closeModal: function () {
this.$modalOverlay.removeClass("is-visible");
this.$modalBody.html("");
this.$modalTitle.text("");
this.setModalFooter("");
this.currentModalFileId = null;
},
toggleModalSize: function () {
var isMaximized = this.$modal.hasClass("is-maximized");
if (isMaximized) {
this.$modal.removeClass("is-maximized");
this.$modal.css({
width: "80%",
height: "80%",
maxWidth: "none",
borderRadius: "8px"
});
this.$modalBtnToggle.html(G3FileIcons.modal.maximize);
this.$modalBtnToggle.attr("title", this.language.modal.maximize);
} else {
this.$modal.addClass("is-maximized");
this.$modal.css({
width: "100%",
height: "100%",
maxWidth: "none",
borderRadius: "0"
});
this.$modalBtnToggle.html(G3FileIcons.modal.restore);
this.$modalBtnToggle.attr("title", this.language.modal.restore);
}
},
setModalTitle: function (title) {
if (this.$modalTitle) {
this.$modalTitle.text(title || "");
}
},
setModalContent: function (content) {
if (this.$modalBody) {
this.$modalBody.html(content || "");
}
},
setModalSize: function (width, height) {
if (!this.$modal) return;
this.$modal.css({
width: width || "80%",
height: height || "80%"
});
},
setModalFooter: function (content) {
if (!this.$modalFooter) return;
if (content && content.trim()) {
this.$modalFooter.html(content);
this.$modalFooter.addClass("has-content");
} else {
this.$modalFooter.html("");
this.$modalFooter.removeClass("has-content");
}
},
setPreviewFile: function (fileId) {
var file = this.getFileById(fileId);
if (file) {
@@ -1352,9 +1063,6 @@
if (!file) return;
if (!self.hasPermission(file, "view")) return;
self.setPreviewFile(id);
if (typeof self.options.onPreview === "function") {
self.options.onPreview([file]);
}
})
// 下载按钮
.on("click", ".g3-action-download", function (e) {
@@ -1399,12 +1107,9 @@
var file = self.getFileById(id);
if (!file) return;
if (!self.hasPermission(file, "view")) return;
if (typeof self.options.onPreview === "function") {
self.options.onPreview([file]);
}
self.setPreviewFile(id);
})
// 文件项双击打开 modal 预览
// 文件项双击
.on("dblclick", ".g3-file-item", function (e) {
if (
$(e.target).closest(
@@ -1417,8 +1122,25 @@
var file = self.getFileById(id);
if (!file) return;
if (!self.hasPermission(file, "view")) return;
self.openPreviewModal(id);
if (typeof self.options.onDblClick === "function") {
self.options.onDblClick(file);
return;
}
var isUploaded = file.status === "uploaded";
var isPreviewable = self.isPreviewableFile(file.name);
var fileUrl = file.url && file.url !== "" ? file.url : null;
if (isUploaded && fileUrl && isPreviewable) {
var previewUrl = self.options.previewUrl || "";
var fullPreviewUrl = previewUrl
? previewUrl + G3FileUtils.base64Encode(fileUrl)
: fileUrl;
window.open(fullPreviewUrl, "_blank");
}
})
// 更多按钮
.on("click", ".g3-action-more", function (e) {
e.preventDefault();
@@ -1437,23 +1159,6 @@
self.openActionMenu($el, file);
});
// Modal 事件绑定
this.$modalBtnClose.off("click").on("click", function () {
self.closeModal();
});
this.$modalBtnToggle.off("click").on("click", function (e) {
e.preventDefault();
e.stopPropagation();
self.toggleModalSize();
});
this.$modalOverlay.off("click").on("click", function (e) {
if (e.target === this) {
self.closeModal();
}
});
// 任务关闭按钮事件委托
this.$container.on("click", ".g3-task-close", function (e) {
e.preventDefault();
@@ -1575,8 +1280,8 @@
return;
}
if (typeof this.options.onBeforeDelete === "function") {
var result = this.options.onBeforeDelete(files);
if (typeof this.options.onDeleteBefore === "function") {
var result = this.options.onDeleteBefore(files);
if (result === false) return;
if (typeof result.then === "function") {
result.then(function (confirmed) {
@@ -1881,6 +1586,39 @@
return;
}
if (typeof this.options.onUploadBefore === "function") {
var result = this.options.onUploadBefore(pendingFiles);
if (result === false) return;
if (typeof result.then === "function") {
result.then(function (confirmed) {
if (confirmed)
self.internalHandleUpload(
pendingFiles,
customUpload,
concurrency,
);
});
return;
}
if (typeof result === "function") {
result(function (confirmed) {
if (confirmed)
self.internalHandleUpload(
pendingFiles,
customUpload,
concurrency,
);
});
return;
}
}
self.internalHandleUpload(pendingFiles, customUpload, concurrency);
},
internalHandleUpload: function (pendingFiles, customUpload, concurrency) {
var self = this;
var total = pendingFiles.length;
var taskId = this.startTask({
id: G3FileUtils.generateUniqueId(),
@@ -2273,7 +2011,9 @@
*/
openActionMenu: function ($el, file) {
var items =
(this.options.getActionMenu && this.options.getActionMenu(file)) || [];
(this.options.customActionMenu &&
this.options.customActionMenu(file)) ||
[];
this.actionMenuState = {
open: true,
@@ -2404,10 +2144,7 @@
}
if (
Object.prototype.hasOwnProperty.call(
partialState,
"globalPermission",
)
Object.prototype.hasOwnProperty.call(partialState, "globalPermission")
) {
this.updatePermissions(partialState.globalPermission);
}