237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: apply UI/storage/share optimizations and quota improvements

Browse Source
This commit is contained in:
yuyx
2026-02-12 18:02:57 +08:00
parent 1fcc60b9aa
commit 12859cbb20
13 changed files with 4476 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3027
frontend/app.html
View File

File diff suppressed because it is too large Load Diff

508
frontend/app.js
View File

@@ -1,4 +1,6 @@
const { createApp } = Vue;
const DEFAULT_LOCAL_STORAGE_QUOTA_BYTES = 1024 * 1024 * 1024; // 1GB
const DEFAULT_OSS_STORAGE_QUOTA_BYTES = 1024 * 1024 * 1024; // 1GB
createApp({
data() {
@@ -90,18 +92,13 @@ createApp({
// 分享管理
shares: [],
showShareAllModal: false,
showShareFileModal: false,
creatingShare: false, // 创建分享中状态
shareAllForm: {
password: "",
expiryType: "never",
customDays: 7
},
shareFileForm: {
fileName: "",
filePath: "",
isDirectory: false, // 新增：标记是否为文件夹
enablePassword: false,
password: "",
expiryType: "never",
customDays: 7
@@ -246,12 +243,15 @@ createApp({
contextMenuX: 0,
contextMenuY: 0,
contextMenuFile: null,
showMobileFileActionSheet: false,
mobileActionFile: null,
// 长按检测
longPressTimer: null,
longPressStartX: 0,
longPressStartY: 0,
longPressFile: null,
longPressTriggered: false,
// 媒体预览
showImageViewer: false,
@@ -260,15 +260,18 @@ createApp({
currentMediaUrl: '',
currentMediaName: '',
currentMediaType: '', // 'image', 'video', 'audio'
longPressDuration: 500, // 长按时间（毫秒）
longPressDuration: 420, // 长按时间（毫秒）
// 管理员编辑用户存储权限
showEditStorageModal: false,
editStorageForm: {
userId: null,
username: '',
storage_permission: 'oss_only',
local_storage_quota_value: 1, // 配额数值
quota_unit: 'GB' // 配额单位：MB 或 GB
local_storage_quota_value: 1, // 本地配额数值
quota_unit: 'GB', // 本地配额单位：MB 或 GB
oss_storage_quota_value: 1, // OSS配额数值（默认1GB）
oss_quota_unit: 'GB', // OSS配额单位：MB / GB / TB
oss_quota_unlimited: false // 兼容旧数据字段（当前固定为有限配额）
},
// 服务器存储统计
@@ -325,11 +328,82 @@ createApp({
return Math.round((this.localUsed / this.localQuota) * 100);
},
// OSS 配额相关（文件页展示）
ossQuotaBytes() {
const quota = Number(this.user?.oss_storage_quota || DEFAULT_OSS_STORAGE_QUOTA_BYTES);
if (!Number.isFinite(quota) || quota <= 0) {
return DEFAULT_OSS_STORAGE_QUOTA_BYTES;
}
return quota;
},
ossUsedBytes() {
const usageFromStats = Number(this.ossUsage?.totalSize);
if (Number.isFinite(usageFromStats) && usageFromStats >= 0) {
return usageFromStats;
}
const usageFromUser = Number(this.user?.storage_used || 0);
if (Number.isFinite(usageFromUser) && usageFromUser >= 0) {
return usageFromUser;
}
return 0;
},
ossQuotaFormatted() {
return this.formatBytes(this.ossQuotaBytes);
},
ossUsedFormatted() {
return this.formatBytes(this.ossUsedBytes);
},
ossQuotaPercentage() {
if (this.ossQuotaBytes <= 0) return 0;
return Math.min(100, Math.round((this.ossUsedBytes / this.ossQuotaBytes) * 100));
},
// 存储类型显示文本
storageTypeText() {
return this.storageType === 'local' ? '本地存储' : 'OSS存储';
},
// 文件统计信息（用于文件页工具栏）
fileStats() {
const list = Array.isArray(this.files) ? this.files : [];
let directoryCount = 0;
let fileCount = 0;
let totalFileBytes = 0;
for (const item of list) {
if (item?.isDirectory) {
directoryCount += 1;
continue;
}
fileCount += 1;
const currentSize = Number(item?.size || 0);
if (Number.isFinite(currentSize) && currentSize > 0) {
totalFileBytes += currentSize;
}
}
return {
totalCount: list.length,
directoryCount,
fileCount,
totalFileBytes
};
},
currentPathLabel() {
if (!this.currentPath || this.currentPath === '/') {
return '根目录';
}
return this.currentPath;
},
// 分享筛选+排序后的列表
filteredShares() {
let list = [...this.shares];
@@ -344,8 +418,16 @@ createApp({
}
if (this.shareFilters.type !== 'all') {
const targetType = this.shareFilters.type === 'all_files' ? 'all' : this.shareFilters.type;
list = list.filter(s => (s.share_type || 'file') === targetType);
const selectedType = this.shareFilters.type;
list = list.filter(s => {
if (selectedType === 'all_files') {
return this.isShareAllFiles(s);
}
if (selectedType === 'directory') {
return (s.share_type || 'file') === 'directory' && !this.isShareAllFiles(s);
}
return (s.share_type || 'file') === selectedType;
});
}
if (this.shareFilters.status !== 'all') {
@@ -353,8 +435,8 @@ createApp({
if (this.shareFilters.status === 'expired') return this.isExpired(s.expires_at);
if (this.shareFilters.status === 'expiring') return this.isExpiringSoon(s.expires_at) && !this.isExpired(s.expires_at);
if (this.shareFilters.status === 'active') return !this.isExpired(s.expires_at);
if (this.shareFilters.status === 'protected') return !!s.share_password;
if (this.shareFilters.status === 'public') return !s.share_password;
if (this.shareFilters.status === 'protected') return this.hasSharePassword(s);
if (this.shareFilters.status === 'public') return !this.hasSharePassword(s);
return true;
});
}
@@ -1125,6 +1207,7 @@ handleDragLeave(e) {
// 停止定期检查
this.stopProfileSync();
this.closeMobileFileActionSheet();
},
// 获取公开的系统配置（上传限制等）
@@ -1306,6 +1389,11 @@ handleDragLeave(e) {
// 更新用户本地存储信息（使用防抖避免频繁请求）
this.debouncedLoadUserProfile();
// OSS 模式下刷新一次空间统计，保证文件页配额显示实时
if (this.storageType === 'oss' && this.user?.oss_config_source !== 'none') {
this.loadOssUsage();
}
}
} catch (error) {
console.error('加载文件失败:', error);
@@ -1320,6 +1408,12 @@ handleDragLeave(e) {
},
async handleFileClick(file) {
// 修复：长按后会触发一次 click，需要忽略避免误打开文件/目录
if (this.longPressTriggered) {
this.longPressTriggered = false;
return;
}
if (file.isDirectory) {
const newPath = this.currentPath === '/'
? `/${file.name}`
@@ -1510,13 +1604,23 @@ handleDragLeave(e) {
// ===== 右键菜单和长按功能 =====
// 显示右键菜单（PC端）
// 显示右键菜单（PC端）/ 长按菜单（移动端）
showFileContextMenu(file, event) {
// 文件和文件夹都可以显示右键菜单
event.preventDefault();
event?.preventDefault?.();
event?.stopPropagation?.();
const isTouchContextMenu = this.isMobileViewport()
|| event?.pointerType === 'touch'
|| Boolean(event?.sourceCapabilities?.firesTouchEvents);
if (isTouchContextMenu) {
this.openMobileFileActionSheet(file, event);
return;
}
this.contextMenuFile = file;
this.contextMenuX = event.clientX;
this.contextMenuY = event.clientY;
this.contextMenuX = event?.clientX || 0;
this.contextMenuY = event?.clientY || 0;
this.showContextMenu = true;
// 点击其他地方关闭菜单
@@ -1530,10 +1634,52 @@ handleDragLeave(e) {
this.showContextMenu = false;
this.contextMenuFile = null;
},
isMobileViewport() {
return window.matchMedia('(max-width: 768px)').matches;
},
setMobileSheetScrollLock(locked) {
if (!document.body) return;
document.body.style.overflow = locked ? 'hidden' : '';
},
openMobileFileActionSheet(file, event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
this.hideContextMenu();
this.mobileActionFile = file;
this.showMobileFileActionSheet = true;
this.setMobileSheetScrollLock(true);
},
closeMobileFileActionSheet() {
this.showMobileFileActionSheet = false;
this.mobileActionFile = null;
this.setMobileSheetScrollLock(false);
},
async mobileFileAction(action) {
const targetFile = this.mobileActionFile;
this.closeMobileFileActionSheet();
if (!targetFile) {
return;
}
this.contextMenuFile = targetFile;
await this.contextMenuAction(action);
},
// 长按开始（移动端）
handleLongPressStart(file, event) {
if (file.isDirectory) return; // 文件夹不响应长按
if (!event?.touches?.length) return;
if (this.showMobileFileActionSheet) return;
this.longPressTriggered = false;
// 记录初始触摸位置，用于检测是否在滑动
const touch = event.touches[0];
@@ -1542,29 +1688,39 @@ handleDragLeave(e) {
this.longPressFile = file;
this.longPressTimer = setTimeout(() => {
// 触发长按菜单
this.contextMenuFile = file;
this.longPressTriggered = true;
// 使用记录的触摸位置
this.contextMenuX = this.longPressStartX;
this.contextMenuY = this.longPressStartY;
this.showContextMenu = true;
if (event?.cancelable) {
event.preventDefault();
}
if (this.isMobileViewport()) {
this.openMobileFileActionSheet(file, event);
} else {
// 触发长按菜单
this.contextMenuFile = file;
// 使用记录的触摸位置
this.contextMenuX = this.longPressStartX;
this.contextMenuY = this.longPressStartY;
this.showContextMenu = true;
// 点击其他地方关闭菜单
this.$nextTick(() => {
document.addEventListener('click', this.hideContextMenu, { once: true });
});
}
// 触摸震动反馈（如果支持）
if (navigator.vibrate) {
navigator.vibrate(50);
}
// 点击其他地方关闭菜单
this.$nextTick(() => {
document.addEventListener('click', this.hideContextMenu, { once: true });
});
}, this.longPressDuration);
},
// 长按移动检测（移动端）- 滑动时取消长按
handleLongPressMove(event) {
if (!this.longPressTimer) return;
if (!this.longPressTimer || !event?.touches?.length) return;
const touch = event.touches[0];
const moveX = Math.abs(touch.clientX - this.longPressStartX);
@@ -1583,6 +1739,7 @@ handleDragLeave(e) {
clearTimeout(this.longPressTimer);
this.longPressTimer = null;
}
this.longPressFile = null;
},
// 从菜单执行操作
@@ -1768,6 +1925,7 @@ handleDragLeave(e) {
? file.name
: `${this.currentPath}/${file.name}`;
this.shareFileForm.isDirectory = file.isDirectory; // 设置是否为文件夹
this.shareFileForm.enablePassword = false;
this.shareFileForm.password = '';
this.shareFileForm.expiryType = 'never';
this.shareFileForm.customDays = 7;
@@ -1775,45 +1933,76 @@ handleDragLeave(e) {
this.showShareFileModal = true;
},
async createShareAll() {
if (this.creatingShare) return; // 防止重复提交
this.creatingShare = true;
try {
const expiryDays = this.shareAllForm.expiryType === 'never' ? null :
this.shareAllForm.expiryType === 'custom' ? this.shareAllForm.customDays :
parseInt(this.shareAllForm.expiryType);
const response = await axios.post(
`${this.apiBase}/api/share/create`,
{
share_type: 'all',
password: this.shareAllForm.password || null,
expiry_days: expiryDays
},
);
if (response.data.success) {
this.shareResult = response.data;
this.showToast('success', '成功', '分享链接已创建');
this.loadShares();
}
} catch (error) {
console.error('创建分享失败:', error);
this.showToast('error', '错误', error.response?.data?.message || '创建分享失败');
} finally {
this.creatingShare = false;
toggleSharePassword(formType) {
if (formType === 'file' && !this.shareFileForm.enablePassword) {
this.shareFileForm.password = '';
}
},
resolveShareExpiry(expiryType, customDays) {
if (expiryType === 'never') {
return { valid: true, value: null };
}
const days = expiryType === 'custom'
? Number(customDays)
: Number(expiryType);
if (!Number.isInteger(days) || days < 1 || days > 365) {
return {
valid: false,
message: '有效期必须是 1-365 天的整数'
};
}
return { valid: true, value: days };
},
normalizeSharePassword(enablePassword, rawPassword) {
if (!enablePassword) {
return { valid: true, value: null };
}
const password = (rawPassword || '').trim();
if (!password) {
return { valid: false, message: '已启用密码保护，请输入访问密码' };
}
if (password.length > 32) {
return { valid: false, message: '访问密码不能超过32个字符' };
}
return { valid: true, value: password };
},
buildShareResult(data, options = {}) {
return {
...data,
has_password: typeof options.hasPassword === 'boolean' ? options.hasPassword : !!data.has_password,
target_name: options.targetName || '文件',
target_type: options.targetType || 'file',
share_password_plain: options.password || ''
};
},
async createShareFile() {
if (this.creatingShare) return; // 防止重复提交
this.creatingShare = true;
try {
const expiryDays = this.shareFileForm.expiryType === 'never' ? null :
this.shareFileForm.expiryType === 'custom' ? this.shareFileForm.customDays :
parseInt(this.shareFileForm.expiryType);
const expiryCheck = this.resolveShareExpiry(this.shareFileForm.expiryType, this.shareFileForm.customDays);
if (!expiryCheck.valid) {
this.showToast('warning', '提示', expiryCheck.message);
return;
}
const passwordCheck = this.normalizeSharePassword(this.shareFileForm.enablePassword, this.shareFileForm.password);
if (!passwordCheck.valid) {
this.showToast('warning', '提示', passwordCheck.message);
return;
}
const expiryDays = expiryCheck.value;
const password = passwordCheck.value;
// 根据是否为文件夹决定share_type
const shareType = this.shareFileForm.isDirectory ? 'directory' : 'file';
@@ -1824,15 +2013,20 @@ handleDragLeave(e) {
share_type: shareType, // 修复：文件夹使用directory类型
file_path: this.shareFileForm.filePath,
file_name: this.shareFileForm.fileName,
password: this.shareFileForm.password || null,
password,
expiry_days: expiryDays
},
);
if (response.data.success) {
this.shareResult = response.data;
const itemType = this.shareFileForm.isDirectory ? '文件夹' : '文件';
this.showToast('success', '成功', `${itemType}分享链接已创建`);
this.shareResult = this.buildShareResult(response.data, {
hasPassword: this.shareFileForm.enablePassword,
targetName: this.shareFileForm.fileName,
targetType: shareType,
password
});
this.showToast('success', '成功', this.shareFileForm.enablePassword ? `${itemType}加密分享已创建` : `${itemType}分享链接已创建`);
this.loadShares();
}
} catch (error) {
@@ -1909,12 +2103,21 @@ handleDragLeave(e) {
// OSS 直连上传
async uploadToOSSDirect(file) {
try {
// 预检查 OSS 配额（后端也会做强校验，未配置默认 1GB）
const ossQuota = Number(this.user?.oss_storage_quota || DEFAULT_OSS_STORAGE_QUOTA_BYTES);
const currentUsage = Number(this.user?.storage_used || this.ossUsage?.totalSize || 0);
if (currentUsage + file.size > ossQuota) {
const remaining = Math.max(ossQuota - currentUsage, 0);
throw new Error(`OSS 配额不足：文件 ${this.formatBytes(file.size)}，剩余 ${this.formatBytes(remaining)}（总配额 ${this.formatBytes(ossQuota)}）`);
}
// 1. 获取签名 URL（传递当前路径）
const { data: signData } = await axios.get(`${this.apiBase}/api/files/upload-signature`, {
params: {
filename: file.name,
path: this.currentPath,
contentType: file.type || 'application/octet-stream'
contentType: file.type || 'application/octet-stream',
size: file.size
}
});
@@ -1922,6 +2125,10 @@ handleDragLeave(e) {
throw new Error(signData.message || '获取上传签名失败');
}
if (!signData.completionToken) {
throw new Error('上传签名缺少完成凭证，请刷新页面后重试');
}
// 2. 直连 OSS 上传（不经过后端！）
await axios.put(signData.uploadUrl, file, {
headers: {
@@ -1939,6 +2146,7 @@ handleDragLeave(e) {
await axios.post(`${this.apiBase}/api/files/upload-complete`, {
objectKey: signData.objectKey,
size: file.size,
completionToken: signData.completionToken,
path: this.currentPath
});
@@ -2106,11 +2314,52 @@ handleDragLeave(e) {
return expireDate <= now;
},
normalizeSharePath(sharePath) {
if (!sharePath) return '/';
const normalized = String(sharePath)
.replace(/\\/g, '/')
.replace(/\/+/g, '/');
if (!normalized || normalized === '.') {
return '/';
}
return normalized.startsWith('/') ? normalized : `/${normalized}`;
},
isShareAllFiles(share) {
if (!share) return false;
const shareType = share.share_type || 'file';
const sharePath = this.normalizeSharePath(share.share_path || '/');
return shareType === 'all' || (shareType === 'directory' && sharePath === '/');
},
hasSharePassword(share) {
if (!share) return false;
if (typeof share.has_password === 'boolean') {
return share.has_password;
}
return !!share.share_password;
},
getShareTypeIcon(share) {
if (this.isShareAllFiles(share)) return 'fa-layer-group';
if ((share?.share_type || 'file') === 'directory') return 'fa-folder';
return 'fa-file-alt';
},
// 分享类型标签
getShareTypeLabel(type) {
switch (type) {
getShareTypeLabel(shareOrType, sharePath) {
const share = typeof shareOrType === 'object' && shareOrType !== null
? shareOrType
: { share_type: shareOrType, share_path: sharePath };
if (this.isShareAllFiles(share)) {
return '全部文件';
}
switch (share.share_type) {
case 'directory': return '文件夹';
case 'all': return '全部文件';
case 'file':
default: return '文件';
}
@@ -2129,7 +2378,7 @@ handleDragLeave(e) {
// 分享保护标签
getShareProtection(share) {
if (share.share_password) {
if (this.hasSharePassword(share)) {
return { text: '已加密', class: 'info', icon: 'fa-lock' };
}
return { text: '公开', class: 'info', icon: 'fa-unlock' };
@@ -2202,20 +2451,32 @@ handleDragLeave(e) {
}
},
copyShareLink(url) {
// 复制分享链接到剪贴板
copyTextToClipboard(text, successMessage = '已复制到剪贴板') {
if (!text) {
this.showToast('warning', '提示', '没有可复制的内容');
return;
}
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(() => {
this.showToast('success', '成功', '分享链接已复制到剪贴板');
navigator.clipboard.writeText(text).then(() => {
this.showToast('success', '成功', successMessage);
}).catch(() => {
this.fallbackCopyToClipboard(url);
this.fallbackCopyToClipboard(text, successMessage);
});
} else {
this.fallbackCopyToClipboard(url);
this.fallbackCopyToClipboard(text, successMessage);
}
},
fallbackCopyToClipboard(text) {
copyShareLink(url) {
this.copyTextToClipboard(url, '分享链接已复制到剪贴板');
},
copySharePassword(password) {
this.copyTextToClipboard(password, '访问密码已复制到剪贴板');
},
fallbackCopyToClipboard(text, successMessage = '已复制到剪贴板') {
// 备用复制方法
const textArea = document.createElement('textarea');
textArea.value = text;
@@ -2225,7 +2486,7 @@ handleDragLeave(e) {
textArea.select();
try {
document.execCommand('copy');
this.showToast('success', '成功', '分享链接已复制到剪贴板');
this.showToast('success', '成功', successMessage);
} catch (err) {
this.showToast('error', '错误', '复制失败，请手动复制');
}
@@ -2247,6 +2508,7 @@ handleDragLeave(e) {
}
},
async banUser(userId, banned) {
const action = banned ? '封禁' : '解封';
if (!confirm(`确定要${action}这个用户吗？`)) return;
@@ -2467,6 +2729,9 @@ handleDragLeave(e) {
if (response.data.success) {
this.ossUsage = response.data.usage;
if (this.user && this.ossUsage && Number.isFinite(Number(this.ossUsage.totalSize))) {
this.user.storage_used = Number(this.ossUsage.totalSize);
}
}
} catch (error) {
console.error('获取OSS空间使用情况失败:', error);
@@ -2643,39 +2908,80 @@ handleDragLeave(e) {
this.editStorageForm.username = user.username;
this.editStorageForm.storage_permission = user.storage_permission || 'oss_only';
// 智能识别配额单位
const quotaBytes = user.local_storage_quota || 1073741824;
const quotaMB = quotaBytes / 1024 / 1024;
const quotaGB = quotaMB / 1024;
// 如果配额能被1024整除且大于等于1GB，使用GB单位，否则使用MB
if (quotaMB >= 1024 && quotaMB % 1024 === 0) {
this.editStorageForm.local_storage_quota_value = quotaGB;
// 智能识别本地配额单位
const localQuotaBytes = Number(user.local_storage_quota || DEFAULT_LOCAL_STORAGE_QUOTA_BYTES);
const localQuotaMB = localQuotaBytes / 1024 / 1024;
const localQuotaGB = localQuotaMB / 1024;
if (localQuotaMB >= 1024 && localQuotaMB % 1024 === 0) {
this.editStorageForm.local_storage_quota_value = localQuotaGB;
this.editStorageForm.quota_unit = 'GB';
} else {
this.editStorageForm.local_storage_quota_value = Math.round(quotaMB);
this.editStorageForm.local_storage_quota_value = Math.max(1, Math.round(localQuotaMB));
this.editStorageForm.quota_unit = 'MB';
}
// 智能识别 OSS 配额单位（未配置时默认 1GB）
const ossQuotaBytes = Number(user.oss_storage_quota || DEFAULT_OSS_STORAGE_QUOTA_BYTES);
const effectiveOssQuotaBytes = Number.isFinite(ossQuotaBytes) && ossQuotaBytes > 0
? ossQuotaBytes
: DEFAULT_OSS_STORAGE_QUOTA_BYTES;
const mb = 1024 * 1024;
const gb = 1024 * 1024 * 1024;
const tb = 1024 * 1024 * 1024 * 1024;
this.editStorageForm.oss_quota_unlimited = false;
if (effectiveOssQuotaBytes >= tb && effectiveOssQuotaBytes % tb === 0) {
this.editStorageForm.oss_storage_quota_value = effectiveOssQuotaBytes / tb;
this.editStorageForm.oss_quota_unit = 'TB';
} else if (effectiveOssQuotaBytes >= gb && effectiveOssQuotaBytes % gb === 0) {
this.editStorageForm.oss_storage_quota_value = effectiveOssQuotaBytes / gb;
this.editStorageForm.oss_quota_unit = 'GB';
} else {
this.editStorageForm.oss_storage_quota_value = Math.max(1, Math.round(effectiveOssQuotaBytes / mb));
this.editStorageForm.oss_quota_unit = 'MB';
}
this.showEditStorageModal = true;
},
// 管理员：更新用户存储权限
async updateUserStorage() {
try {
// 根据单位计算字节数
let quotaBytes;
// 计算本地配额（字节）
if (!this.editStorageForm.local_storage_quota_value || this.editStorageForm.local_storage_quota_value < 1) {
this.showToast('error', '参数错误', '本地配额必须大于 0');
return;
}
let localQuotaBytes;
if (this.editStorageForm.quota_unit === 'GB') {
quotaBytes = this.editStorageForm.local_storage_quota_value * 1024 * 1024 * 1024;
localQuotaBytes = this.editStorageForm.local_storage_quota_value * 1024 * 1024 * 1024;
} else {
quotaBytes = this.editStorageForm.local_storage_quota_value * 1024 * 1024;
localQuotaBytes = this.editStorageForm.local_storage_quota_value * 1024 * 1024;
}
// 计算 OSS 配额（字节）
if (!this.editStorageForm.oss_storage_quota_value || this.editStorageForm.oss_storage_quota_value < 1) {
this.showToast('error', '参数错误', 'OSS 配额必须大于 0');
return;
}
let ossQuotaBytes;
if (this.editStorageForm.oss_quota_unit === 'TB') {
ossQuotaBytes = this.editStorageForm.oss_storage_quota_value * 1024 * 1024 * 1024 * 1024;
} else if (this.editStorageForm.oss_quota_unit === 'GB') {
ossQuotaBytes = this.editStorageForm.oss_storage_quota_value * 1024 * 1024 * 1024;
} else {
ossQuotaBytes = this.editStorageForm.oss_storage_quota_value * 1024 * 1024;
}
const response = await axios.post(
`${this.apiBase}/api/admin/users/${this.editStorageForm.userId}/storage-permission`,
{
storage_permission: this.editStorageForm.storage_permission,
local_storage_quota: quotaBytes
local_storage_quota: localQuotaBytes,
oss_storage_quota: ossQuotaBytes
},
);
@@ -2700,6 +3006,22 @@ handleDragLeave(e) {
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
},
getAdminUserQuotaPercentage(user) {
const quota = Number(user?.local_storage_quota || 0);
const used = Number(user?.local_storage_used || 0);
if (!Number.isFinite(quota) || quota <= 0) return 0;
if (!Number.isFinite(used) || used <= 0) return 0;
return Math.round((used / quota) * 100);
},
getAdminUserOssQuotaPercentage(user) {
const quota = Number(user?.oss_storage_quota || DEFAULT_OSS_STORAGE_QUOTA_BYTES);
const used = Number(user?.storage_used || 0);
if (!Number.isFinite(quota) || quota <= 0) return 0;
if (!Number.isFinite(used) || used <= 0) return 0;
return Math.min(100, Math.round((used / quota) * 100));
},
formatDate(dateString) {
if (!dateString) return '-';

421
frontend/share.html
View File

@@ -4,9 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件分享 - 玩玩云</title>
<script src="libs/vue.global.prod.js"></script>
<script src="libs/axios.min.js"></script>
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
<script src="/libs/vue.global.prod.js"></script>
<script src="/libs/axios.min.js"></script>
<link rel="stylesheet" href="/libs/fontawesome/css/all.min.css">
<style>
/* 防止 Vue 初始化前显示原始模板 */
[v-cloak] { display: none !important; }
@@ -626,14 +626,359 @@
background: rgba(255, 255, 255, 0.15);
}
</style>
<style>
/* ===== Enterprise Netdisk Share UI Rebuild (Classic Cloud Disk) ===== */
body.enterprise-netdisk-share,
body.enterprise-netdisk-share.light-theme,
body.enterprise-netdisk-share:not(.light-theme) {
--bg-primary: #edf2fb;
--bg-secondary: #fbfdff;
--bg-card: #f8fbff;
--bg-card-hover: #eef3fb;
--glass-border: #d2ddec;
--glass-border-hover: #bccce2;
--text-primary: #1f2937;
--text-secondary: #5b6472;
--text-muted: #8b95a7;
--accent-1: #2563eb;
--accent-2: #1d4ed8;
--accent-3: #1e40af;
--glow: rgba(37, 99, 235, 0.14);
--danger: #dc2626;
--success: #16a34a;
--warning: #d97706;
background: linear-gradient(180deg, #eef3fb 0%, #f8fafe 42%, #edf2fb 100%) !important;
color: var(--text-primary) !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', Roboto, sans-serif;
line-height: 1.5;
padding: 14px 8px;
background-attachment: fixed;
}
body.enterprise-netdisk-share::before {
display: none !important;
}
body.enterprise-netdisk-share .container {
max-width: 1140px;
margin: 0 auto;
}
body.enterprise-netdisk-share .card {
border: 1px solid var(--glass-border);
border-radius: 10px;
background: var(--bg-card);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
backdrop-filter: none;
padding: 18px;
margin-bottom: 0;
}
body.enterprise-netdisk-share .title {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--glass-border);
color: var(--text-primary);
font-size: 21px;
background: none;
-webkit-text-fill-color: currentColor;
}
body.enterprise-netdisk-share .title i {
color: var(--accent-1);
-webkit-text-fill-color: currentColor;
}
body.enterprise-netdisk-share .share-back-btn {
margin-right: 6px;
}
body.enterprise-netdisk-share .share-meta-bar {
margin-bottom: 12px;
border: 1px solid var(--glass-border);
border-radius: 8px;
background: var(--bg-card-hover);
color: var(--text-secondary);
font-size: 13px;
line-height: 1.7;
padding: 10px 12px;
}
body.enterprise-netdisk-share .share-expire-time {
color: var(--success);
}
body.enterprise-netdisk-share .share-expire-time.expiring {
color: var(--warning);
}
body.enterprise-netdisk-share .share-expire-time.expired {
color: var(--danger);
}
body.enterprise-netdisk-share .share-expire-time.valid {
color: var(--success);
}
body.enterprise-netdisk-share .btn {
border-radius: 8px;
border: 1px solid transparent;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
padding: 9px 14px;
box-shadow: none;
transition: all .2s ease;
}
body.enterprise-netdisk-share .btn-primary {
background: var(--accent-1);
border-color: var(--accent-1);
color: #fff;
}
body.enterprise-netdisk-share .btn-primary:hover {
background: var(--accent-2);
border-color: var(--accent-2);
transform: none;
box-shadow: none;
}
body.enterprise-netdisk-share .btn-secondary {
background: var(--bg-secondary);
border-color: var(--glass-border);
color: var(--text-primary);
}
body.enterprise-netdisk-share .btn-secondary:hover {
background: var(--bg-card-hover);
border-color: var(--glass-border-hover);
}
body.enterprise-netdisk-share .form-label {
color: var(--text-secondary);
font-size: 13px;
margin-bottom: 6px;
font-weight: 600;
}
body.enterprise-netdisk-share .form-input {
border: 1px solid var(--glass-border);
border-radius: 8px;
background: var(--bg-secondary);
color: var(--text-primary);
padding: 10px 12px;
font-size: 14px;
}
body.enterprise-netdisk-share .form-input:focus {
border-color: var(--accent-1);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
outline: none;
background: var(--bg-secondary);
}
body.enterprise-netdisk-share .alert {
border-radius: 8px;
font-size: 13px;
padding: 10px 12px;
}
body.enterprise-netdisk-share .alert-error {
background: #fef2f2;
border-color: #fca5a5;
color: #991b1b;
}
body.enterprise-netdisk-share .view-controls {
display: flex;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
body.enterprise-netdisk-share .loading {
border: 1px solid var(--glass-border);
border-radius: 8px;
background: var(--bg-card-hover);
color: var(--text-secondary);
padding: 28px 14px;
}
body.enterprise-netdisk-share .spinner {
width: 30px;
height: 30px;
border: 3px solid rgba(148, 163, 184, 0.25);
border-top: 3px solid var(--accent-1);
margin-bottom: 10px;
}
body.enterprise-netdisk-share .file-grid {
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
body.enterprise-netdisk-share .file-grid-item {
border: 1px solid var(--glass-border);
border-radius: 8px;
background: var(--bg-secondary);
min-height: 170px;
padding: 12px;
transition: all .2s ease;
}
body.enterprise-netdisk-share .file-grid-item:hover {
border-color: #93c5fd;
background: #f8fbff;
transform: none;
box-shadow: none;
}
body.enterprise-netdisk-share .file-grid-icon {
margin-bottom: 10px;
}
body.enterprise-netdisk-share .file-grid-name {
font-size: 13px;
line-height: 1.35;
color: var(--text-primary);
}
body.enterprise-netdisk-share .file-grid-size {
font-size: 12px;
color: var(--text-muted);
margin: 6px 0 10px;
}
body.enterprise-netdisk-share .file-list {
border: 1px solid var(--glass-border);
border-radius: 8px;
overflow: hidden;
background: var(--bg-secondary);
}
body.enterprise-netdisk-share .file-item {
padding: 10px 12px;
border-bottom: 1px solid var(--glass-border);
transition: all .2s ease;
}
body.enterprise-netdisk-share .file-item:hover {
background: var(--bg-card-hover);
}
body.enterprise-netdisk-share .file-icon {
width: 26px;
text-align: center;
flex-shrink: 0;
}
body.enterprise-netdisk-share .single-file-container {
border: 1px solid var(--glass-border);
border-radius: 8px;
background: var(--bg-card-hover);
padding: 14px;
min-height: auto;
}
body.enterprise-netdisk-share .single-file-card {
border: 1px solid var(--glass-border);
border-radius: 8px;
background: var(--bg-secondary);
box-shadow: none;
padding: 20px;
max-width: 460px;
}
body.enterprise-netdisk-share .single-file-name {
color: var(--text-primary);
font-size: 18px;
}
body.enterprise-netdisk-share .single-file-size {
color: var(--text-secondary);
font-size: 13px;
}
body.enterprise-netdisk-share .single-file-download {
padding: 10px 20px;
font-size: 14px;
}
body.enterprise-netdisk-share .share-not-found {
border: 1px solid var(--glass-border);
border-radius: 8px;
background: var(--bg-card-hover);
padding: 40px 14px;
text-align: center;
}
body.enterprise-netdisk-share .share-not-found-title {
margin-bottom: 10px;
font-size: 22px;
color: var(--text-primary);
}
body.enterprise-netdisk-share .share-not-found-message {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
}
body.enterprise-netdisk-share ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
body.enterprise-netdisk-share ::-webkit-scrollbar-track {
background: transparent;
}
body.enterprise-netdisk-share ::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.45);
border-radius: 999px;
}
@media (max-width: 900px) {
body.enterprise-netdisk-share .card {
padding: 14px;
}
body.enterprise-netdisk-share .title {
font-size: 20px;
}
body.enterprise-netdisk-share .view-controls {
flex-direction: column;
}
body.enterprise-netdisk-share .view-controls .btn {
width: 100%;
}
body.enterprise-netdisk-share .file-grid {
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
gap: 8px;
}
body.enterprise-netdisk-share .file-grid-item {
min-height: 152px;
}
body.enterprise-netdisk-share .single-file-card {
padding: 16px;
}
}
</style>
</head>
<body>
<body class="enterprise-netdisk-share">
<div id="app" v-cloak>
<div class="container">
<div class="card">
<div class="title">
<!-- 返回按钮：仅在查看单个文件详情且不是单文件分享时显示 -->
<button v-if="viewingFile && shareInfo.share_type !== 'file'" class="btn btn-secondary" @click="backToList" style="margin-right: 10px;">
<button v-if="viewingFile && shareInfo.share_type !== 'file'" class="btn btn-secondary share-back-btn" @click="backToList">
<i class="fas fa-arrow-left"></i> 返回列表
</button>
<i class="fas fa-cloud"></i>
@@ -671,11 +1016,11 @@
<!-- 文件列表 -->
<div v-else-if="verified">
<p style="color: var(--text-secondary); margin-bottom: 20px;">
<p class="share-meta-bar">
分享者: <strong style="color: var(--text-primary);">{{ shareInfo.username }}</strong> |
创建时间: {{ formatDate(shareInfo.created_at) }}
<span v-if="shareInfo.expires_at"> | 到期时间: <strong :style="{color: isExpiringSoon(shareInfo.expires_at) ? '#f59e0b' : isExpired(shareInfo.expires_at) ? '#ef4444' : '#22c55e'}">{{ formatExpireTime(shareInfo.expires_at) }}</strong></span>
<span v-else> | 有效期: <strong style="color: #22c55e;">永久有效</strong></span>
<span v-if="shareInfo.expires_at"> | 到期时间: <strong class="share-expire-time" :class="{ expiring: isExpiringSoon(shareInfo.expires_at), expired: isExpired(shareInfo.expires_at) }">{{ formatExpireTime(shareInfo.expires_at) }}</strong></span>
<span v-else> | 有效期: <strong class="share-expire-time valid">永久有效</strong></span>
</p>
<!-- 视图切换按钮 (多文件时才显示) -->
@@ -777,7 +1122,21 @@
methods: {
async init() {
const urlParams = new URLSearchParams(window.location.search);
this.shareCode = urlParams.get('code');
let shareCode = (urlParams.get('code') || '').trim();
// 兼容 /s/{code} 直链（无 query 参数）
if (!shareCode) {
const match = window.location.pathname.match(/^\/s\/([^/?#]+)/i);
if (match && match[1]) {
try {
shareCode = decodeURIComponent(match[1]).trim();
} catch (_) {
shareCode = match[1].trim();
}
}
}
this.shareCode = shareCode;
if (!this.shareCode) {
this.errorMessage = '无效的分享链接';
@@ -906,21 +1265,20 @@
try {
// 获取下载 URL（OSS 直连或后端代理）
const params = { path: filePath };
if (this.password) {
params.password = this.password;
}
const { data } = await axios.get(`${this.apiBase}/api/share/${this.shareCode}/download-url`, { params });
const { data } = await axios.post(`${this.apiBase}/api/share/${this.shareCode}/download-url`, {
path: filePath,
password: this.password || undefined
});
if (data.success) {
// 记录下载次数（异步，不等待）
axios.post(`${this.apiBase}/api/share/${this.shareCode}/download`)
.catch(err => console.error('记录下载次数失败:', err));
if (data.direct) {
// OSS 直连下载：新窗口打开
console.log("[分享下载] OSS 直连下载");
// 仅直连下载需要单独记录下载次数（本地代理下载在后端接口内已计数）
axios.post(`${this.apiBase}/api/share/${this.shareCode}/download`)
.catch(err => console.error('记录下载次数失败:', err));
window.open(data.downloadUrl, '_blank');
} else {
// 本地存储：通过后端下载
@@ -930,7 +1288,7 @@
}
} catch (error) {
console.error('[分享下载] 获取下载链接失败:', error);
alert('获取下载链接失败: ' + (error.response?.data?.message || error.message));
this.errorMessage = '获取下载链接失败: ' + (error.response?.data?.message || error.message);
}
},
@@ -1049,7 +1407,28 @@
}
},
mounted() {
async mounted() {
axios.defaults.withCredentials = true;
axios.interceptors.request.use(config => {
const csrfToken = document.cookie
.split('; ')
.find(row => row.startsWith('csrf_token='))
?.split('=')[1];
if (csrfToken && ['POST', 'PUT', 'DELETE', 'PATCH'].includes(config.method?.toUpperCase())) {
config.headers['X-CSRF-Token'] = csrfToken;
}
return config;
});
try {
await axios.get(`${this.apiBase}/api/csrf-token`);
} catch (error) {
console.warn('初始化 CSRF Token 失败:', error?.message || error);
}
this.init();
}
}).mount('#app');