hookehuyr

feat(StudyDetailPage): 添加复制文件地址功能按钮

在文件列表项中添加复制地址按钮,方便用户快速复制文件链接
实现现代浏览器和旧浏览器的兼容方案
......@@ -534,11 +534,20 @@
</div>
<div class="flex-1 min-w-0">
<h3 class="text-base font-semibold text-gray-900 mb-2 line-clamp-2">{{ file.title || file.name }}</h3>
<div class="flex items-center gap-4 text-sm text-gray-600">
<div class="flex items-center justify-between gap-4 text-sm text-gray-600">
<div class="flex items-center gap-1">
<van-icon name="label-o" size="12" style="margin-right: 0.25rem;"/>
<span>{{ getFileType(file.title || file.name) }}</span>
</div>
<!-- 复制地址按钮 -->
<button
@click="copyFileUrl(file.url)"
class="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded transition-colors"
title="复制文件地址"
>
<van-icon name="link" size="12" />
<span>复制地址</span>
</button>
</div>
</div>
</div>
......@@ -1252,7 +1261,44 @@ const downloadFailInfo = ref({
const showMaterialsPopup = ref(false);
/**
* 复制文件URL到剪贴板
* 复制文件地址到剪贴板
* @param {string} url - 要复制的文件地址
*/
const copyFileUrl = async (url) => {
try {
if (navigator.clipboard && window.isSecureContext) {
// 现代浏览器支持的方式
await navigator.clipboard.writeText(url);
showToast('文件地址已复制到剪贴板');
} else {
// 兼容旧浏览器的方式
const textArea = document.createElement('textarea');
textArea.value = url;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
showToast('文件地址已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
showToast('复制失败,请手动复制地址');
} finally {
document.body.removeChild(textArea);
}
}
} catch (err) {
console.error('复制到剪贴板失败:', err);
showToast('复制失败,请手动复制地址');
}
};
/**
* 复制到剪贴板
* @param {string} url - 要复制的URL
*/
const copyToClipboard = async (url) => {
......