y
This commit is contained in:
1 parent
04491e14a3
commit
85dfdd200e
11 files changed
+779
-422
No files matched your search
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -23,7 +23,7 @@ export type AppListItem = HeaderItem | GroupItem;
|
||||
|
||||
export const SUB_APPS: SubAppItem[] = [
|
||||
{
|
||||
id: "/money/home",
|
||||
id: "/finance/home",
|
||||
title: "记账",
|
||||
icon: IconAppFinance,
|
||||
group: "J",
|
||||
|
||||
+225
-233
@@ -1,272 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>家庭系统 Pro Demo</title>
|
||||
<meta charset="UTF-8" />
|
||||
<title>附件组件(最终版)</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
/* grid */
|
||||
.grid {
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 8px 14px;
|
||||
/* card */
|
||||
.card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.card.selected {
|
||||
background: #eaf2ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
/* checkbox(左上) */
|
||||
.check {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* 状态(右上) */
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* thumb */
|
||||
.thumb {
|
||||
height: 90px;
|
||||
background: #f0f2f5;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.thumb img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
}
|
||||
|
||||
/* info */
|
||||
.info {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* actions */
|
||||
.actions {
|
||||
display: flex;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: #fff;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.actions button:hover {
|
||||
background: #f5f6f8;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.more-menu {
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
right: 6px;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-menu div {
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.more-menu div:hover {
|
||||
background: #f5f6f8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100">
|
||||
<body>
|
||||
|
||||
<div id="app" class="max-w-md mx-auto min-h-screen flex flex-col">
|
||||
<div class="grid" id="grid"></div>
|
||||
|
||||
<!-- ================= LOGIN ================= -->
|
||||
<div id="login" class="flex-1 flex items-center justify-center p-6">
|
||||
<div class="bg-white p-6 rounded-2xl w-full shadow">
|
||||
<script>
|
||||
const files = [
|
||||
{ id: 1, name: "合同.pdf", type: "doc", size: "800KB", date: "2026-04-25" },
|
||||
{ id: 2, name: "设计图.png", type: "img", url: "https://picsum.photos/400/300?1", size: "1.2MB", date: "2026-04-24", status: "未上传" }
|
||||
];
|
||||
|
||||
<h1 class="text-xl font-bold mb-1">欢迎回来</h1>
|
||||
<p class="text-sm text-gray-400 mb-4">家庭系统登录</p>
|
||||
let selected = new Set();
|
||||
|
||||
<input id="username" class="w-full border p-2 rounded mb-3" placeholder="请输入名字">
|
||||
function render() {
|
||||
const grid = document.getElementById("grid");
|
||||
grid.innerHTML = "";
|
||||
|
||||
<button onclick="login()" class="w-full bg-blue-500 text-white py-2 rounded">
|
||||
登录
|
||||
</button>
|
||||
files.forEach(f => {
|
||||
const card = document.createElement("div");
|
||||
card.className = "card" + (selected.has(f.id) ? " selected" : "");
|
||||
|
||||
</div>
|
||||
</div>
|
||||
card.onclick = () => toggleSelect(f.id);
|
||||
|
||||
<!-- ================= FAMILY ONBOARD ================= -->
|
||||
<div id="onboard" class="hidden flex-1 p-6">
|
||||
/* checkbox */
|
||||
const check = document.createElement("input");
|
||||
check.type = "checkbox";
|
||||
check.className = "check";
|
||||
check.checked = selected.has(f.id);
|
||||
|
||||
<div class="bg-white p-6 rounded-2xl shadow">
|
||||
check.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
toggleSelect(f.id);
|
||||
};
|
||||
|
||||
<h1 class="text-lg font-bold">创建你的家庭</h1>
|
||||
<p class="text-sm text-gray-400 mb-4">你还没有加入任何家庭</p>
|
||||
|
||||
<input id="familyName" class="w-full border p-2 rounded mb-3" placeholder="家庭名称">
|
||||
|
||||
<button onclick="createFamily()" class="w-full bg-green-500 text-white py-2 rounded mb-2">
|
||||
创建家庭
|
||||
</button>
|
||||
|
||||
<button onclick="joinFamilyMock()" class="w-full bg-gray-200 py-2 rounded">
|
||||
加入示例家庭
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ================= MAIN ================= -->
|
||||
<div id="main" class="hidden flex-1 flex flex-col">
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="flex-1 p-4 space-y-3">
|
||||
|
||||
<!-- 家庭卡 -->
|
||||
<div class="bg-white p-4 rounded-2xl shadow">
|
||||
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h2 class="font-bold text-lg">🏠 <span id="familyTitle"></span></h2>
|
||||
<p class="text-xs text-gray-400">邀请码:ABC123 · 3人</p>
|
||||
</div>
|
||||
|
||||
<button onclick="openSettings()" class="text-xs bg-gray-100 px-3 py-1 rounded-lg">
|
||||
设置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 成员 -->
|
||||
<div class="bg-white p-4 rounded-2xl shadow">
|
||||
|
||||
<div class="flex justify-between mb-3">
|
||||
<div class="font-semibold">家庭成员</div>
|
||||
<button class="text-blue-500 text-sm">邀请</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-10 h-10 bg-blue-200 rounded-full"></div>
|
||||
<div class="text-xs mt-1">我</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="w-10 h-10 bg-pink-200 rounded-full"></div>
|
||||
<div class="text-xs mt-1">妈妈</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="w-10 h-10 bg-yellow-200 rounded-full"></div>
|
||||
<div class="text-xs mt-1">爸爸</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 子应用 -->
|
||||
<div class="bg-white p-4 rounded-2xl shadow">
|
||||
|
||||
<div class="font-semibold mb-3">家庭工具</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
|
||||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('记账')">
|
||||
📒<div class="text-xs mt-1">记账</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('清单')">
|
||||
🛒<div class="text-xs mt-1">清单</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('日程')">
|
||||
📅<div class="text-xs mt-1">日程</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('物品')">
|
||||
📦<div class="text-xs mt-1">物品</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('待办')">
|
||||
📝<div class="text-xs mt-1">待办</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-100 p-3 rounded-xl text-center text-gray-400">
|
||||
➕<div class="text-xs mt-1">添加</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TABBAR -->
|
||||
<div class="flex border-t bg-white">
|
||||
|
||||
<button class="flex-1 py-2" onclick="switchTab('home')">🏠</button>
|
||||
<button class="flex-1 py-2" onclick="switchTab('apps')">🧩</button>
|
||||
<button class="flex-1 py-2" onclick="switchTab('me')">👤</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ================= SETTINGS ================= -->
|
||||
<div id="settings" class="hidden flex-1 p-4">
|
||||
|
||||
<div class="bg-white p-4 rounded-2xl shadow">
|
||||
|
||||
<h2 class="font-bold mb-3">家庭设置</h2>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
<div class="p-2 bg-gray-100 rounded">修改家庭名称</div>
|
||||
<div class="p-2 bg-gray-100 rounded">成员管理</div>
|
||||
<div class="p-2 bg-gray-100 rounded text-red-500">退出家庭</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button onclick="backHome()" class="mt-4 w-full bg-blue-500 text-white py-2 rounded">
|
||||
返回
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- toast -->
|
||||
<div id="toast" class="toast hidden"></div>
|
||||
|
||||
<script>
|
||||
|
||||
let state = {
|
||||
user: null,
|
||||
family: null
|
||||
/* 状态 */
|
||||
if (f.status) {
|
||||
const st = document.createElement("div");
|
||||
st.className = "status";
|
||||
st.innerText = f.status;
|
||||
card.appendChild(st);
|
||||
}
|
||||
|
||||
function show(id) {
|
||||
document.querySelectorAll('#app > div').forEach(v => v.classList.add('hidden'));
|
||||
document.getElementById(id).classList.remove('hidden');
|
||||
/* thumb */
|
||||
const thumb = document.createElement("div");
|
||||
thumb.className = "thumb";
|
||||
|
||||
if (f.type === "img") {
|
||||
thumb.innerHTML = `<img src="${f.url}">`;
|
||||
} else {
|
||||
thumb.innerText = "📄";
|
||||
}
|
||||
|
||||
function toast(msg) {
|
||||
const t = document.getElementById('toast');
|
||||
t.innerText = msg;
|
||||
t.classList.remove('hidden');
|
||||
/* info */
|
||||
const info = document.createElement("div");
|
||||
info.className = "info";
|
||||
info.innerHTML = `
|
||||
<div class="name">${f.name}</div>
|
||||
<div class="meta">${f.date} · ${f.size}</div>
|
||||
`;
|
||||
|
||||
setTimeout(() => {
|
||||
t.classList.add('hidden');
|
||||
}, 1500);
|
||||
}
|
||||
/* actions */
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "actions";
|
||||
|
||||
/* ========== login ========== */
|
||||
function login() {
|
||||
const name = document.getElementById('username').value;
|
||||
if (!name) return toast('请输入用户名');
|
||||
const btnView = createBtn("预览", () => preview(f));
|
||||
const btnDown = createBtn("下载", () => alert("下载 " + f.name));
|
||||
const btnDelete = createBtn("删除", () => deleteFile(f.id), "danger");
|
||||
|
||||
state.user = name;
|
||||
show('onboard');
|
||||
}
|
||||
/* 更多 */
|
||||
const btnMore = document.createElement("button");
|
||||
btnMore.innerText = "⋯";
|
||||
|
||||
/* ========== family ========== */
|
||||
function createFamily() {
|
||||
const name = document.getElementById('familyName').value;
|
||||
if (!name) return toast('请输入家庭名称');
|
||||
const menu = document.createElement("div");
|
||||
menu.className = "more-menu";
|
||||
|
||||
state.family = name;
|
||||
enterApp();
|
||||
}
|
||||
menu.innerHTML = `
|
||||
<div>重命名</div>
|
||||
<div>查看详情</div>
|
||||
`;
|
||||
|
||||
function joinFamilyMock() {
|
||||
state.family = "幸福家庭";
|
||||
enterApp();
|
||||
}
|
||||
btnMore.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
menu.style.display = menu.style.display === "block" ? "none" : "block";
|
||||
};
|
||||
|
||||
function enterApp() {
|
||||
document.getElementById('familyTitle').innerText = state.family;
|
||||
show('main');
|
||||
switchTab('home');
|
||||
}
|
||||
|
||||
/* ========== tab ========== */
|
||||
function switchTab(tab) {
|
||||
document.querySelectorAll('#main > div:nth-child(1) > div').forEach(v => {
|
||||
v.style.display = 'none';
|
||||
document.addEventListener("click", () => {
|
||||
menu.style.display = "none";
|
||||
});
|
||||
|
||||
toast("切换:" + tab);
|
||||
}
|
||||
actions.append(btnView, btnDown, btnDelete, btnMore);
|
||||
|
||||
function openApp(name) {
|
||||
toast("进入:" + name);
|
||||
}
|
||||
card.append(check, thumb, info, actions, menu);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
/* ========== settings ========== */
|
||||
function openSettings() {
|
||||
show('settings');
|
||||
}
|
||||
function createBtn(text, fn, cls="") {
|
||||
const btn = document.createElement("button");
|
||||
btn.innerText = text;
|
||||
btn.className = cls;
|
||||
btn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
fn();
|
||||
};
|
||||
return btn;
|
||||
}
|
||||
|
||||
function backHome() {
|
||||
show('main');
|
||||
}
|
||||
function toggleSelect(id) {
|
||||
if (selected.has(id)) selected.delete(id);
|
||||
else selected.add(id);
|
||||
render();
|
||||
}
|
||||
|
||||
</script>
|
||||
function preview(f) {
|
||||
alert("预览 " + f.name);
|
||||
}
|
||||
|
||||
function deleteFile(id) {
|
||||
if (!confirm("确定删除?")) return;
|
||||
const i = files.findIndex(f => f.id === id);
|
||||
if (i > -1) files.splice(i, 1);
|
||||
selected.delete(id);
|
||||
render();
|
||||
}
|
||||
|
||||
render();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -322,3 +322,15 @@
|
||||
border-radius: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 预览状态样式 */
|
||||
.g3-file-container .file-item.file-item-preview {
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
|
||||
background: rgba(76, 175, 80, 0.05);
|
||||
}
|
||||
|
||||
.g3-file-container .file-item.file-item-preview:hover {
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 6px 18px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
(function ($) {
|
||||
'use strict';
|
||||
"use strict";
|
||||
|
||||
var G3File = {
|
||||
files: [],
|
||||
selectedFiles: new Set(),
|
||||
previewFiles: new Set(),
|
||||
|
||||
loadScripts: function (items, callback) {
|
||||
var self = this;
|
||||
@@ -25,7 +26,7 @@
|
||||
|
||||
// 防重复加载
|
||||
var key = item.key;
|
||||
if (window[key + '_loading']) {
|
||||
if (window[key + "_loading"]) {
|
||||
var timer = setInterval(function () {
|
||||
if (item.check && item.check()) {
|
||||
clearInterval(timer);
|
||||
@@ -35,19 +36,19 @@
|
||||
return;
|
||||
}
|
||||
|
||||
window[key + '_loading'] = true;
|
||||
window[key + "_loading"] = true;
|
||||
|
||||
var script = document.createElement('script');
|
||||
var script = document.createElement("script");
|
||||
script.src = item.src;
|
||||
|
||||
script.onload = function () {
|
||||
window[key + '_loading'] = false;
|
||||
window[key + "_loading"] = false;
|
||||
done();
|
||||
};
|
||||
|
||||
script.onerror = function () {
|
||||
window[key + '_loading'] = false;
|
||||
console.error(key + ' load failed');
|
||||
window[key + "_loading"] = false;
|
||||
console.error(key + " load failed");
|
||||
done();
|
||||
};
|
||||
|
||||
@@ -61,28 +62,33 @@
|
||||
init: function (containerId, options) {
|
||||
var self = this;
|
||||
|
||||
this.$container = $('#' + containerId);
|
||||
this.$container = $("#" + containerId);
|
||||
this.options = $.extend({}, this.defaults, options);
|
||||
|
||||
this.language = this.languages[this.options.language] || this.languages['zh-CN'];
|
||||
this.language =
|
||||
this.languages[this.options.language] || this.languages["zh-CN"];
|
||||
this.files = this.options.data || [];
|
||||
this.selectedFiles = new Set(); // 选中文件集合
|
||||
this.previewFiles = new Set(); // 预览文件集合
|
||||
|
||||
this.loadScripts([
|
||||
this.loadScripts(
|
||||
[
|
||||
{
|
||||
key: 'fileSaver',
|
||||
src: '/custom-file/libs/FileSaver.min.js',
|
||||
key: "fileSaver",
|
||||
src: "/custom-file/libs/FileSaver.min.js",
|
||||
check: function () {
|
||||
return typeof window.saveAs === 'function';
|
||||
}
|
||||
return typeof window.saveAs === "function";
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'jsZip',
|
||||
src: '/custom-file/libs/jszip.min.js',
|
||||
key: "jsZip",
|
||||
src: "/custom-file/libs/jszip.min.js",
|
||||
check: function () {
|
||||
return typeof window.JSZip === 'function';
|
||||
}
|
||||
}
|
||||
], function () {
|
||||
return typeof window.JSZip === "function";
|
||||
},
|
||||
},
|
||||
],
|
||||
function () {
|
||||
self.render();
|
||||
self.bindEvents();
|
||||
self.updatePermissions(self.options.permissions);
|
||||
@@ -90,7 +96,8 @@
|
||||
if (self.options.data?.length) {
|
||||
self.loadFiles(self.options.data);
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
return this;
|
||||
},
|
||||
@@ -104,56 +111,57 @@
|
||||
onDownload: null,
|
||||
onSelect: null,
|
||||
onUpload: null,
|
||||
language: 'zh-CN',
|
||||
onPreview: null,
|
||||
language: "zh-CN",
|
||||
maxFileSize: 10 * 1024 * 1024, // 默认最大10MB
|
||||
permissions: {
|
||||
select: true,
|
||||
upload: true,
|
||||
download: true,
|
||||
delete: true,
|
||||
view: true
|
||||
}
|
||||
view: true,
|
||||
},
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 多语言
|
||||
// =====================
|
||||
languages: {
|
||||
'zh-CN': {
|
||||
selectAll: '全选',
|
||||
download: '批量下载',
|
||||
delete: '删除',
|
||||
upload: '上传',
|
||||
select: '选择',
|
||||
confirmDelete: '确定要删除选中的 {count} 个文件吗?',
|
||||
downloading: '准备下载 {count} 个文件',
|
||||
deleting: '删除中...',
|
||||
name: '名称',
|
||||
size: '大小',
|
||||
date: '日期',
|
||||
pending: '未上传',
|
||||
selectFiles: '选择文件',
|
||||
emptyTip1: '拖拽文件到这里 …',
|
||||
emptyTip2: '支持多文件同时上传/下载',
|
||||
emptyTip3: '支持粘贴图片上传',
|
||||
fileSizeError: '文件大小超过限制'
|
||||
"zh-CN": {
|
||||
selectAll: "全选",
|
||||
download: "批量下载",
|
||||
delete: "删除",
|
||||
upload: "上传",
|
||||
select: "选择",
|
||||
confirmDelete: "确定要删除选中的 {count} 个文件吗?",
|
||||
downloading: "准备下载 {count} 个文件",
|
||||
deleting: "删除中...",
|
||||
name: "名称",
|
||||
size: "大小",
|
||||
date: "日期",
|
||||
pending: "未上传",
|
||||
selectFiles: "选择文件",
|
||||
emptyTip1: "拖拽文件到这里 …",
|
||||
emptyTip2: "支持多文件同时上传/下载",
|
||||
emptyTip3: "支持粘贴图片上传",
|
||||
fileSizeError: "文件大小超过限制",
|
||||
},
|
||||
"en-US": {
|
||||
selectAll: "Select All",
|
||||
download: "Batch Download",
|
||||
delete: "Delete",
|
||||
upload: "Upload",
|
||||
select: "Select",
|
||||
confirmDelete: "Are you sure to delete {count} selected files?",
|
||||
downloading: "Preparing to download {count} files",
|
||||
deleting: "Deleting...",
|
||||
name: "Name",
|
||||
size: "Size",
|
||||
date: "Date",
|
||||
pending: "Pending",
|
||||
selectFiles: "Select Files",
|
||||
fileSizeError: "File size exceeds limit",
|
||||
},
|
||||
'en-US': {
|
||||
selectAll: 'Select All',
|
||||
download: 'Batch Download',
|
||||
delete: 'Delete',
|
||||
upload: 'Upload',
|
||||
select: 'Select',
|
||||
confirmDelete: 'Are you sure to delete {count} selected files?',
|
||||
downloading: 'Preparing to download {count} files',
|
||||
deleting: 'Deleting...',
|
||||
name: 'Name',
|
||||
size: 'Size',
|
||||
date: 'Date',
|
||||
pending: 'Pending',
|
||||
selectFiles: 'Select Files',
|
||||
fileSizeError: 'File size exceeds limit'
|
||||
}
|
||||
},
|
||||
|
||||
// =====================
|
||||
@@ -183,29 +191,29 @@
|
||||
`,
|
||||
default_file: `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGsXCcfeOf)" d="M8.004 1L9.5 4.5L13 6l-.008 7.5a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4.5 1z"/><path fill="url(#SVGUVHt30XG)" fill-opacity=".5" d="M8.004 1L9.5 4.5L13 6l-.008 7.5a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4.5 1z"/><path fill="url(#SVG176kqd6n)" d="M8 4.5V1l5 5H9.5A1.5 1.5 0 0 1 8 4.5"/><defs><linearGradient id="SVGsXCcfeOf" x1="9.994" x2="11.264" y1="1" y2="12.781" gradientUnits="userSpaceOnUse"><stop stop-color="#6CE0FF"/><stop offset="1" stop-color="#4894FE"/></linearGradient><linearGradient id="SVG176kqd6n" x1="10.492" x2="9.242" y1="3.083" y2="5.167" gradientUnits="userSpaceOnUse"><stop stop-color="#9FF0F9"/><stop offset="1" stop-color="#B3E0FF"/></linearGradient><radialGradient id="SVGUVHt30XG" cx="0" cy="0" r="1" gradientTransform="rotate(130.372 6.372 3.818)scale(8.35524 4.87457)" gradientUnits="userSpaceOnUse"><stop offset=".362" stop-color="#4A43CB"/><stop offset="1" stop-color="#4A43CB" stop-opacity="0"/></radialGradient></defs></g></svg>
|
||||
`
|
||||
`,
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 生成唯一ID
|
||||
// =====================
|
||||
generateUniqueId: function () {
|
||||
return 'file_' + Math.random().toString(36).slice(2) + Date.now();
|
||||
return "file_" + Math.random().toString(36).slice(2) + Date.now();
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 获取文件图标
|
||||
// =====================
|
||||
getFileIcon: function (filename) {
|
||||
var ext = filename.split('.').pop().toLowerCase();
|
||||
return this.staticIconMap[ext] || this.staticIconMap['default_file'];
|
||||
var ext = filename.split(".").pop().toLowerCase();
|
||||
return this.staticIconMap[ext] || this.staticIconMap["default_file"];
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 更新语言
|
||||
// =====================
|
||||
updateLanguage: function (language) {
|
||||
this.language = this.languages[language] || this.languages['zh-CN'];
|
||||
this.language = this.languages[language] || this.languages["zh-CN"];
|
||||
this.render();
|
||||
return this;
|
||||
},
|
||||
@@ -259,15 +267,15 @@
|
||||
|
||||
this.$container.html(html);
|
||||
|
||||
this.$fileList = this.$container.find('.main');
|
||||
this.$emptyTip = this.$container.find('.empty-tip');
|
||||
this.$checkAll = this.$container.find('.check-all-checkbox');
|
||||
this.$btnDownload = this.$container.find('.download-all');
|
||||
this.$btnDelete = this.$container.find('.delete-all');
|
||||
this.$btnUpload = this.$container.find('.upload');
|
||||
this.$btnSelect = this.$container.find('.select');
|
||||
this.$fileInput = this.$container.find('.file-input');
|
||||
this.$pendingCount = this.$container.find('.pending-number');
|
||||
this.$fileList = this.$container.find(".main");
|
||||
this.$emptyTip = this.$container.find(".empty-tip");
|
||||
this.$checkAll = this.$container.find(".check-all-checkbox");
|
||||
this.$btnDownload = this.$container.find(".download-all");
|
||||
this.$btnDelete = this.$container.find(".delete-all");
|
||||
this.$btnUpload = this.$container.find(".upload");
|
||||
this.$btnSelect = this.$container.find(".select");
|
||||
this.$fileInput = this.$container.find(".file-input");
|
||||
this.$pendingCount = this.$container.find(".pending-number");
|
||||
|
||||
return this;
|
||||
},
|
||||
@@ -276,8 +284,8 @@
|
||||
var self = this;
|
||||
|
||||
// 选择
|
||||
this.$checkAll.off('change').on('change', function () {
|
||||
var checked = $(this).is(':checked');
|
||||
this.$checkAll.off("change").on("change", function () {
|
||||
var checked = $(this).is(":checked");
|
||||
|
||||
self.selectedFiles.clear();
|
||||
|
||||
@@ -287,20 +295,20 @@
|
||||
});
|
||||
}
|
||||
|
||||
self.$fileList.find('.file-checkbox').prop('checked', checked);
|
||||
self.$fileList.find(".file-checkbox").prop("checked", checked);
|
||||
|
||||
self.updateToolbarState();
|
||||
});
|
||||
|
||||
// 批量下载
|
||||
this.$btnDownload.off('click').on('click', function () {
|
||||
this.$btnDownload.off("click").on("click", function () {
|
||||
var idSet = self.selectedFiles || new Set();
|
||||
|
||||
var files = self.files.filter(function (item) {
|
||||
return idSet.has(item._id);
|
||||
});
|
||||
|
||||
if (typeof self.options?.onDownloadBatch === 'function') {
|
||||
if (typeof self.options?.onDownloadBatch === "function") {
|
||||
self.options.onDownloadBatch(files);
|
||||
return;
|
||||
}
|
||||
@@ -309,7 +317,7 @@
|
||||
});
|
||||
|
||||
// 批量删除
|
||||
this.$btnDelete.off('click').on('click', function () {
|
||||
this.$btnDelete.off("click").on("click", function () {
|
||||
var idSet = self.selectedFiles || new Set();
|
||||
|
||||
if (idSet.size === 0) return;
|
||||
@@ -321,7 +329,7 @@
|
||||
// =====================
|
||||
// 1. 优先走外部回调(如果你要接后端)
|
||||
// =====================
|
||||
if (typeof self.options?.onDeleteBatch === 'function') {
|
||||
if (typeof self.options?.onDeleteBatch === "function") {
|
||||
self.options.onDeleteBatch(deleteFiles, function (success) {
|
||||
if (!success) return;
|
||||
|
||||
@@ -340,17 +348,17 @@
|
||||
// =====================
|
||||
// 选择按钮点击事件(选择本地文件)
|
||||
// =====================
|
||||
this.$btnSelect.off('click').on('click', function () {
|
||||
this.$btnSelect.off("click").on("click", function () {
|
||||
self.$fileInput.click();
|
||||
});
|
||||
|
||||
// =====================
|
||||
// 上传按钮点击事件(交给外部处理)
|
||||
// =====================
|
||||
this.$btnUpload.off('click').on('click', function () {
|
||||
this.$btnUpload.off("click").on("click", function () {
|
||||
// 获取所有未上传的文件
|
||||
const pendingFiles = self.files.filter(file => !file.uploaded);
|
||||
if (typeof self.options.onUpload === 'function') {
|
||||
const pendingFiles = self.files.filter((file) => !file.uploaded);
|
||||
if (typeof self.options.onUpload === "function") {
|
||||
self.options.onUpload(pendingFiles);
|
||||
}
|
||||
});
|
||||
@@ -358,7 +366,7 @@
|
||||
// =====================
|
||||
// 文件选择事件
|
||||
// =====================
|
||||
this.$fileInput.off('change').on('change', function (e) {
|
||||
this.$fileInput.off("change").on("change", function (e) {
|
||||
var files = e.target.files;
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
@@ -376,15 +384,15 @@
|
||||
}
|
||||
|
||||
if (invalidFiles.length > 0) {
|
||||
var errorMsg = self.language.fileSizeError || '文件大小超过限制';
|
||||
alert(errorMsg + ': ' + invalidFiles.map(f => f.name).join(', '));
|
||||
var errorMsg = self.language.fileSizeError || "文件大小超过限制";
|
||||
alert(errorMsg + ": " + invalidFiles.map((f) => f.name).join(", "));
|
||||
}
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
// 在本地临时插入文件
|
||||
var tempFiles = validFiles.map(function (file) {
|
||||
// 为图片文件创建本地临时连接
|
||||
let url = '';
|
||||
let url = "";
|
||||
if (self.isImageFile(file.name)) {
|
||||
url = URL.createObjectURL(file);
|
||||
}
|
||||
@@ -396,7 +404,7 @@
|
||||
uploadDate: new Date().toISOString(),
|
||||
uploaded: false, // 标记为未上传
|
||||
url: url, // 图片文件使用本地临时连接,其他文件为空
|
||||
file: file // 保存原始文件对象
|
||||
file: file, // 保存原始文件对象
|
||||
};
|
||||
});
|
||||
|
||||
@@ -405,13 +413,13 @@
|
||||
self.renderFileList();
|
||||
self.updateToolbarState();
|
||||
|
||||
if (typeof self.options.onSelect === 'function') {
|
||||
if (typeof self.options.onSelect === "function") {
|
||||
self.options.onSelect(validFiles);
|
||||
}
|
||||
}
|
||||
|
||||
// 重置文件输入框,以便可以重复选择相同的文件
|
||||
self.$fileInput.val('');
|
||||
self.$fileInput.val("");
|
||||
});
|
||||
},
|
||||
|
||||
@@ -419,10 +427,10 @@
|
||||
// 文件判断
|
||||
// =====================
|
||||
isImageFile: function (filename) {
|
||||
if (!filename || typeof filename !== 'string') return false;
|
||||
if (!filename || typeof filename !== "string") return false;
|
||||
|
||||
const ext = filename.slice(filename.lastIndexOf('.') + 1).toLowerCase();
|
||||
const imageExts = new Set(['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']);
|
||||
const ext = filename.slice(filename.lastIndexOf(".") + 1).toLowerCase();
|
||||
const imageExts = new Set(["jpg", "jpeg", "png", "gif", "bmp", "webp"]);
|
||||
|
||||
return imageExts.has(ext);
|
||||
},
|
||||
@@ -433,33 +441,31 @@
|
||||
updateToolbarState: function () {
|
||||
var hasSelection = this.selectedFiles.size > 0;
|
||||
|
||||
this.$btnDownload.prop('disabled', !hasSelection);
|
||||
this.$btnDelete.prop('disabled', !hasSelection);
|
||||
this.$btnDownload.prop("disabled", !hasSelection);
|
||||
this.$btnDelete.prop("disabled", !hasSelection);
|
||||
|
||||
var allSelected =
|
||||
this.files.length > 0 &&
|
||||
this.selectedFiles.size === this.files.length;
|
||||
this.files.length > 0 && this.selectedFiles.size === this.files.length;
|
||||
|
||||
this.$checkAll.prop('checked', allSelected);
|
||||
this.$checkAll.prop("checked", allSelected);
|
||||
|
||||
// 更新未上传文件数量
|
||||
var pendingCount = this.files.filter(file => !file.uploaded).length;
|
||||
var pendingCount = this.files.filter((file) => !file.uploaded).length;
|
||||
this.$pendingCount.text(pendingCount);
|
||||
|
||||
var self = this;
|
||||
|
||||
this.$fileList.find('.file-item').each(function () {
|
||||
var id = $(this).data('id');
|
||||
this.$fileList.find(".file-item").each(function () {
|
||||
var id = $(this).data("id");
|
||||
var isSelected = self.selectedFiles.has(id);
|
||||
|
||||
$(this).find('.file-checkbox')
|
||||
.prop('checked', isSelected);
|
||||
$(this).find(".file-checkbox").prop("checked", isSelected);
|
||||
|
||||
// 添加或移除选中样式
|
||||
if (isSelected) {
|
||||
$(this).addClass('file-item-selected');
|
||||
$(this).addClass("file-item-selected");
|
||||
} else {
|
||||
$(this).removeClass('file-item-selected');
|
||||
$(this).removeClass("file-item-selected");
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -473,7 +479,7 @@
|
||||
this.files = files.map(function (file) {
|
||||
return Object.assign({}, file, {
|
||||
_id: self.generateUniqueId(),
|
||||
uploaded: true
|
||||
uploaded: true,
|
||||
});
|
||||
});
|
||||
|
||||
@@ -498,7 +504,7 @@
|
||||
this.$fileList.show();
|
||||
this.$emptyTip.hide();
|
||||
|
||||
var html = '';
|
||||
var html = "";
|
||||
$.each(this.files, function (_, file) {
|
||||
html += self.createFileItem(file);
|
||||
});
|
||||
@@ -512,38 +518,50 @@
|
||||
// =====================
|
||||
formatFileSize: function (bytes) {
|
||||
if (bytes === null || bytes === undefined || isNaN(bytes) || bytes <= 0) {
|
||||
return '-';
|
||||
return "-";
|
||||
}
|
||||
|
||||
var k = 1024;
|
||||
var sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
var sizes = ["B", "KB", "MB", "GB", "TB"];
|
||||
|
||||
var i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
i = Math.max(0, Math.min(i, sizes.length - 1));
|
||||
|
||||
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
|
||||
return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 格式化日期
|
||||
// =====================
|
||||
formatDate: function (dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
if (!dateStr) return "-";
|
||||
|
||||
var date = new Date(dateStr);
|
||||
|
||||
if (isNaN(date.getTime())) {
|
||||
return '-';
|
||||
return "-";
|
||||
}
|
||||
|
||||
var year = date.getFullYear();
|
||||
var month = ('0' + (date.getMonth() + 1)).slice(-2);
|
||||
var day = ('0' + date.getDate()).slice(-2);
|
||||
var hours = ('0' + date.getHours()).slice(-2);
|
||||
var minutes = ('0' + date.getMinutes()).slice(-2);
|
||||
var seconds = ('0' + date.getSeconds()).slice(-2);
|
||||
var month = ("0" + (date.getMonth() + 1)).slice(-2);
|
||||
var day = ("0" + date.getDate()).slice(-2);
|
||||
var hours = ("0" + date.getHours()).slice(-2);
|
||||
var minutes = ("0" + date.getMinutes()).slice(-2);
|
||||
var seconds = ("0" + date.getSeconds()).slice(-2);
|
||||
|
||||
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||||
return (
|
||||
year +
|
||||
"-" +
|
||||
month +
|
||||
"-" +
|
||||
day +
|
||||
" " +
|
||||
hours +
|
||||
":" +
|
||||
minutes +
|
||||
":" +
|
||||
seconds
|
||||
);
|
||||
},
|
||||
|
||||
// =====================
|
||||
@@ -555,7 +573,7 @@
|
||||
const downloadDisabled = !perm.download;
|
||||
const deleteDisabled = !perm.delete;
|
||||
|
||||
let content = '';
|
||||
let content = "";
|
||||
|
||||
if (this.isImageFile(file.name)) {
|
||||
content = `<img src="${file.url}" alt="${file.name}" class="file-img" />`;
|
||||
@@ -564,15 +582,23 @@
|
||||
}
|
||||
|
||||
// 未上传标记
|
||||
const pendingBadge = file.uploaded ? '' : `
|
||||
const pendingBadge = file.uploaded
|
||||
? ""
|
||||
: `
|
||||
<div class="file-pending-badge">
|
||||
${this.language.pending}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 预览状态(使用class标识)
|
||||
const isPreview = this.previewFiles.has(file._id);
|
||||
|
||||
// 选中状态
|
||||
const isSelected = this.selectedFiles.has(file._id);
|
||||
|
||||
return `
|
||||
<div class="file-item" data-id="${file._id}">
|
||||
<input type="checkbox" class="file-checkbox" />
|
||||
<div class="file-item ${isPreview ? "file-item-preview" : ""}" data-id="${file._id}">
|
||||
<input type="checkbox" class="file-checkbox" ${isSelected ? "checked" : ""} />
|
||||
<div class="file-preview">${content}</div>
|
||||
${pendingBadge}
|
||||
|
||||
@@ -583,11 +609,11 @@
|
||||
</div>
|
||||
|
||||
<div class="file-actions">
|
||||
<div class="file-action download ${downloadDisabled ? 'is-disabled' : ''}">
|
||||
<div class="file-action download ${downloadDisabled ? "is-disabled" : ""}">
|
||||
${this.staticIconMap.download}
|
||||
</div>
|
||||
|
||||
<div class="file-action delete ${deleteDisabled ? 'is-disabled' : ''}">
|
||||
<div class="file-action delete ${deleteDisabled ? "is-disabled" : ""}">
|
||||
${this.staticIconMap.delete}
|
||||
</div>
|
||||
|
||||
@@ -606,26 +632,57 @@
|
||||
var self = this;
|
||||
|
||||
// =====================
|
||||
// 文件item点击事件
|
||||
// 文件item点击事件(用于预览)
|
||||
// =====================
|
||||
this.$fileList.off('click', '.file-item')
|
||||
.on('click', '.file-item', function (e) {
|
||||
var $checkbox = $(this).find('.file-checkbox');
|
||||
$checkbox.prop('checked', !$checkbox.is(':checked'));
|
||||
$checkbox.trigger('change');
|
||||
});
|
||||
this.$fileList
|
||||
.off("click", ".file-item")
|
||||
.on("click", ".file-item", function (e) {
|
||||
var target = $(e.target);
|
||||
// 如果点击的是 checkbox、download、delete、more 按钮,则不执行预览逻辑
|
||||
if (
|
||||
target.is(".file-checkbox") ||
|
||||
target.closest(".file-action").length > 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$fileList.off('click', '.download')
|
||||
.on('click', '.download', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var id = $(this).closest('.file-item').data('id');
|
||||
var file = self.files.find(f => f._id === id);
|
||||
var id = $(this).data("id");
|
||||
var file = self.files.find((f) => f._id === id);
|
||||
|
||||
if (!file) return;
|
||||
|
||||
if (typeof self.options.onDownload === 'function') {
|
||||
// 切换预览状态(只允许同时预览一个文件)
|
||||
var isPreview = self.previewFiles.has(id);
|
||||
if (isPreview) {
|
||||
// 取消预览
|
||||
self.previewFiles.delete(id);
|
||||
} else {
|
||||
// 开启预览前,先清除其他文件的预览状态
|
||||
self.previewFiles.clear();
|
||||
self.previewFiles.add(id);
|
||||
}
|
||||
|
||||
// 重新渲染文件列表以更新预览状态
|
||||
self.renderFileList();
|
||||
|
||||
// 调用外部回调,传递文件和预览状态
|
||||
if (typeof self.options.onPreview === "function") {
|
||||
self.options.onPreview(file, !isPreview);
|
||||
}
|
||||
});
|
||||
|
||||
this.$fileList
|
||||
.off("click", ".download")
|
||||
.on("click", ".download", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var id = $(this).closest(".file-item").data("id");
|
||||
var file = self.files.find((f) => f._id === id);
|
||||
|
||||
if (!file) return;
|
||||
|
||||
if (typeof self.options.onDownload === "function") {
|
||||
self.options.onDownload([file]);
|
||||
return;
|
||||
}
|
||||
@@ -633,11 +690,12 @@
|
||||
self.internalDownload(file);
|
||||
});
|
||||
|
||||
this.$fileList.off('change', '.file-checkbox')
|
||||
.on('change', '.file-checkbox', function () {
|
||||
var id = $(this).closest('.file-item').data('id');
|
||||
this.$fileList
|
||||
.off("change", ".file-checkbox")
|
||||
.on("change", ".file-checkbox", function () {
|
||||
var id = $(this).closest(".file-item").data("id");
|
||||
|
||||
if ($(this).is(':checked')) {
|
||||
if ($(this).is(":checked")) {
|
||||
self.selectedFiles.add(id);
|
||||
} else {
|
||||
self.selectedFiles.delete(id);
|
||||
@@ -646,17 +704,18 @@
|
||||
self.updateToolbarState();
|
||||
});
|
||||
|
||||
this.$fileList.off('click', '.delete')
|
||||
.on('click', '.delete', function (e) {
|
||||
this.$fileList
|
||||
.off("click", ".delete")
|
||||
.on("click", ".delete", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var id = $(this).closest('.file-item').data('id');
|
||||
var file = self.files.find(f => f._id === id);
|
||||
var id = $(this).closest(".file-item").data("id");
|
||||
var file = self.files.find((f) => f._id === id);
|
||||
|
||||
if (!file) return;
|
||||
|
||||
if (typeof self.options.onDelete === 'function') {
|
||||
if (typeof self.options.onDelete === "function") {
|
||||
self.options.onDelete([file]);
|
||||
return;
|
||||
}
|
||||
@@ -667,8 +726,7 @@
|
||||
// =====================
|
||||
// 更多按钮点击事件(阻止冒泡)
|
||||
// =====================
|
||||
this.$fileList.off('click', '.more')
|
||||
.on('click', '.more', function (e) {
|
||||
this.$fileList.off("click", ".more").on("click", ".more", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
@@ -683,8 +741,13 @@
|
||||
// 如果文件名已经存在,则在文件名后加上 (1), (2), ...
|
||||
while (files.has(uniqueFileName)) {
|
||||
// 基于原始文件名为基础来添加计数器
|
||||
const fileNameWithoutExtension = originalFileName.replace(/\.[^/.]+$/, "");
|
||||
const extension = originalFileName.slice(originalFileName.lastIndexOf("."));
|
||||
const fileNameWithoutExtension = originalFileName.replace(
|
||||
/\.[^/.]+$/,
|
||||
"",
|
||||
);
|
||||
const extension = originalFileName.slice(
|
||||
originalFileName.lastIndexOf("."),
|
||||
);
|
||||
uniqueFileName = `${fileNameWithoutExtension} (${counter})${extension}`;
|
||||
counter++;
|
||||
}
|
||||
@@ -694,13 +757,13 @@
|
||||
|
||||
getFileBlob: async function (url) {
|
||||
if (!url) {
|
||||
throw new Error('无效的文件URL');
|
||||
throw new Error("无效的文件URL");
|
||||
}
|
||||
|
||||
const res = await fetch(url);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('网络请求失败,状态码:' + res.status);
|
||||
throw new Error("网络请求失败,状态码:" + res.status);
|
||||
}
|
||||
|
||||
// ⭐ 比 blob 更轻一点(后续 zip 更快)
|
||||
@@ -714,11 +777,11 @@
|
||||
// =====================
|
||||
internalDownload: async function (file) {
|
||||
if (!file) {
|
||||
console.warn('下载失败:文件对象无效', file);
|
||||
console.warn("下载失败:文件对象无效", file);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('开始下载文件:', file.name);
|
||||
console.log("开始下载文件:", file.name);
|
||||
|
||||
try {
|
||||
let blob;
|
||||
@@ -730,14 +793,13 @@
|
||||
// 未上传的文件,使用本地文件对象
|
||||
blob = file.file;
|
||||
} else {
|
||||
console.warn('下载失败:文件没有URL或本地文件对象', file);
|
||||
console.warn("下载失败:文件没有URL或本地文件对象", file);
|
||||
return;
|
||||
}
|
||||
|
||||
saveAs(blob, file.name || '未命名文件');
|
||||
|
||||
saveAs(blob, file.name || "未命名文件");
|
||||
} catch (err) {
|
||||
console.error('文件下载失败:', err);
|
||||
console.error("文件下载失败:", err);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -766,7 +828,7 @@
|
||||
// 未上传的文件,使用本地文件对象
|
||||
content = await item.file.arrayBuffer();
|
||||
} else {
|
||||
console.warn('跳过失败文件:', item.name, '没有URL或本地文件对象');
|
||||
console.warn("跳过失败文件:", item.name, "没有URL或本地文件对象");
|
||||
failedCount++;
|
||||
return;
|
||||
}
|
||||
@@ -776,9 +838,8 @@
|
||||
zip.file(uniqueFileName, content);
|
||||
|
||||
addedFiles.add(uniqueFileName);
|
||||
|
||||
} catch (err) {
|
||||
console.warn('跳过失败文件:', item.name, err);
|
||||
console.warn("跳过失败文件:", item.name, err);
|
||||
failedCount++;
|
||||
} finally {
|
||||
current++;
|
||||
@@ -793,14 +854,12 @@
|
||||
};
|
||||
|
||||
try {
|
||||
await Promise.all(
|
||||
Array.from({ length: concurrency }, runner)
|
||||
);
|
||||
await Promise.all(Array.from({ length: concurrency }, runner));
|
||||
|
||||
const blob = await zip.generateAsync({ type: "blob" });
|
||||
|
||||
const now = new Date();
|
||||
const pad = n => n < 10 ? "0" + n : n;
|
||||
const pad = (n) => (n < 10 ? "0" + n : n);
|
||||
|
||||
const fileName =
|
||||
now.getFullYear() +
|
||||
@@ -812,11 +871,10 @@
|
||||
saveAs(blob, fileName + ".zip");
|
||||
|
||||
console.log(
|
||||
`下载完成:${total - failedCount}/${total},失败:${failedCount}`
|
||||
`下载完成:${total - failedCount}/${total},失败:${failedCount}`,
|
||||
);
|
||||
|
||||
callback && callback();
|
||||
|
||||
} catch (err) {
|
||||
console.error("Batch download failed:", err);
|
||||
callback && callback();
|
||||
@@ -833,10 +891,10 @@
|
||||
try {
|
||||
URL.revokeObjectURL(file.url);
|
||||
} catch (e) {
|
||||
console.warn('Failed to revoke object URL:', e);
|
||||
console.warn("Failed to revoke object URL:", e);
|
||||
}
|
||||
}
|
||||
this.files = this.files.filter(f => f._id !== file._id);
|
||||
this.files = this.files.filter((f) => f._id !== file._id);
|
||||
this.selectedFiles.delete(file._id);
|
||||
this.updateToolbarState();
|
||||
this.renderFileList();
|
||||
@@ -847,7 +905,7 @@
|
||||
// =====================
|
||||
internalDeleteBatch: function (files) {
|
||||
if (!files || files.length === 0) return;
|
||||
files.forEach(file => this.internalDelete(file));
|
||||
files.forEach((file) => this.internalDelete(file));
|
||||
this.updateToolbarState();
|
||||
this.renderFileList();
|
||||
},
|
||||
@@ -859,16 +917,92 @@
|
||||
|
||||
this.options.permissions = permissions;
|
||||
|
||||
this.$btnSelect?.prop('disabled', !permissions.select);
|
||||
this.$btnUpload?.prop('disabled', !permissions.upload);
|
||||
this.$btnDownload?.prop('disabled', !permissions.download);
|
||||
this.$btnDelete?.prop('disabled', !permissions.delete);
|
||||
this.$btnSelect?.prop("disabled", !permissions.select);
|
||||
this.$btnUpload?.prop("disabled", !permissions.upload);
|
||||
this.$btnDownload?.prop("disabled", !permissions.download);
|
||||
this.$btnDelete?.prop("disabled", !permissions.delete);
|
||||
|
||||
this.$fileList.find('.file-action.download')
|
||||
.toggleClass('is-disabled', !permissions.download);
|
||||
this.$fileList
|
||||
.find(".file-action.download")
|
||||
.toggleClass("is-disabled", !permissions.download);
|
||||
|
||||
this.$fileList.find('.file-action.delete')
|
||||
.toggleClass('is-disabled', !permissions.delete);
|
||||
this.$fileList
|
||||
.find(".file-action.delete")
|
||||
.toggleClass("is-disabled", !permissions.delete);
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 外部方法:切换文件选中状态
|
||||
// 参数:fileId - 文件ID,isSelected - 是否选中(可选,不传则切换)
|
||||
// =====================
|
||||
toggleSelect: function (fileId, isSelected) {
|
||||
var file = this.files.find((f) => f._id === fileId);
|
||||
if (!file) return;
|
||||
|
||||
var currentSelected = this.selectedFiles.has(fileId);
|
||||
var newSelected =
|
||||
isSelected !== undefined ? isSelected : !currentSelected;
|
||||
|
||||
if (newSelected) {
|
||||
this.selectedFiles.add(fileId);
|
||||
} else {
|
||||
this.selectedFiles.delete(fileId);
|
||||
}
|
||||
|
||||
this.updateToolbarState();
|
||||
this.renderFileList();
|
||||
|
||||
return newSelected;
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 外部方法:获取当前选中的文件列表
|
||||
// =====================
|
||||
getSelectedFiles: function () {
|
||||
return this.files.filter((f) => this.selectedFiles.has(f._id));
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 外部方法:获取当前预览的文件列表
|
||||
// =====================
|
||||
getPreviewFiles: function () {
|
||||
return this.files.filter((f) => this.previewFiles.has(f._id));
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 外部方法:获取所有文件列表
|
||||
// =====================
|
||||
getFiles: function () {
|
||||
return this.files;
|
||||
},
|
||||
|
||||
// =====================
|
||||
// 外部方法:切换文件预览状态
|
||||
// 参数:fileId - 文件ID,isPreview - 是否预览(可选,不传则切换)
|
||||
// =====================
|
||||
togglePreview: function (fileId, isPreview) {
|
||||
var file = this.files.find((f) => f._id === fileId);
|
||||
if (!file) return;
|
||||
|
||||
var currentPreview = this.previewFiles.has(fileId);
|
||||
var newPreview = isPreview !== undefined ? isPreview : !currentPreview;
|
||||
|
||||
if (newPreview) {
|
||||
// 开启预览前,先清除其他文件的预览状态(只允许同时预览一个)
|
||||
this.previewFiles.clear();
|
||||
this.previewFiles.add(fileId);
|
||||
} else {
|
||||
this.previewFiles.delete(fileId);
|
||||
}
|
||||
|
||||
this.renderFileList();
|
||||
|
||||
// 调用外部回调
|
||||
if (typeof this.options.onPreview === "function") {
|
||||
this.options.onPreview(file, newPreview);
|
||||
}
|
||||
|
||||
return newPreview;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -876,33 +1010,33 @@
|
||||
// jQuery 插件封装
|
||||
// ==========================
|
||||
$.fn.G3File = function (options) {
|
||||
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
var instance;
|
||||
var methodResult; // 存储方法调用结果
|
||||
|
||||
this.each(function () {
|
||||
var $this = $(this);
|
||||
instance = $this.data('G3File');
|
||||
instance = $this.data("G3File");
|
||||
|
||||
// ========= 初始化 =========
|
||||
if (!instance) {
|
||||
instance = Object.create(G3File);
|
||||
instance.init(this.id, options);
|
||||
|
||||
$this.data('G3File', instance);
|
||||
$this.data("G3File", instance);
|
||||
|
||||
// ========= 方法调用 =========
|
||||
} else if (typeof options === 'string') {
|
||||
} else if (typeof options === "string") {
|
||||
var method = options;
|
||||
|
||||
if (instance[method]) {
|
||||
instance[method].apply(instance, args);
|
||||
// 保存方法调用结果
|
||||
methodResult = instance[method].apply(instance, args);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ⭐关键:返回 instance(支持 file.xxx)
|
||||
return instance || this;
|
||||
// 如果是方法调用,返回方法结果;否则返回实例
|
||||
return methodResult !== undefined ? methodResult : instance || this;
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -31,6 +31,10 @@
|
||||
<div id="app">
|
||||
<button id="reloadBtn">重新加载文件</button>
|
||||
<button id="reloadBtn2">重新加载文件2</button>
|
||||
<button id="toggleSelectBtn">切换第一个文件选中状态</button>
|
||||
<button id="getSelectedBtn">获取选中文件</button>
|
||||
<button id="togglePreviewBtn">切换第一个文件预览状态</button>
|
||||
<button id="getPreviewBtn">获取预览文件</button>
|
||||
|
||||
<div style="height: 600px;width: 400px;">
|
||||
<div id="fileContainer"></div>
|
||||
@@ -54,6 +58,14 @@
|
||||
onUpload: function () {
|
||||
console.log('Upload clicked');
|
||||
alert('上传功能');
|
||||
},
|
||||
onPreview: function (file, isPreview) {
|
||||
console.log('预览事件:', file.name, '预览状态:', isPreview);
|
||||
if (isPreview) {
|
||||
alert('开始预览文件: ' + file.name);
|
||||
} else {
|
||||
alert('停止预览文件: ' + file.name);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -70,6 +82,45 @@
|
||||
{ name: '项目报告2.docx', size: 524288, uploadDate: '2024-02-20T14:45:00', url: '' },
|
||||
]);
|
||||
});
|
||||
|
||||
// 测试外部方法:切换选中状态
|
||||
$('#toggleSelectBtn').click(function () {
|
||||
const allFiles = file.getFiles();
|
||||
if (allFiles.length === 0) {
|
||||
alert('请先加载文件');
|
||||
return;
|
||||
}
|
||||
// 获取第一个文件的ID并切换选中状态
|
||||
const firstFileId = allFiles[0]._id;
|
||||
const isSelected = file.toggleSelect(firstFileId);
|
||||
console.log('文件', allFiles[0].name, '选中状态:', isSelected);
|
||||
});
|
||||
|
||||
// 测试外部方法:获取选中文件
|
||||
$('#getSelectedBtn').click(function () {
|
||||
const selectedFiles = file.getSelectedFiles();
|
||||
console.log('选中的文件:', selectedFiles);
|
||||
alert('选中的文件数量: ' + selectedFiles.length + '\n文件列表: ' + selectedFiles.map(f => f.name).join(', '));
|
||||
});
|
||||
|
||||
// 测试外部方法:切换预览状态
|
||||
$('#togglePreviewBtn').click(function () {
|
||||
const allFiles = file.getFiles();
|
||||
if (allFiles.length === 0) {
|
||||
alert('请先加载文件');
|
||||
return;
|
||||
}
|
||||
const firstFileId = allFiles[0]._id;
|
||||
const isPreview = file.togglePreview(firstFileId);
|
||||
console.log('文件', allFiles[0].name, '预览状态:', isPreview);
|
||||
});
|
||||
|
||||
// 测试外部方法:获取预览文件
|
||||
$('#getPreviewBtn').click(function () {
|
||||
const previewFiles = file.getPreviewFiles();
|
||||
console.log('预览的文件:', previewFiles);
|
||||
alert('预览的文件数量: ' + previewFiles.length + '\n文件列表: ' + previewFiles.map(f => f.name).join(', '));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>附件管理示例</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f5f7fa;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
```
|
||||
/* 顶部工具栏 */
|
||||
.file-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.file-toolbar button {
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.file-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* hover */
|
||||
.file-item:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* 模拟选中状态 */
|
||||
.file-item.active {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
|
||||
/* checkbox */
|
||||
.file-select {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 文件名 */
|
||||
.file-name {
|
||||
flex: 1;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.file-name:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 操作区 */
|
||||
.file-actions {
|
||||
display: none;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.file-item:hover .file-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.file-actions button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.file-actions button:hover {
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
|
||||
<div class="file-toolbar">
|
||||
<span>已选 0 个</span>
|
||||
<button>删除</button>
|
||||
<button>下载</button>
|
||||
</div>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
|
||||
<ul class="file-list">
|
||||
<li class="file-item active">
|
||||
<label class="file-select">
|
||||
<input type="checkbox" checked />
|
||||
</label>
|
||||
|
||||
```
|
||||
<span class="file-name">合同.pdf</span>
|
||||
|
||||
<div class="file-actions">
|
||||
<button title="预览">👁</button>
|
||||
<button title="下载">⬇</button>
|
||||
<button title="删除">🗑</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="file-item">
|
||||
<label class="file-select">
|
||||
<input type="checkbox" />
|
||||
</label>
|
||||
|
||||
<span class="file-name">图片.png</span>
|
||||
|
||||
<div class="file-actions">
|
||||
<button title="预览">👁</button>
|
||||
<button title="下载">⬇</button>
|
||||
<button title="删除">🗑</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="file-item">
|
||||
<label class="file-select">
|
||||
<input type="checkbox" />
|
||||
</label>
|
||||
|
||||
<span class="file-name">说明文档.docx</span>
|
||||
|
||||
<div class="file-actions">
|
||||
<button title="预览">👁</button>
|
||||
<button title="下载">⬇</button>
|
||||
<button title="删除">🗑</button>
|
||||
</div>
|
||||
</li>
|
||||
```
|
||||
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user