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 17:29:52 +08:00
1 parent 3464bc7907
commit 3620369d47
9 files changed
+1270 -635
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/file-preview/g3-file/index.js
+459 -63
View File
@@ -88,14 +88,11 @@
},
// 全局权限（支持对象或函数）
globalPermission: {
select: true,
upload: true,
download: true,
delete: true,
view: true,
},
// 单文件权限解析函数（仅支持函数）
filePermissionResolver: null,
},
// ============================================================================
@@ -268,7 +265,7 @@
</button>
<button class="g3-btn g3-btn-delete-all" disabled>
${G3FileIcons.action.delete}
${this.language.delete}
${this.language.deleteBatch}
</button>
</div>
<div class="g3-main" style="display: none;">main</div>
@@ -316,6 +313,23 @@
</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>
`;
@@ -339,6 +353,14 @@
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;
},
@@ -403,9 +425,13 @@
var $anchor = $(actionMenuState.anchorEl).closest(".g3-action-more");
if (!$anchor.length) {
return;
}
var rect = $anchor[0].getBoundingClientRect();
var $mainContainer = this.$container.find(".main");
var mainRect = $mainContainer[0].getBoundingClientRect();
var mainRect = $mainContainer.length > 0 ? $mainContainer[0].getBoundingClientRect() : null;
var menuWidth = 160;
var itemHeight = 36;
@@ -414,29 +440,51 @@
var top = rect.bottom;
var left = rect.right - menuWidth;
var spaceBottom = mainRect.bottom - rect.bottom; // main 容器底部到锚点的距离
var spaceTop = rect.top - mainRect.top; // 锚点到 main 容器顶部的距离
if (mainRect) {
var spaceBottom = mainRect.bottom - rect.bottom; // main 容器底部到锚点的距离
var spaceTop = rect.top - mainRect.top; // 锚点到 main 容器顶部的距离
var openUp = spaceBottom < menuHeight && spaceTop > menuHeight;
var openUp = spaceBottom < menuHeight && spaceTop > menuHeight;
if (openUp) {
top = rect.top - menuHeight; // 在锚点上方显示
}
if (openUp) {
top = rect.top - menuHeight; // 在锚点上方显示
}
// 确保菜单不超出 main 容器左右边界
if (left < mainRect.left) {
left = mainRect.left;
}
if (left + menuWidth > mainRect.right) {
left = mainRect.right - menuWidth;
}
// 确保菜单不超出 main 容器左右边界
if (left < mainRect.left) {
left = mainRect.left;
}
if (left + menuWidth > mainRect.right) {
left = mainRect.right - menuWidth;
}
// 确保菜单不超出 main 容器上下边界
if (top < mainRect.top) {
top = mainRect.top;
}
if (top + menuHeight > mainRect.bottom) {
top = mainRect.bottom - menuHeight;
// 确保菜单不超出 main 容器上下边界
if (top < mainRect.top) {
top = mainRect.top;
}
if (top + menuHeight > mainRect.bottom) {
top = mainRect.bottom - menuHeight;
}
} else {
// 如果没有找到 main 容器，使用视口边界
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
// 确保菜单不超出视口左右边界
if (left < 0) {
left = 0;
}
if (left + menuWidth > viewportWidth) {
left = viewportWidth - menuWidth;
}
// 确保菜单不超出视口上下边界
if (top < 0) {
top = 0;
}
if (top + menuHeight > viewportHeight) {
top = viewportHeight - menuHeight;
}
}
actionMenu.css({
@@ -499,6 +547,15 @@
break;
}
// <span>${G3FileUtils.formatDate(file.uploadDate)}</span>
var actionMenuItems = (this.options.getActionMenu && this.options.getActionMenu(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}">
<input type="checkbox" class="g3-file-checkbox" />
@@ -511,7 +568,7 @@
<div class="g3-file-info">
<span class="g3-file-name">${file.name}</span>
<span>${typeof file.size === "string" ? file.size || "-" : G3FileUtils.formatFileSize(file.size)}</span>
<span>${G3FileUtils.formatFileSize(file.size)}</span>
<span>${G3FileUtils.formatDate(file.uploadDate)}</span>
</div>
@@ -524,9 +581,7 @@
${G3FileIcons.action.download}
</div>
<div class="g3-file-action g3-action-more" title="${this.language.more}">
${G3FileIcons.action.more}
</div>
${moreActionHtml}
</div>
</div>
`;
@@ -738,6 +793,7 @@
this.$btnPrev.prop("disabled", true);
this.$btnNext.prop("disabled", true);
this.currentPreviewFileId = null;
this.previewCache = null;
return;
}
@@ -769,20 +825,168 @@
.replace("{total}", total);
this.$previewCounter.text(counterText);
var previewContent = "";
var self = this;
if (isUploaded && fileUrl && isPreviewable) {
var previewUrl = this.options.previewUrl || "";
var fullPreviewUrl = previewUrl
? previewUrl + G3FileUtils.base64Encode(fileUrl)
: fileUrl;
previewContent = `
if (!this.previewCache) {
this.previewCache = { currentUrl: null, nextUrl: null };
}
if (this.previewCache.currentUrl === fullPreviewUrl) {
return;
}
var $content = this.$previewContent;
var $currentIframe = $content.find(".g3-preview-iframe.current");
var $nextIframe = $content.find(".g3-preview-iframe.next");
if ($nextIframe.length && this.previewCache.nextUrl === fullPreviewUrl) {
$currentIframe.removeClass("current").addClass("next").hide();
$nextIframe.removeClass("next").addClass("current").show();
this.previewCache.currentUrl = fullPreviewUrl;
this.previewCache.nextUrl = null;
return;
}
if ($nextIframe.length) {
$nextIframe.remove();
}
var newIframe = $(`
<iframe
src="${fullPreviewUrl}"
class="g3-preview-iframe"
class="g3-preview-iframe next"
frameborder="0"
allowfullscreen
></iframe>
`);
newIframe.on("load", function () {
if ($currentIframe.length) {
$currentIframe.css("opacity", "0");
setTimeout(function () {
$currentIframe.remove();
}, 300);
}
newIframe.removeClass("next").addClass("current");
self.previewCache.currentUrl = fullPreviewUrl;
self.previewCache.nextUrl = null;
});
newIframe.on("error", function () {
newIframe.remove();
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 = "";
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>`;
}
this.showPlaceholder(this.$previewContent, tipsHtml);
}
},
showPlaceholder: function ($container, tipsHtml) {
$container.find(".g3-preview-iframe").remove();
$container.html(`
<div class="g3-preview-placeholder">
${tipsHtml}
</div>
`);
},
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 = "";
@@ -794,14 +998,195 @@
tipsHtml = `<p class="g3-url-error">${this.language.urlError}</p>`;
}
previewContent = `
<div class="g3-preview-placeholder">
${tipsHtml}
contentHtml = `
<div class="g3-modal-preview-content">
<div class="g3-modal-preview-placeholder">
${tipsHtml}
</div>
</div>
`;
}
this.$previewContent.html(previewContent);
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) {
@@ -1019,6 +1404,21 @@
}
self.setPreviewFile(id);
})
// 文件项双击打开 modal 预览
.on("dblclick", ".g3-file-item", function (e) {
if (
$(e.target).closest(
".g3-file-action, .g3-file-checkbox, .g3-file-delete-btn",
).length
) {
return;
}
var id = $(this).data("id");
var file = self.getFileById(id);
if (!file) return;
if (!self.hasPermission(file, "view")) return;
self.openPreviewModal(id);
})
// 更多按钮
.on("click", ".g3-action-more", function (e) {
e.preventDefault();
@@ -1037,6 +1437,23 @@
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();
@@ -1884,19 +2301,12 @@
resolvePermission: function (file, action) {
var globalPermission = this.options.globalPermission;
var filePermissionResolver = this.options.filePermissionResolver;
if (typeof filePermissionResolver === "function") {
var fileResult = filePermissionResolver({ file: file, action: action });
if (fileResult !== undefined) {
return !!fileResult;
}
}
if (typeof globalPermission === "function") {
return !!globalPermission({ file: file, action: action });
} else if (typeof globalPermission === "object") {
return !!globalPermission[action];
var permissionKey = action === "select" ? "upload" : action;
return !!globalPermission[permissionKey];
}
return true;
@@ -1904,19 +2314,12 @@
/**
* 更新权限配置
* @param {Object} config - 权限配置
* @param {Object} permissions - 权限对象
*/
updatePermissions: function (config) {
if (!config) return;
if (config.globalPermission !== undefined) {
this.options.globalPermission = config.globalPermission;
}
if (config.filePermissionResolver !== undefined) {
this.options.filePermissionResolver = config.filePermissionResolver;
}
updatePermissions: function (permissions) {
if (!permissions) return;
this.options.globalPermission = permissions;
this.updateUI();
},
@@ -2004,16 +2407,9 @@
Object.prototype.hasOwnProperty.call(
partialState,
"globalPermission",
) ||
Object.prototype.hasOwnProperty.call(
partialState,
"filePermissionResolver",
)
) {
this.updatePermissions({
globalPermission: partialState.globalPermission,
filePermissionResolver: partialState.filePermissionResolver,
});
this.updatePermissions(partialState.globalPermission);
}
return this;