hookehuyr

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

在文件列表项中添加复制地址按钮,方便用户快速复制文件链接
实现现代浏览器和旧浏览器的兼容方案
...@@ -534,11 +534,20 @@ ...@@ -534,11 +534,20 @@
534 </div> 534 </div>
535 <div class="flex-1 min-w-0"> 535 <div class="flex-1 min-w-0">
536 <h3 class="text-base font-semibold text-gray-900 mb-2 line-clamp-2">{{ file.title || file.name }}</h3> 536 <h3 class="text-base font-semibold text-gray-900 mb-2 line-clamp-2">{{ file.title || file.name }}</h3>
537 - <div class="flex items-center gap-4 text-sm text-gray-600"> 537 + <div class="flex items-center justify-between gap-4 text-sm text-gray-600">
538 <div class="flex items-center gap-1"> 538 <div class="flex items-center gap-1">
539 <van-icon name="label-o" size="12" style="margin-right: 0.25rem;"/> 539 <van-icon name="label-o" size="12" style="margin-right: 0.25rem;"/>
540 <span>{{ getFileType(file.title || file.name) }}</span> 540 <span>{{ getFileType(file.title || file.name) }}</span>
541 </div> 541 </div>
542 + <!-- 复制地址按钮 -->
543 + <button
544 + @click="copyFileUrl(file.url)"
545 + 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"
546 + title="复制文件地址"
547 + >
548 + <van-icon name="link" size="12" />
549 + <span>复制地址</span>
550 + </button>
542 </div> 551 </div>
543 </div> 552 </div>
544 </div> 553 </div>
...@@ -1252,7 +1261,44 @@ const downloadFailInfo = ref({ ...@@ -1252,7 +1261,44 @@ const downloadFailInfo = ref({
1252 const showMaterialsPopup = ref(false); 1261 const showMaterialsPopup = ref(false);
1253 1262
1254 /** 1263 /**
1255 - * 复制文件URL到剪贴板 1264 + * 复制文件地址到剪贴板
1265 + * @param {string} url - 要复制的文件地址
1266 + */
1267 +const copyFileUrl = async (url) => {
1268 + try {
1269 + if (navigator.clipboard && window.isSecureContext) {
1270 + // 现代浏览器支持的方式
1271 + await navigator.clipboard.writeText(url);
1272 + showToast('文件地址已复制到剪贴板');
1273 + } else {
1274 + // 兼容旧浏览器的方式
1275 + const textArea = document.createElement('textarea');
1276 + textArea.value = url;
1277 + textArea.style.position = 'fixed';
1278 + textArea.style.left = '-999999px';
1279 + textArea.style.top = '-999999px';
1280 + document.body.appendChild(textArea);
1281 + textArea.focus();
1282 + textArea.select();
1283 +
1284 + try {
1285 + document.execCommand('copy');
1286 + showToast('文件地址已复制到剪贴板');
1287 + } catch (err) {
1288 + console.error('复制失败:', err);
1289 + showToast('复制失败,请手动复制地址');
1290 + } finally {
1291 + document.body.removeChild(textArea);
1292 + }
1293 + }
1294 + } catch (err) {
1295 + console.error('复制到剪贴板失败:', err);
1296 + showToast('复制失败,请手动复制地址');
1297 + }
1298 +};
1299 +
1300 +/**
1301 + * 复制到剪贴板
1256 * @param {string} url - 要复制的URL 1302 * @param {string} url - 要复制的URL
1257 */ 1303 */
1258 const copyToClipboard = async (url) => { 1304 const copyToClipboard = async (url) => {
......