feat: 保存

src/components/showCase.vue

@@ -5,7 +5,45 @@
       <iframe ref="iframeRef" frameborder="0" :src="iframeURL"></iframe>
     </div>
     <div class="show-case" v-if="isVideo">
-      <video :src="video" autoplay playsinline></video>
+      <video
+        ref="videoRef"
+        :src="video"
+        autoplay
+        playsinline
+        @ended="isVideoPlaying = false"
+        @playing="isVideoPlaying = true"
+        @pause="isVideoPlaying = false"
+      ></video>
+      <div class="video-icon">
+        <svg
+          class="play-icon icon"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 1024 1024"
+          @click="videoRef.play()"
+          v-if="!isVideoPlaying"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm144.1 454.9L437.7 677.8a8.02 8.02 0 0 1-12.7-6.5V353.7a8 8 0 0 1 12.7-6.5L656.1 506a7.9 7.9 0 0 1 0 12.9z"
+            fill="currentColor"
+          ></path>
+        </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 28 28"
+          v-if="isVideoPlaying"
+          class="stop-icon icon"
+          @click="videoRef.pause()"
+        >
+          <g fill="none">
+            <path
+              d="M14 26c6.627 0 12-5.373 12-12S20.627 2 14 2S2 7.373 2 14s5.373 12 12 12zM10.5 9h7a1.5 1.5 0 0 1 1.5 1.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 9 17.5v-7A1.5 1.5 0 0 1 10.5 9z"
+              fill="currentColor"
+            ></path>
+          </g>
+        </svg>
+      </div>
     </div>
     <div class="show-case" v-if="isGallery">
       <n-carousel
@@ -85,10 +123,12 @@ const iframeRef = ref();
 const containerRef = ref();
 const type = ref("model");
 const defaultType = ref(["model", "video", "audio", "gallery"]);
+const videoRef = ref();
 
 // const iframeURL = ref("https://www.4dmodel.com/SuperTwo/index.html?m=TEST");
-const iframeURL = ref("https://model3d.4dage.com/model/showModel.html?m=d558c919-a001-4aef-a719-18af4ed2bd82");
-
+const iframeURL = ref(
+  "https://model3d.4dage.com/model/showModel.html?m=d558c919-a001-4aef-a719-18af4ed2bd82"
+);
 
 const isModel = computed(() => type.value === "model");
 const isVideo = computed(() => type.value === "video");
@@ -99,6 +139,8 @@ const audioSound = ref("");
 const currentSlideIndex = ref(1);
 const { isFullscreen, enter, exit, toggle } = useFullscreen(containerRef);
 
+const isVideoPlaying = ref(false);
+
 defineOptions({
   name: "show-case",
 });
@@ -225,6 +267,27 @@ const handleExitFullScreen = () => {
         }
       }
     }
+    .video-icon {
+      width: 100%;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      opacity: 0;
+      &:hover {
+        opacity: 1;
+      }
+      top: 0;
+      left: 0;
+      svg {
+        width: 80px;
+        height: 80px;
+        color: #907a6b;
+        pointer-events: auto;
+        cursor: pointer;
+      }
+    }
   }
 
   .tools {