add:新增保存功能

src/views/detail.vue

@@ -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;
     }
   }
 }