refactor(material): 统一文件预览逻辑
移除重复的图片预览判断逻辑,统一使用 useFileOperation
Showing
2 changed files
with
10 additions
and
92 deletions
| ... | @@ -59,7 +59,6 @@ | ... | @@ -59,7 +59,6 @@ |
| 59 | */ | 59 | */ |
| 60 | 60 | ||
| 61 | import { defineProps, defineEmits } from 'vue'; | 61 | import { defineProps, defineEmits } from 'vue'; |
| 62 | -import Taro from '@tarojs/taro'; | ||
| 63 | import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons'; | 62 | import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons'; |
| 64 | import ListItemActions from '@/components/list/ListItemActions/index.vue'; | 63 | import ListItemActions from '@/components/list/ListItemActions/index.vue'; |
| 65 | import { useCollectOperation } from '@/composables/useCollectOperation'; | 64 | import { useCollectOperation } from '@/composables/useCollectOperation'; |
| ... | @@ -155,54 +154,14 @@ const { toggleCollect } = useCollectOperation(); | ... | @@ -155,54 +154,14 @@ const { toggleCollect } = useCollectOperation(); |
| 155 | 154 | ||
| 156 | /** | 155 | /** |
| 157 | * 使用文件列表点击处理器(内部实现) | 156 | * 使用文件列表点击处理器(内部实现) |
| 157 | + * | ||
| 158 | + * @description 直接使用 useFileOperation 的自动文件类型判断 | ||
| 159 | + * - 图片文件:自动使用 Taro.previewImage 预览 | ||
| 160 | + * - 视频文件:自动跳转到视频播放页面 | ||
| 161 | + * - 其他文件:自动下载并使用 Taro.openDocument 打开 | ||
| 158 | */ | 162 | */ |
| 159 | const { handleClick } = useListItemClick({ | 163 | const { handleClick } = useListItemClick({ |
| 160 | listType: ListType.FILE, | 164 | listType: ListType.FILE, |
| 161 | - onBeforeClick: async (item) => { | ||
| 162 | - /** | ||
| 163 | - * 检查文件类型并使用对应的预览方式 | ||
| 164 | - * - 图片文件:使用 Taro.previewImage 预览 | ||
| 165 | - * - 其他文件:继续默认的文件打开流程 | ||
| 166 | - */ | ||
| 167 | - const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'] | ||
| 168 | - const extension = item.extension?.toLowerCase() || '' | ||
| 169 | - | ||
| 170 | - console.log('[MaterialCard] 文件类型:', extension, '文件名:', item.title) | ||
| 171 | - | ||
| 172 | - if (imageExtensions.includes(extension)) { | ||
| 173 | - // 图片文件:使用 Taro 预览 | ||
| 174 | - console.log('[MaterialCard] 检测到图片文件,使用图片预览') | ||
| 175 | - | ||
| 176 | - // 构建图片列表(当前图片) | ||
| 177 | - const urls = [item.downloadUrl] | ||
| 178 | - | ||
| 179 | - try { | ||
| 180 | - // 短暂延迟后打开预览(让用户看到提示) | ||
| 181 | - await new Promise(resolve => setTimeout(resolve, 300)) | ||
| 182 | - | ||
| 183 | - await Taro.previewImage({ | ||
| 184 | - current: item.downloadUrl, | ||
| 185 | - urls: urls | ||
| 186 | - }) | ||
| 187 | - | ||
| 188 | - // 预览成功,阻止默认的文件打开行为 | ||
| 189 | - return false | ||
| 190 | - } catch (err) { | ||
| 191 | - console.error('[MaterialCard] 图片预览失败:', err) | ||
| 192 | - Taro.showToast({ | ||
| 193 | - title: '图片预览失败', | ||
| 194 | - icon: 'none', | ||
| 195 | - duration: 2000 | ||
| 196 | - }) | ||
| 197 | - // 预览失败,返回 true 继续默认行为 | ||
| 198 | - return true | ||
| 199 | - } | ||
| 200 | - } | ||
| 201 | - | ||
| 202 | - // 非图片文件:继续默认的文件打开流程 | ||
| 203 | - console.log('[MaterialCard] 非图片文件,使用默认打开方式') | ||
| 204 | - return true | ||
| 205 | - }, | ||
| 206 | onAfterClick: (item) => { | 165 | onAfterClick: (item) => { |
| 207 | console.log('[MaterialCard] 用户打开了资料:', item.title) | 166 | console.log('[MaterialCard] 用户打开了资料:', item.title) |
| 208 | // 通知父组件查看完成 | 167 | // 通知父组件查看完成 | ... | ... |
| ... | @@ -669,55 +669,14 @@ const onClear = async () => { | ... | @@ -669,55 +669,14 @@ const onClear = async () => { |
| 669 | 669 | ||
| 670 | /** | 670 | /** |
| 671 | * 使用文件列表点击处理器 | 671 | * 使用文件列表点击处理器 |
| 672 | - * @description 添加图片预览功能,点击图片文件时使用 Taro.previewImage | 672 | + * |
| 673 | + * @description 直接使用 useFileOperation 的自动文件类型判断 | ||
| 674 | + * - 图片文件:自动使用 Taro.previewImage 预览 | ||
| 675 | + * - 视频文件:自动跳转到视频播放页面 | ||
| 676 | + * - 其他文件:自动下载并使用 Taro.openDocument 打开 | ||
| 673 | */ | 677 | */ |
| 674 | const { handleClick: onView } = useListItemClick({ | 678 | const { handleClick: onView } = useListItemClick({ |
| 675 | listType: ListType.FILE, | 679 | listType: ListType.FILE, |
| 676 | - onBeforeClick: async (item) => { | ||
| 677 | - /** | ||
| 678 | - * 检查文件类型并使用对应的预览方式 | ||
| 679 | - * - 图片文件:使用 Taro.previewImage 预览 | ||
| 680 | - * - 其他文件:继续默认的文件打开流程 | ||
| 681 | - */ | ||
| 682 | - const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'] | ||
| 683 | - const extension = item.extension?.toLowerCase() || '' | ||
| 684 | - | ||
| 685 | - console.log('[Material List] 文件类型:', extension, '文件名:', item.title) | ||
| 686 | - | ||
| 687 | - if (imageExtensions.includes(extension)) { | ||
| 688 | - // 图片文件:使用 Taro 预览 | ||
| 689 | - console.log('[Material List] 检测到图片文件,使用图片预览') | ||
| 690 | - | ||
| 691 | - // 构建图片列表(当前图片) | ||
| 692 | - const urls = [item.downloadUrl] | ||
| 693 | - | ||
| 694 | - try { | ||
| 695 | - // 短暂延迟后打开预览(让用户看到提示) | ||
| 696 | - await new Promise(resolve => setTimeout(resolve, 300)) | ||
| 697 | - | ||
| 698 | - await Taro.previewImage({ | ||
| 699 | - current: item.downloadUrl, // 当前显示图片的 http 链接 | ||
| 700 | - urls: urls // 需要预览的图片 http 链接列表 | ||
| 701 | - }) | ||
| 702 | - | ||
| 703 | - // 预览成功,阻止默认的文件打开行为 | ||
| 704 | - return false | ||
| 705 | - } catch (err) { | ||
| 706 | - console.error('[Material List] 图片预览失败:', err) | ||
| 707 | - Taro.showToast({ | ||
| 708 | - title: '图片预览失败', | ||
| 709 | - icon: 'none', | ||
| 710 | - duration: 2000 | ||
| 711 | - }) | ||
| 712 | - // 预览失败,返回 true 继续默认行为 | ||
| 713 | - return true | ||
| 714 | - } | ||
| 715 | - } | ||
| 716 | - | ||
| 717 | - // 非图片文件:继续默认的文件打开流程 | ||
| 718 | - console.log('[Material List] 非图片文件,使用默认打开方式') | ||
| 719 | - return true | ||
| 720 | - }, | ||
| 721 | onAfterClick: (item) => { | 680 | onAfterClick: (item) => { |
| 722 | console.log('[Material List] 用户打开了资料:', item.title) | 681 | console.log('[Material List] 用户打开了资料:', item.title) |
| 723 | } | 682 | } | ... | ... |
-
Please register or login to post a comment