add:新增保存功能
This commit is contained in:
@@ -137,6 +137,7 @@
|
||||
class="h-[80vh] object-contain rounded-md mx-auto"
|
||||
/>
|
||||
<template #footer>
|
||||
<span class="text-sm text-gray-500">长按保存图片</span>
|
||||
<el-button type="info" plain @click="handleClose">关闭</el-button>
|
||||
<!-- <el-button type="primary" @click="handleCopy(currentItem.content)">复制文案</el-button> -->
|
||||
<!-- 保存 -->
|
||||
|
||||
+135
-250
@@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<!-- <div v-if="taskInfo && taskTypes.length"> -->
|
||||
<div class="task-production-detail">
|
||||
<div
|
||||
class="task-production-detail-header flex items-center justify-between"
|
||||
:class="[isMobile ? 'p-2' : 'p-4']"
|
||||
:class="[isMobile ? 'p-2 pt-[safe-area-inset-top] pt-[44px]' : 'p-4']"
|
||||
>
|
||||
<p
|
||||
class="text-white font-bold one-ell"
|
||||
@@ -11,7 +10,10 @@
|
||||
>
|
||||
作品集
|
||||
</p>
|
||||
<div class="flex items-center gap-2 bg-[#b3d5ff] rounded-lg flex-1">
|
||||
<div
|
||||
class="flex items-center gap-2 bg-[#b3d5ff] rounded-lg flex-1"
|
||||
:class="[isMobile ? 'w-full' : 'max-w-[300px]']"
|
||||
>
|
||||
<el-input
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入作品标题搜索对应作品"
|
||||
@@ -26,7 +28,7 @@
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滚动容器 ref 绑定 -->
|
||||
|
||||
<div
|
||||
ref="scrollContainer"
|
||||
class="card-scroll-container"
|
||||
@@ -62,7 +64,7 @@
|
||||
"
|
||||
/>
|
||||
<div
|
||||
class="flex gap-2 items-center justify-start"
|
||||
class="flex gap-2 items-center justify-start flex-wrap"
|
||||
:class="[isMobile ? 'p-2' : 'p-4']"
|
||||
>
|
||||
<el-tag
|
||||
@@ -78,7 +80,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
<!-- 加载状态提示 -->
|
||||
<div class="loading-tip">
|
||||
<span v-if="isLoading">加载中...</span>
|
||||
<span v-else-if="!hasMore">没有更多了</span>
|
||||
@@ -91,6 +92,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- PC端抽屉 -->
|
||||
<el-drawer
|
||||
v-if="!isMobile"
|
||||
v-model="visible"
|
||||
@@ -125,30 +127,53 @@
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="info" plain @click="handleClose">关闭</el-button>
|
||||
<!-- <el-button type="primary" @click="handleCopy(currentItem.content)">复制文案</el-button> -->
|
||||
<!-- 保存 -->
|
||||
<!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
|
||||
<el-button type="default" plain @click="handleClose">关闭</el-button>
|
||||
<!-- 全环境通用保存按钮 -->
|
||||
<el-button type="primary" @click="handleSave" :loading="saving">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
<el-dialog
|
||||
|
||||
<!-- 移动端弹窗 -->
|
||||
<!-- <el-dialog
|
||||
v-if="isMobile"
|
||||
v-model="visible"
|
||||
:size="500"
|
||||
@close="handleClose"
|
||||
fullscreen
|
||||
> -->
|
||||
<div
|
||||
v-if="isMobile && visible"
|
||||
class="fixed top-0 left-0 w-full h-full bg-black bg-black/75 z-10"
|
||||
@click="handleClose"
|
||||
>
|
||||
<img
|
||||
@click.stop
|
||||
:src="currentItem.fileUrl"
|
||||
class="h-[80vh] object-contain rounded-md mx-auto"
|
||||
class="w-full h-full object-contain rounded-md mx-auto"
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button type="info" plain @click="handleClose">关闭</el-button>
|
||||
<!-- <el-button type="primary" @click="handleCopy(currentItem.content)">复制文案</el-button> -->
|
||||
<!-- 保存 -->
|
||||
<!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
|
||||
</template>
|
||||
</el-dialog>
|
||||
<div
|
||||
@click.stop
|
||||
class="fixed bottom-3 left-0 w-full p-4 flex justify-end items-center gap-2 z-11 "
|
||||
>
|
||||
<el-button type="info" plain :icon="Close" @click="handleClose"
|
||||
>关闭</el-button
|
||||
>
|
||||
<!-- circle -->
|
||||
<!-- 全环境通用保存按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSave"
|
||||
:icon="Download"
|
||||
color="#0074FE"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- </el-dialog> -->
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
v-show="showScrollToTop"
|
||||
type="primary"
|
||||
@@ -160,90 +185,67 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
computed,
|
||||
} from "vue";
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick, computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { debounce, throttle } from "lodash-es"; // 记得安装lodash-es
|
||||
import { debounce, throttle } from "lodash-es";
|
||||
import { showLoading, hiddenLoading } from "@/utils/loading";
|
||||
import { showMsg } from "@/utils/showMsg";
|
||||
// Element Plus 图标 + 组件
|
||||
import { Refresh, ArrowLeft, Search, ArrowUp } from "@element-plus/icons-vue";
|
||||
// 接口请求
|
||||
import { Search, ArrowUp, Close, Download } from "@element-plus/icons-vue";
|
||||
import apis from "@/api/index";
|
||||
// 子组件
|
||||
import WaterfallFlow from "./waterfallFlow.vue";
|
||||
// import DictTag from "@/components/DictTag/index.vue";
|
||||
// 静态资源 & 工具函数
|
||||
import {
|
||||
DictOption,
|
||||
TaskInfo,
|
||||
WaterfallItem,
|
||||
// MediaType,
|
||||
WaterfallProps,
|
||||
} from "@/typings/work";
|
||||
import defaultImg from "@/assets/images/img-load-err.png";
|
||||
import fallbackCopyToClipboard from "@/utils/copyText";
|
||||
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
|
||||
import { Waterfall } from "vue-waterfall-plugin-next";
|
||||
import "vue-waterfall-plugin-next/dist/style.css";
|
||||
// 引入通用保存工具
|
||||
import { saveFile, FileType } from "@/utils/saveFile";
|
||||
|
||||
enum MediaType {
|
||||
IMAGE = 1, // 纯图片
|
||||
IMAGE_TEXT = 2, // 图文
|
||||
VIDEO = 3, // 视频
|
||||
TEXT = 4, // 纯文字
|
||||
IMAGE = 1,
|
||||
IMAGE_TEXT = 2,
|
||||
VIDEO = 3,
|
||||
TEXT = 4,
|
||||
}
|
||||
|
||||
const waterfallKey = ref(0);
|
||||
// ✅ 自定义响应式断点配置
|
||||
const waterfallBreakpoints = {
|
||||
// 1200: { rowPerView: 4 }, // 宽度 < 1200px：4列
|
||||
// 900: { rowPerView: 3 }, // 宽度 < 900px：3列
|
||||
600: { rowPerView: 2 }, // 宽度 < 600px：2列（平板横屏）
|
||||
320: { rowPerView: 2 }, // 宽度 < 320px：2列（所有手机竖屏）
|
||||
600: { rowPerView: 2 },
|
||||
320: { rowPerView: 2 },
|
||||
};
|
||||
|
||||
const searchForm = ref({
|
||||
title: "",
|
||||
// type: 1, //默认图片
|
||||
});
|
||||
|
||||
const search = async () => {
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
scrollContainer.value.scrollTop = 0;
|
||||
scrollContainer.value?.scrollTo({ top: 0 });
|
||||
await getTaskProductionListLimit();
|
||||
};
|
||||
|
||||
const debouncedSearch = debounce(search, 300);
|
||||
const { WOEKS_LIST_TWO } = apis;
|
||||
// ===================== 1. 路由实例（Vue3 替代 this.$route） =====================
|
||||
const route = useRoute();
|
||||
const taskId = route.params.taskId as string;
|
||||
// 复用枚举：1图片 2图文 3视频 4文字
|
||||
|
||||
// ===================== 2. TS 类型定义 =====================
|
||||
/** 任务基础信息 */
|
||||
|
||||
// ===================== 3. 全局响应式数据 =====================
|
||||
// 字典类型列表
|
||||
const taskTypes = ref<DictOption[]>(
|
||||
JSON.parse(sessionStorage.getItem("task_type") || "[]")
|
||||
);
|
||||
// 任务详情
|
||||
|
||||
const taskInfo = ref<TaskInfo>(
|
||||
JSON.parse(sessionStorage.getItem("currentTask") || "{}")
|
||||
);
|
||||
|
||||
const currentTaskType = computed(() => Number(taskInfo.value.type || 1));
|
||||
|
||||
// 瀑布流列表
|
||||
const list = ref<WaterfallItem[]>([]);
|
||||
// 抽屉显隐
|
||||
const visible = ref(false);
|
||||
// 当前选中的卡片项
|
||||
const currentItem = ref<WaterfallItem | null>(null);
|
||||
|
||||
// 分页 & 加载状态
|
||||
const currentPage = ref(1);
|
||||
const pageSize = computed(() => (isMobile.value ? 20 : 50));
|
||||
const isLoading = ref(false);
|
||||
@@ -252,84 +254,75 @@ const cardDom = computed(
|
||||
() => document.getElementsByClassName("waterfall-item")[0]
|
||||
);
|
||||
const cardDomWidth = computed(() => cardDom.value?.offsetWidth ?? 200);
|
||||
// 计算高度方法
|
||||
|
||||
const calculateHeight = (width: number, height: number) => {
|
||||
// console.log(11111111111111, cardDom, cardDomWidth.value, width, height);
|
||||
// 16*200/9=
|
||||
return (cardDomWidth.value * height) / width || 356;
|
||||
};
|
||||
// 滚动容器 DOM 引用（标注 TS 类型）
|
||||
|
||||
const scrollContainer = ref<HTMLDivElement | null>(null);
|
||||
const showScrollToTop = ref(false);
|
||||
const saving = ref(false);
|
||||
const isFirstLoad = ref(true);
|
||||
|
||||
// ===================== 4. 工具/业务方法 =====================
|
||||
/** 返回上一页 */
|
||||
const goBack = () => {
|
||||
sessionStorage.clear();
|
||||
window.history.go(-1);
|
||||
};
|
||||
|
||||
/** 返回顶部 */
|
||||
const scrollToTop = () => {
|
||||
scrollContainer.value?.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
/** 刷新列表 */
|
||||
|
||||
const refresh = () => {
|
||||
currentPage.value = 1;
|
||||
list.value = [];
|
||||
hasMore.value = true;
|
||||
getTaskProductionListLimit();
|
||||
};
|
||||
/** 图片加载错误兜底 */
|
||||
|
||||
const handleImageError = (e: Event) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = defaultImg;
|
||||
};
|
||||
|
||||
/** 分页加载作品列表（无限滚动核心） */
|
||||
const getTaskProductionListLimit = async () => {
|
||||
// 防重复请求
|
||||
if (isLoading.value || !hasMore.value) return;
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
currentPage.value == 1 && showLoading();
|
||||
const res = await WOEKS_LIST_TWO({
|
||||
// taskId,
|
||||
current: currentPage.value,
|
||||
size: pageSize.value,
|
||||
...searchForm.value,
|
||||
});
|
||||
|
||||
const { records = [] } = res || {};
|
||||
const sizes = [
|
||||
[9, 16],
|
||||
[1, 1],
|
||||
[16, 9],
|
||||
[3, 4],
|
||||
[4, 3],
|
||||
[2, 3],
|
||||
[3, 2],
|
||||
];
|
||||
|
||||
records.forEach((item) => {
|
||||
let sizes = [
|
||||
[9, 16],
|
||||
[1, 1],
|
||||
[16, 9],
|
||||
[3, 4],
|
||||
[4, 3],
|
||||
[2, 3],
|
||||
[3, 2],
|
||||
];
|
||||
if (!item.width || !item.height) {
|
||||
let size = sizes[Math.floor(Math.random() * sizes.length)];
|
||||
const size = sizes[Math.floor(Math.random() * sizes.length)];
|
||||
item.width = size[0];
|
||||
item.height = size[1];
|
||||
}
|
||||
});
|
||||
|
||||
if (currentPage.value == 1) {
|
||||
list.value = records;
|
||||
} else {
|
||||
list.value = list.value.concat(records);
|
||||
}
|
||||
// 判断是否还有更多数据
|
||||
|
||||
hasMore.value = !(records.length < pageSize.value);
|
||||
} catch (error) {
|
||||
console.error("列表加载失败：", error);
|
||||
// 加载失败，页码回退
|
||||
currentPage.value = Math.max(1, currentPage.value - 1);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
@@ -338,206 +331,111 @@ const getTaskProductionListLimit = async () => {
|
||||
}
|
||||
}
|
||||
};
|
||||
const showScrollToTop = ref(false);
|
||||
/** 滚动触底加载 */
|
||||
|
||||
const handleScroll = throttle(() => {
|
||||
const container = scrollContainer.value;
|
||||
if (!container || isLoading.value || !hasMore.value) return;
|
||||
|
||||
const { scrollHeight, scrollTop, clientHeight } = container;
|
||||
// 距离底部 50px 预加载
|
||||
if (scrollTop + clientHeight >= scrollHeight - 50) {
|
||||
currentPage.value++;
|
||||
getTaskProductionListLimit();
|
||||
}
|
||||
if (scrollTop > 1000) {
|
||||
showScrollToTop.value = true;
|
||||
} else {
|
||||
showScrollToTop.value = false;
|
||||
}
|
||||
|
||||
showScrollToTop.value = scrollTop > 1000;
|
||||
}, 100);
|
||||
// 检测师手机端还是pc端,不要宽度判断,用userAgent判断
|
||||
|
||||
const isMobile = computed(() => {
|
||||
return navigator.userAgent.includes("Mobile");
|
||||
});
|
||||
/** 瀑布流卡片点击 */
|
||||
|
||||
const handleCardClick = (item: WaterfallItem) => {
|
||||
// if (isMobile.value) {
|
||||
// } else {
|
||||
visible.value = true;
|
||||
currentItem.value = item;
|
||||
console.log("点击作品：", item);
|
||||
// }
|
||||
};
|
||||
const saving = ref(false);
|
||||
/** 抽屉关闭 */
|
||||
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
// currentItem.value = null;
|
||||
};
|
||||
/**
|
||||
* ✅ 纯前端保存功能（无后端接口）
|
||||
* 支持：图片/视频/纯文字三种类型
|
||||
*/
|
||||
|
||||
const handleCopy = (text: string) => {
|
||||
fallbackCopyToClipboard(text);
|
||||
showMsg("复制成功", "success");
|
||||
};
|
||||
|
||||
// ==================== 简化后的保存方法（调用通用工具） ====================
|
||||
const handleSave = async () => {
|
||||
if (!currentItem.value) {
|
||||
showMsg("请先选择要保存的作品");
|
||||
return;
|
||||
}
|
||||
|
||||
if (saving.value) return; // 防止重复点击
|
||||
if (saving.value) return;
|
||||
saving.value = true;
|
||||
|
||||
try {
|
||||
const item = currentItem.value;
|
||||
// 生成文件名：标题_时间戳.后缀（避免重复）
|
||||
const timestamp = Date.now();
|
||||
// 生成安全的文件名（去除非法字符）
|
||||
const safeTitle =
|
||||
item.title?.replace(/[<>:"/\\|?*]/g, "_") || `work_${item.id}`;
|
||||
|
||||
// 根据作品类型调用通用保存工具
|
||||
switch (currentTaskType.value) {
|
||||
// 图片类型：Canvas转Blob下载（解决跨域问题）
|
||||
case MediaType.IMAGE:
|
||||
await saveFile({
|
||||
type: FileType.IMAGE,
|
||||
url: item.fileUrl,
|
||||
fileName: safeTitle,
|
||||
});
|
||||
break;
|
||||
case MediaType.IMAGE_TEXT:
|
||||
await saveImage(item.fileUrl, `${safeTitle}_${timestamp}.png`);
|
||||
await saveFile({
|
||||
type: FileType.IMAGE,
|
||||
url: item.fileUrl,
|
||||
fileName: safeTitle,
|
||||
});
|
||||
break;
|
||||
|
||||
// 视频类型：Fetch获取Blob下载
|
||||
case MediaType.VIDEO:
|
||||
await saveVideo(item.fileUrl, `${safeTitle}_${timestamp}.mp4`);
|
||||
await saveFile({
|
||||
type: FileType.VIDEO,
|
||||
url: item.fileUrl,
|
||||
fileName: safeTitle,
|
||||
});
|
||||
break;
|
||||
|
||||
// 纯文字类型：生成TXT文件下载
|
||||
case MediaType.TEXT:
|
||||
saveText(item.content, `${safeTitle}_${timestamp}.txt`);
|
||||
await saveFile({
|
||||
type: FileType.TEXT,
|
||||
content: item.content,
|
||||
fileName: safeTitle,
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
showMsg("不支持的文件类型");
|
||||
break;
|
||||
}
|
||||
|
||||
showMsg("保存成功！", "success");
|
||||
handleClose();
|
||||
if (!isMobile.value) {
|
||||
showMsg("保存成功", "success");
|
||||
}
|
||||
// handleClose();
|
||||
} catch (error) {
|
||||
console.error("保存失败：", error);
|
||||
showMsg(error.message || "保存失败，请检查网络连接或稍后重试", "error");
|
||||
showMsg(error.message || "保存失败，请稍后重试", "error");
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存图片（解决跨域问题）
|
||||
* @param url 图片URL
|
||||
* @param fileName 保存的文件名
|
||||
*/
|
||||
const saveImage = (url: string, fileName: string): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous"; // 关键：允许跨域
|
||||
img.onload = () => {
|
||||
try {
|
||||
// 创建Canvas
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
if (!ctx) {
|
||||
reject(new Error("Canvas不支持"));
|
||||
return;
|
||||
}
|
||||
|
||||
// 绘制图片
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// 转Blob并下载
|
||||
canvas.toBlob((blob) => {
|
||||
if (!blob) {
|
||||
reject(new Error("图片转换失败"));
|
||||
return;
|
||||
}
|
||||
downloadBlob(blob, fileName);
|
||||
resolve();
|
||||
}, "image/png");
|
||||
} catch (e) {
|
||||
reject(new Error("图片处理失败，可能是跨域限制"));
|
||||
}
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
reject(new Error("图片加载失败"));
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存视频
|
||||
* @param url 视频URL
|
||||
* @param fileName 保存的文件名
|
||||
*/
|
||||
const saveVideo = async (url: string, fileName: string): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error(`视频加载失败：${response.status}`);
|
||||
}
|
||||
const blob = await response.blob();
|
||||
downloadBlob(blob, fileName);
|
||||
} catch (error) {
|
||||
throw new Error("视频下载失败，可能是文件过大或网络问题");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存纯文字为TXT文件
|
||||
* @param text 文字内容
|
||||
* @param fileName 保存的文件名
|
||||
*/
|
||||
const saveText = (text: string, fileName: string) => {
|
||||
const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
|
||||
downloadBlob(blob, fileName);
|
||||
};
|
||||
|
||||
/**
|
||||
* 通用Blob下载方法
|
||||
* @param blob 要下载的Blob对象
|
||||
* @param fileName 保存的文件名
|
||||
*/
|
||||
const downloadBlob = (blob: Blob, fileName: string) => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = fileName;
|
||||
a.style.display = "none";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url); // 释放内存
|
||||
};
|
||||
/** 复制文案 */
|
||||
const handleCopy = (text: string) => {
|
||||
fallbackCopyToClipboard(text);
|
||||
};
|
||||
// 是否首次加载
|
||||
const isFirstLoad = ref(true);
|
||||
// ===================== 5. 生命周期 =====================
|
||||
/** 组件挂载：初始化所有数据 + 绑定滚动事件 */
|
||||
// ==================== 生命周期 ====================
|
||||
onMounted(async () => {
|
||||
// 纯文字类型，修改每页条数
|
||||
// 重置分页 + 加载第一页
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
await getTaskProductionListLimit();
|
||||
// 绑定滚动事件
|
||||
|
||||
await nextTick();
|
||||
const container = scrollContainer.value;
|
||||
if (container) {
|
||||
container.addEventListener("scroll", handleScroll);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
isFirstLoad.value = false;
|
||||
waterfallKey.value++;
|
||||
@@ -545,7 +443,6 @@ onMounted(async () => {
|
||||
}, 500);
|
||||
});
|
||||
|
||||
/** 组件卸载：解绑滚动事件，防止内存泄漏 */
|
||||
onBeforeUnmount(() => {
|
||||
const container = scrollContainer.value;
|
||||
if (container) {
|
||||
@@ -562,14 +459,11 @@ onBeforeUnmount(() => {
|
||||
.task-production-detail-header {
|
||||
overflow-y: auto;
|
||||
background-color: #0072fed6;
|
||||
// border-bottom: 1px solid #e5e5e5;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
// text-align: center;
|
||||
// background-color: #0072fe;
|
||||
|
||||
> div {
|
||||
max-width: 300px;
|
||||
// max-width: 300px;
|
||||
:deep(.el-input) {
|
||||
// width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -589,13 +483,6 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
width: 100%;
|
||||
@@ -606,22 +493,20 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* Vue3 推荐使用 :deep() 替代 ::v-deep，两种都兼容 */
|
||||
:deep(.el-drawer__title) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
span {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.829);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 0.3s ease;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,632 @@
|
||||
<template>
|
||||
<!-- <div v-if="taskInfo && taskTypes.length"> -->
|
||||
<div class="task-production-detail">
|
||||
<div
|
||||
class="task-production-detail-header flex items-center justify-between"
|
||||
:class="[isMobile ? 'p-2' : 'p-4']"
|
||||
>
|
||||
<p
|
||||
class="text-white font-bold one-ell"
|
||||
:class="[isMobile ? 'mr-1 text-sm' : 'text-2xl ml-4']"
|
||||
>
|
||||
作品集
|
||||
</p>
|
||||
<div class="flex items-center gap-2 bg-[#b3d5ff] rounded-lg flex-1">
|
||||
<el-input
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入作品标题搜索对应作品"
|
||||
clearable
|
||||
@input="debouncedSearch"
|
||||
/>
|
||||
<el-icon
|
||||
@click="search"
|
||||
class="text-[#0074FE] font-bold"
|
||||
:class="[isMobile ? 'mr-2 text-lg' : 'mr-4 ml-2 text-2xl']"
|
||||
><Search
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滚动容器 ref 绑定 -->
|
||||
<div
|
||||
ref="scrollContainer"
|
||||
class="card-scroll-container"
|
||||
:class="[isMobile ? '' : 'px-4']"
|
||||
v-show="list && list.length"
|
||||
>
|
||||
<Waterfall
|
||||
:key="waterfallKey"
|
||||
:list="list"
|
||||
:type="currentTaskType"
|
||||
imgSelector="fileUrl"
|
||||
show-loading
|
||||
lazyload
|
||||
:breakpoints="waterfallBreakpoints"
|
||||
animation-effect="fadeInUp"
|
||||
>
|
||||
<template #default="{ item, url }">
|
||||
<div
|
||||
class="border rounded-md box-shadow-md rounded-xl overflow-hidden transition-all duration-300 card-item"
|
||||
style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)"
|
||||
@click="handleCardClick(item)"
|
||||
>
|
||||
<img
|
||||
:src="url"
|
||||
class="w-full object-cover"
|
||||
loading="lazy"
|
||||
:style="
|
||||
item.width && item.height
|
||||
? {
|
||||
height: calculateHeight(item.width, item.height) + 'px',
|
||||
}
|
||||
: {}
|
||||
"
|
||||
/>
|
||||
<div
|
||||
class="flex gap-2 items-center justify-start"
|
||||
:class="[isMobile ? 'p-2' : 'p-4']"
|
||||
>
|
||||
<el-tag
|
||||
v-for="tag in item.tags.split(',')"
|
||||
:key="tag"
|
||||
size="small"
|
||||
plain
|
||||
round
|
||||
type="info"
|
||||
>{{ tag }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Waterfall>
|
||||
<!-- 加载状态提示 -->
|
||||
<div class="loading-tip">
|
||||
<span v-if="isLoading">加载中...</span>
|
||||
<span v-else-if="!hasMore">没有更多了</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty
|
||||
v-show="!list || !list.length"
|
||||
style="height: calc(100vh - 80px)"
|
||||
description="没有更多了"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
v-if="!isMobile"
|
||||
v-model="visible"
|
||||
:size="500"
|
||||
@close="handleClose"
|
||||
fullscreen
|
||||
title="右键保存图片"
|
||||
>
|
||||
<div v-if="currentItem" class="detail-content">
|
||||
<img
|
||||
v-if="[MediaType.IMAGE, MediaType.IMAGE_TEXT].includes(currentTaskType)"
|
||||
:src="currentItem.fileUrl"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<video
|
||||
v-if="[MediaType.VIDEO].includes(currentTaskType)"
|
||||
:src="currentItem.fileUrl"
|
||||
controls
|
||||
/>
|
||||
<p
|
||||
v-if="[MediaType.IMAGE_TEXT, MediaType.TEXT].includes(currentTaskType)"
|
||||
class="text-md mt-4 align-left"
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
@click.stop="handleCopy(currentItem.content)"
|
||||
class="!p-0"
|
||||
size="small"
|
||||
>
|
||||
复制文案
|
||||
</el-button>
|
||||
{{ currentItem.content }}
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="">右键保存图片</span>
|
||||
<el-button type="info" plain @click="handleClose">关闭</el-button>
|
||||
<!-- <el-button type="primary" @click="handleCopy(currentItem.content)">复制文案</el-button> -->
|
||||
<!-- 保存 -->
|
||||
<!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
|
||||
</template>
|
||||
</el-drawer>
|
||||
<el-dialog
|
||||
v-if="isMobile"
|
||||
v-model="visible"
|
||||
:size="500"
|
||||
@close="handleClose"
|
||||
fullscreen
|
||||
title="长按保存图片"
|
||||
|
||||
>
|
||||
<img
|
||||
:src="currentItem.fileUrl"
|
||||
class="h-[80vh] object-contain rounded-md mx-auto"
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button type="info" plain @click="handleClose">关闭</el-button>
|
||||
<!-- <el-button type="primary" @click="handleCopy(currentItem.content)">复制文案</el-button> -->
|
||||
<!-- 保存 -->
|
||||
<!-- <el-button type="primary" @click="handleSave">保存</el-button> -->
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-button
|
||||
v-show="showScrollToTop"
|
||||
type="primary"
|
||||
@click="scrollToTop"
|
||||
class="fixed bottom-4 right-4 z-10 transition-all duration-300"
|
||||
:icon="ArrowUp"
|
||||
circle
|
||||
></el-button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
computed,
|
||||
} from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { debounce, throttle } from "lodash-es"; // 记得安装lodash-es
|
||||
import { showLoading, hiddenLoading } from "@/utils/loading";
|
||||
import { showMsg } from "@/utils/showMsg";
|
||||
// Element Plus 图标 + 组件
|
||||
import { Refresh, ArrowLeft, Search, ArrowUp } from "@element-plus/icons-vue";
|
||||
// 接口请求
|
||||
import apis from "@/api/index";
|
||||
// 子组件
|
||||
import WaterfallFlow from "./waterfallFlow.vue";
|
||||
// import DictTag from "@/components/DictTag/index.vue";
|
||||
// 静态资源 & 工具函数
|
||||
import {
|
||||
DictOption,
|
||||
TaskInfo,
|
||||
WaterfallItem,
|
||||
// MediaType,
|
||||
WaterfallProps,
|
||||
} from "@/typings/work";
|
||||
import defaultImg from "@/assets/images/img-load-err.png";
|
||||
import fallbackCopyToClipboard from "@/utils/copyText";
|
||||
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
|
||||
import "vue-waterfall-plugin-next/dist/style.css";
|
||||
enum MediaType {
|
||||
IMAGE = 1, // 纯图片
|
||||
IMAGE_TEXT = 2, // 图文
|
||||
VIDEO = 3, // 视频
|
||||
TEXT = 4, // 纯文字
|
||||
}
|
||||
const waterfallKey = ref(0);
|
||||
// ✅ 自定义响应式断点配置
|
||||
const waterfallBreakpoints = {
|
||||
// 1200: { rowPerView: 4 }, // 宽度 < 1200px：4列
|
||||
// 900: { rowPerView: 3 }, // 宽度 < 900px：3列
|
||||
600: { rowPerView: 2 }, // 宽度 < 600px：2列（平板横屏）
|
||||
320: { rowPerView: 2 }, // 宽度 < 320px：2列（所有手机竖屏）
|
||||
};
|
||||
const searchForm = ref({
|
||||
title: "",
|
||||
// type: 1, //默认图片
|
||||
});
|
||||
const search = async () => {
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
scrollContainer.value.scrollTop = 0;
|
||||
await getTaskProductionListLimit();
|
||||
};
|
||||
const debouncedSearch = debounce(search, 300);
|
||||
const { WOEKS_LIST_TWO } = apis;
|
||||
// ===================== 1. 路由实例（Vue3 替代 this.$route） =====================
|
||||
const route = useRoute();
|
||||
const taskId = route.params.taskId as string;
|
||||
// 复用枚举：1图片 2图文 3视频 4文字
|
||||
|
||||
// ===================== 2. TS 类型定义 =====================
|
||||
/** 任务基础信息 */
|
||||
|
||||
// ===================== 3. 全局响应式数据 =====================
|
||||
// 字典类型列表
|
||||
const taskTypes = ref<DictOption[]>(
|
||||
JSON.parse(sessionStorage.getItem("task_type") || "[]")
|
||||
);
|
||||
// 任务详情
|
||||
const taskInfo = ref<TaskInfo>(
|
||||
JSON.parse(sessionStorage.getItem("currentTask") || "{}")
|
||||
);
|
||||
const currentTaskType = computed(() => Number(taskInfo.value.type || 1));
|
||||
|
||||
// 瀑布流列表
|
||||
const list = ref<WaterfallItem[]>([]);
|
||||
// 抽屉显隐
|
||||
const visible = ref(false);
|
||||
// 当前选中的卡片项
|
||||
const currentItem = ref<WaterfallItem | null>(null);
|
||||
|
||||
// 分页 & 加载状态
|
||||
const currentPage = ref(1);
|
||||
const pageSize = computed(() => (isMobile.value ? 20 : 50));
|
||||
const isLoading = ref(false);
|
||||
const hasMore = ref(true);
|
||||
const cardDom = computed(
|
||||
() => document.getElementsByClassName("waterfall-item")[0]
|
||||
);
|
||||
const cardDomWidth = computed(() => cardDom.value?.offsetWidth ?? 200);
|
||||
// 计算高度方法
|
||||
const calculateHeight = (width: number, height: number) => {
|
||||
// console.log(11111111111111, cardDom, cardDomWidth.value, width, height);
|
||||
// 16*200/9=
|
||||
return (cardDomWidth.value * height) / width || 356;
|
||||
};
|
||||
// 滚动容器 DOM 引用（标注 TS 类型）
|
||||
const scrollContainer = ref<HTMLDivElement | null>(null);
|
||||
|
||||
// ===================== 4. 工具/业务方法 =====================
|
||||
/** 返回上一页 */
|
||||
const goBack = () => {
|
||||
sessionStorage.clear();
|
||||
window.history.go(-1);
|
||||
};
|
||||
|
||||
/** 返回顶部 */
|
||||
const scrollToTop = () => {
|
||||
scrollContainer.value?.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
/** 刷新列表 */
|
||||
const refresh = () => {
|
||||
currentPage.value = 1;
|
||||
list.value = [];
|
||||
hasMore.value = true;
|
||||
getTaskProductionListLimit();
|
||||
};
|
||||
/** 图片加载错误兜底 */
|
||||
const handleImageError = (e: Event) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = defaultImg;
|
||||
};
|
||||
|
||||
/** 分页加载作品列表（无限滚动核心） */
|
||||
const getTaskProductionListLimit = async () => {
|
||||
// 防重复请求
|
||||
if (isLoading.value || !hasMore.value) return;
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
currentPage.value == 1 && showLoading();
|
||||
const res = await WOEKS_LIST_TWO({
|
||||
// taskId,
|
||||
current: currentPage.value,
|
||||
size: pageSize.value,
|
||||
...searchForm.value,
|
||||
});
|
||||
|
||||
const { records = [] } = res || {};
|
||||
records.forEach((item) => {
|
||||
let sizes = [
|
||||
[9, 16],
|
||||
[1, 1],
|
||||
[16, 9],
|
||||
[3, 4],
|
||||
[4, 3],
|
||||
[2, 3],
|
||||
[3, 2],
|
||||
];
|
||||
if (!item.width || !item.height) {
|
||||
let size = sizes[Math.floor(Math.random() * sizes.length)];
|
||||
item.width = size[0];
|
||||
item.height = size[1];
|
||||
}
|
||||
});
|
||||
if (currentPage.value == 1) {
|
||||
list.value = records;
|
||||
} else {
|
||||
list.value = list.value.concat(records);
|
||||
}
|
||||
// 判断是否还有更多数据
|
||||
hasMore.value = !(records.length < pageSize.value);
|
||||
} catch (error) {
|
||||
console.error("列表加载失败：", error);
|
||||
// 加载失败，页码回退
|
||||
currentPage.value = Math.max(1, currentPage.value - 1);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
if (currentPage.value == 1 && !isFirstLoad.value) {
|
||||
hiddenLoading();
|
||||
}
|
||||
}
|
||||
};
|
||||
const showScrollToTop = ref(false);
|
||||
/** 滚动触底加载 */
|
||||
const handleScroll = throttle(() => {
|
||||
const container = scrollContainer.value;
|
||||
if (!container || isLoading.value || !hasMore.value) return;
|
||||
|
||||
const { scrollHeight, scrollTop, clientHeight } = container;
|
||||
// 距离底部 50px 预加载
|
||||
if (scrollTop + clientHeight >= scrollHeight - 50) {
|
||||
currentPage.value++;
|
||||
getTaskProductionListLimit();
|
||||
}
|
||||
if (scrollTop > 1000) {
|
||||
showScrollToTop.value = true;
|
||||
} else {
|
||||
showScrollToTop.value = false;
|
||||
}
|
||||
}, 100);
|
||||
// 检测师手机端还是pc端,不要宽度判断,用userAgent判断
|
||||
const isMobile = computed(() => {
|
||||
return navigator.userAgent.includes("Mobile");
|
||||
});
|
||||
/** 瀑布流卡片点击 */
|
||||
const handleCardClick = (item: WaterfallItem) => {
|
||||
// if (isMobile.value) {
|
||||
// } else {
|
||||
visible.value = true;
|
||||
currentItem.value = item;
|
||||
console.log("点击作品：", item);
|
||||
// }
|
||||
};
|
||||
const saving = ref(false);
|
||||
/** 抽屉关闭 */
|
||||
const handleClose = () => {
|
||||
visible.value = false;
|
||||
// currentItem.value = null;
|
||||
};
|
||||
/**
|
||||
* ✅ 纯前端保存功能（无后端接口）
|
||||
* 支持：图片/视频/纯文字三种类型
|
||||
*/
|
||||
const handleSave = async () => {
|
||||
if (!currentItem.value) {
|
||||
showMsg("请先选择要保存的作品");
|
||||
return;
|
||||
}
|
||||
|
||||
if (saving.value) return; // 防止重复点击
|
||||
saving.value = true;
|
||||
|
||||
try {
|
||||
const item = currentItem.value;
|
||||
// 生成文件名：标题_时间戳.后缀（避免重复）
|
||||
const timestamp = Date.now();
|
||||
const safeTitle =
|
||||
item.title?.replace(/[<>:"/\\|?*]/g, "_") || `work_${item.id}`;
|
||||
|
||||
switch (currentTaskType.value) {
|
||||
// 图片类型：Canvas转Blob下载（解决跨域问题）
|
||||
case MediaType.IMAGE:
|
||||
case MediaType.IMAGE_TEXT:
|
||||
await saveImage(item.fileUrl, `${safeTitle}_${timestamp}.png`);
|
||||
break;
|
||||
|
||||
// 视频类型：Fetch获取Blob下载
|
||||
case MediaType.VIDEO:
|
||||
await saveVideo(item.fileUrl, `${safeTitle}_${timestamp}.mp4`);
|
||||
break;
|
||||
|
||||
// 纯文字类型：生成TXT文件下载
|
||||
case MediaType.TEXT:
|
||||
saveText(item.content, `${safeTitle}_${timestamp}.txt`);
|
||||
break;
|
||||
|
||||
default:
|
||||
showMsg("不支持的文件类型");
|
||||
break;
|
||||
}
|
||||
|
||||
showMsg("保存成功！", "success");
|
||||
handleClose();
|
||||
} catch (error) {
|
||||
console.error("保存失败：", error);
|
||||
showMsg(error.message || "保存失败，请检查网络连接或稍后重试", "error");
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存图片（解决跨域问题）
|
||||
* @param url 图片URL
|
||||
* @param fileName 保存的文件名
|
||||
*/
|
||||
const saveImage = (url: string, fileName: string): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous"; // 关键：允许跨域
|
||||
img.onload = () => {
|
||||
try {
|
||||
// 创建Canvas
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
if (!ctx) {
|
||||
reject(new Error("Canvas不支持"));
|
||||
return;
|
||||
}
|
||||
|
||||
// 绘制图片
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// 转Blob并下载
|
||||
canvas.toBlob((blob) => {
|
||||
if (!blob) {
|
||||
reject(new Error("图片转换失败"));
|
||||
return;
|
||||
}
|
||||
downloadBlob(blob, fileName);
|
||||
resolve();
|
||||
}, "image/png");
|
||||
} catch (e) {
|
||||
reject(new Error("图片处理失败，可能是跨域限制"));
|
||||
}
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
reject(new Error("图片加载失败"));
|
||||
};
|
||||
|
||||
img.src = url;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存视频
|
||||
* @param url 视频URL
|
||||
* @param fileName 保存的文件名
|
||||
*/
|
||||
const saveVideo = async (url: string, fileName: string): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
throw new Error(`视频加载失败：${response.status}`);
|
||||
}
|
||||
const blob = await response.blob();
|
||||
downloadBlob(blob, fileName);
|
||||
} catch (error) {
|
||||
throw new Error("视频下载失败，可能是文件过大或网络问题");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 保存纯文字为TXT文件
|
||||
* @param text 文字内容
|
||||
* @param fileName 保存的文件名
|
||||
*/
|
||||
const saveText = (text: string, fileName: string) => {
|
||||
const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
|
||||
downloadBlob(blob, fileName);
|
||||
};
|
||||
|
||||
/**
|
||||
* 通用Blob下载方法
|
||||
* @param blob 要下载的Blob对象
|
||||
* @param fileName 保存的文件名
|
||||
*/
|
||||
const downloadBlob = (blob: Blob, fileName: string) => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = fileName;
|
||||
a.style.display = "none";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url); // 释放内存
|
||||
};
|
||||
/** 复制文案 */
|
||||
const handleCopy = (text: string) => {
|
||||
fallbackCopyToClipboard(text);
|
||||
};
|
||||
// 是否首次加载
|
||||
const isFirstLoad = ref(true);
|
||||
// ===================== 5. 生命周期 =====================
|
||||
/** 组件挂载：初始化所有数据 + 绑定滚动事件 */
|
||||
onMounted(async () => {
|
||||
// 纯文字类型，修改每页条数
|
||||
// 重置分页 + 加载第一页
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
await getTaskProductionListLimit();
|
||||
// 绑定滚动事件
|
||||
await nextTick();
|
||||
const container = scrollContainer.value;
|
||||
if (container) {
|
||||
container.addEventListener("scroll", handleScroll);
|
||||
}
|
||||
setTimeout(() => {
|
||||
isFirstLoad.value = false;
|
||||
waterfallKey.value++;
|
||||
hiddenLoading();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
/** 组件卸载：解绑滚动事件，防止内存泄漏 */
|
||||
onBeforeUnmount(() => {
|
||||
const container = scrollContainer.value;
|
||||
if (container) {
|
||||
container.removeEventListener("scroll", handleScroll);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.task-production-detail {
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
.task-production-detail-header {
|
||||
overflow-y: auto;
|
||||
background-color: #0072fed6;
|
||||
// border-bottom: 1px solid #e5e5e5;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
// text-align: center;
|
||||
// background-color: #0072fe;
|
||||
> div {
|
||||
max-width: 300px;
|
||||
:deep(.el-input) {
|
||||
// width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-scroll-container {
|
||||
max-height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-tip {
|
||||
text-align: center;
|
||||
padding: 0 0 20px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
/* Vue3 推荐使用 :deep() 替代 ::v-deep，两种都兼容 */
|
||||
:deep(.el-drawer__title) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
span {
|
||||
text-align: left;
|
||||
}
|
||||
.card-item {
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.829);
|
||||
}
|
||||
img {
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
import { showMsg } from "@/utils/showMsg";
|
||||
/**
|
||||
* 全环境通用文件保存工具
|
||||
* 支持：PC浏览器、手机浏览器、uniapp webview
|
||||
* 支持文件类型：图片、视频、纯文字
|
||||
*/
|
||||
|
||||
// 文件类型枚举
|
||||
export const FileType = {
|
||||
IMAGE: 'image',
|
||||
VIDEO: 'video',
|
||||
TEXT: 'text'
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否在uniapp webview环境中
|
||||
*/
|
||||
const isUniAppWebview = () => {
|
||||
return typeof uni !== 'undefined'
|
||||
&& typeof uni.downloadFile === 'function'
|
||||
&& typeof uni.saveImageToPhotosAlbum === 'function'
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否是iOS设备
|
||||
*/
|
||||
const isIOS = () => {
|
||||
return /iPhone|iPad|iPod/i.test(navigator.userAgent)
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用保存文件入口（所有环境通用）
|
||||
* @param {Object} options 保存选项
|
||||
* @param {string} options.type 文件类型：FileType.IMAGE / FileType.VIDEO / FileType.TEXT
|
||||
* @param {string} options.url 文件URL（图片/视频必填）
|
||||
* @param {string} options.content 文字内容（文字类型必填）
|
||||
* @param {string} options.fileName 保存的文件名（可选，自动生成）
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export const saveFile = async (options) => {
|
||||
const { type, url, content, fileName } = options
|
||||
|
||||
// 参数校验
|
||||
if (!type) {
|
||||
throw new Error('请指定文件类型')
|
||||
}
|
||||
|
||||
if ((type === FileType.IMAGE || type === FileType.VIDEO) && !url) {
|
||||
throw new Error('请提供文件URL')
|
||||
}
|
||||
|
||||
if (type === FileType.TEXT && !content) {
|
||||
throw new Error('请提供文字内容')
|
||||
}
|
||||
|
||||
// 生成默认文件名
|
||||
const timestamp = Date.now()
|
||||
const defaultFileName = `file_${timestamp}`
|
||||
const finalFileName = fileName || defaultFileName
|
||||
|
||||
// 自动选择保存方式
|
||||
if (isUniAppWebview()) {
|
||||
await saveInUniApp(type, url, content, finalFileName)
|
||||
} else {
|
||||
await saveInBrowser(type, url, content, finalFileName)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* uniapp webview环境保存
|
||||
*/
|
||||
const saveInUniApp = async (type, url, content, fileName) => {
|
||||
switch (type) {
|
||||
case FileType.IMAGE:
|
||||
await uniSaveImage(url)
|
||||
break
|
||||
case FileType.VIDEO:
|
||||
await uniSaveVideo(url)
|
||||
break
|
||||
case FileType.TEXT:
|
||||
// webview无法直接保存文件，降级为复制到剪贴板
|
||||
await uniCopyText(content)
|
||||
break
|
||||
default:
|
||||
throw new Error('不支持的文件类型')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 浏览器环境保存
|
||||
*/
|
||||
const saveInBrowser = async (type, url, content, fileName) => {
|
||||
switch (type) {
|
||||
case FileType.IMAGE:
|
||||
await browserSaveImage(url, fileName)
|
||||
break
|
||||
case FileType.VIDEO:
|
||||
await browserSaveVideo(url, fileName)
|
||||
break
|
||||
case FileType.TEXT:
|
||||
browserSaveText(content, fileName)
|
||||
break
|
||||
default:
|
||||
throw new Error('不支持的文件类型')
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== uniapp保存方法 ====================
|
||||
const uniSaveImage = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
|
||||
uni.downloadFile({
|
||||
url,
|
||||
success: (res) => {
|
||||
if (res.statusCode !== 200) {
|
||||
reject(new Error('图片下载失败'))
|
||||
return
|
||||
}
|
||||
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => resolve(),
|
||||
fail: (err) => {
|
||||
if (err.errMsg.includes('auth')) {
|
||||
reject(new Error('请在设置中开启相册权限后重试'))
|
||||
} else if (err.errMsg.includes('cancel')) {
|
||||
reject(new Error('已取消保存'))
|
||||
} else {
|
||||
reject(new Error('保存图片失败'))
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => reject(new Error('网络请求失败，请检查网络连接')),
|
||||
complete: () => uni.hideLoading()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const uniSaveVideo = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
|
||||
uni.downloadFile({
|
||||
url,
|
||||
success: (res) => {
|
||||
if (res.statusCode !== 200) {
|
||||
reject(new Error('视频下载失败'))
|
||||
return
|
||||
}
|
||||
|
||||
uni.saveVideoToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => resolve(),
|
||||
fail: (err) => {
|
||||
if (err.errMsg.includes('auth')) {
|
||||
reject(new Error('请在设置中开启相册权限后重试'))
|
||||
} else if (err.errMsg.includes('cancel')) {
|
||||
reject(new Error('已取消保存'))
|
||||
} else {
|
||||
reject(new Error('保存视频失败'))
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => reject(new Error('网络请求失败，请检查网络连接')),
|
||||
complete: () => uni.hideLoading()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const uniCopyText = (text) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.setClipboardData({
|
||||
data: text,
|
||||
success: () => {
|
||||
uni.showToast({ title: '文案已复制到剪贴板', icon: 'success' })
|
||||
resolve()
|
||||
},
|
||||
fail: () => reject(new Error('复制失败'))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 浏览器保存方法 ====================
|
||||
const browserSaveImage = (url, fileName) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'anonymous'
|
||||
|
||||
img.onload = () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = img.naturalWidth
|
||||
canvas.height = img.naturalHeight
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
if (!ctx) {
|
||||
// Canvas不支持，降级为打开新标签页
|
||||
openInNewTab(url)
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
ctx.drawImage(img, 0, 0)
|
||||
canvas.toBlob((blob) => {
|
||||
if (!blob) {
|
||||
openInNewTab(url)
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
downloadBlob(blob, `${fileName}.png`)
|
||||
resolve()
|
||||
}, 'image/png')
|
||||
} catch (e) {
|
||||
// 发生错误，降级为打开新标签页
|
||||
openInNewTab(url)
|
||||
resolve()
|
||||
}
|
||||
}
|
||||
|
||||
img.onerror = () => {
|
||||
openInNewTab(url)
|
||||
resolve()
|
||||
}
|
||||
|
||||
img.src = url
|
||||
})
|
||||
}
|
||||
|
||||
const browserSaveVideo = async (url, fileName) => {
|
||||
try {
|
||||
// iOS Safari不支持Blob下载视频，直接打开新标签页
|
||||
if (isIOS()) {
|
||||
openInNewTab(url)
|
||||
return
|
||||
}
|
||||
|
||||
const response = await fetch(url)
|
||||
if (!response.ok) {
|
||||
throw new Error(`视频加载失败：${response.status}`)
|
||||
}
|
||||
const blob = await response.blob()
|
||||
downloadBlob(blob, `${fileName}.mp4`)
|
||||
} catch (error) {
|
||||
// 发生错误，降级为打开新标签页
|
||||
openInNewTab(url)
|
||||
}
|
||||
}
|
||||
|
||||
const browserSaveText = (text, fileName) => {
|
||||
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
|
||||
downloadBlob(blob, `${fileName}.txt`)
|
||||
}
|
||||
|
||||
// ==================== 通用工具方法 ====================
|
||||
const downloadBlob = (blob, fileName) => {
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = fileName
|
||||
a.style.display = 'none'
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
showMsg("保存成功");
|
||||
}
|
||||
|
||||
const openInNewTab = (url) => {
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.target = '_blank'
|
||||
a.rel = 'noopener noreferrer'
|
||||
a.style.display = 'none'
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
|
||||
// 导出默认对象，方便使用
|
||||
export default {
|
||||
saveFile,
|
||||
FileType
|
||||
}
|
||||
Reference in New Issue
Block a user