You need to sign in or sign up before continuing.
hookehuyr

refactor(material): 统一文件预览逻辑

移除重复的图片预览判断逻辑,统一使用 useFileOperation
......@@ -59,7 +59,6 @@
*/
import { defineProps, defineEmits } from 'vue';
import Taro from '@tarojs/taro';
import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons';
import ListItemActions from '@/components/list/ListItemActions/index.vue';
import { useCollectOperation } from '@/composables/useCollectOperation';
......@@ -155,54 +154,14 @@ const { toggleCollect } = useCollectOperation();
/**
* 使用文件列表点击处理器(内部实现)
*
* @description 直接使用 useFileOperation 的自动文件类型判断
* - 图片文件:自动使用 Taro.previewImage 预览
* - 视频文件:自动跳转到视频播放页面
* - 其他文件:自动下载并使用 Taro.openDocument 打开
*/
const { handleClick } = useListItemClick({
listType: ListType.FILE,
onBeforeClick: async (item) => {
/**
* 检查文件类型并使用对应的预览方式
* - 图片文件:使用 Taro.previewImage 预览
* - 其他文件:继续默认的文件打开流程
*/
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg']
const extension = item.extension?.toLowerCase() || ''
console.log('[MaterialCard] 文件类型:', extension, '文件名:', item.title)
if (imageExtensions.includes(extension)) {
// 图片文件:使用 Taro 预览
console.log('[MaterialCard] 检测到图片文件,使用图片预览')
// 构建图片列表(当前图片)
const urls = [item.downloadUrl]
try {
// 短暂延迟后打开预览(让用户看到提示)
await new Promise(resolve => setTimeout(resolve, 300))
await Taro.previewImage({
current: item.downloadUrl,
urls: urls
})
// 预览成功,阻止默认的文件打开行为
return false
} catch (err) {
console.error('[MaterialCard] 图片预览失败:', err)
Taro.showToast({
title: '图片预览失败',
icon: 'none',
duration: 2000
})
// 预览失败,返回 true 继续默认行为
return true
}
}
// 非图片文件:继续默认的文件打开流程
console.log('[MaterialCard] 非图片文件,使用默认打开方式')
return true
},
onAfterClick: (item) => {
console.log('[MaterialCard] 用户打开了资料:', item.title)
// 通知父组件查看完成
......
......@@ -669,55 +669,14 @@ const onClear = async () => {
/**
* 使用文件列表点击处理器
* @description 添加图片预览功能,点击图片文件时使用 Taro.previewImage
*
* @description 直接使用 useFileOperation 的自动文件类型判断
* - 图片文件:自动使用 Taro.previewImage 预览
* - 视频文件:自动跳转到视频播放页面
* - 其他文件:自动下载并使用 Taro.openDocument 打开
*/
const { handleClick: onView } = useListItemClick({
listType: ListType.FILE,
onBeforeClick: async (item) => {
/**
* 检查文件类型并使用对应的预览方式
* - 图片文件:使用 Taro.previewImage 预览
* - 其他文件:继续默认的文件打开流程
*/
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg']
const extension = item.extension?.toLowerCase() || ''
console.log('[Material List] 文件类型:', extension, '文件名:', item.title)
if (imageExtensions.includes(extension)) {
// 图片文件:使用 Taro 预览
console.log('[Material List] 检测到图片文件,使用图片预览')
// 构建图片列表(当前图片)
const urls = [item.downloadUrl]
try {
// 短暂延迟后打开预览(让用户看到提示)
await new Promise(resolve => setTimeout(resolve, 300))
await Taro.previewImage({
current: item.downloadUrl, // 当前显示图片的 http 链接
urls: urls // 需要预览的图片 http 链接列表
})
// 预览成功,阻止默认的文件打开行为
return false
} catch (err) {
console.error('[Material List] 图片预览失败:', err)
Taro.showToast({
title: '图片预览失败',
icon: 'none',
duration: 2000
})
// 预览失败,返回 true 继续默认行为
return true
}
}
// 非图片文件:继续默认的文件打开流程
console.log('[Material List] 非图片文件,使用默认打开方式')
return true
},
onAfterClick: (item) => {
console.log('[Material List] 用户打开了资料:', item.title)
}
......