完善功能，模糊图片已带按钮

2024-07-18 23:20:42 +08:00 · 2024-07-18 23:20:42 +08:00 · d7d0a33b8b
parent a8f1c2fef1
commit d7d0a33b8b
12 changed files with 911 additions and 40 deletions
--- a/api/public.js
+++ b/api/public.js
@ -263,3 +263,4 @@ export const handleVerification = async (mobilePhone="",regionCode) => {
    console.error(error);
  }
 };
+
--- a/app/globals.css
+++ b/app/globals.css
@ -187,4 +187,47 @@ body{

 .adm-list-item-content{
  padding: 0;
+}
+.customize-body img{
+  max-height: 90vh;
+  filter: blur(8px);
+}
+.customize-body>div>div{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.customize-body>div>div>div{
+  transform: matrix(1, 0, 0, 1, 0, 0);
+  overflow: hidden;
+  height: max-content;
+  width: max-content;
+  border-radius: 0.25rem;
+}
+/* .customize-body>div>div{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.customize-body>div>div>div{
+  transform: matrix(1, 0, 0, 1, 0, 0);
+  overflow: hidden;
+  height: max-content;
+  width: max-content;
+  border-radius: 0.25rem;
+} */
+.photos-body img{
+  /* max-height: 90vh; */
+  filter: blur(8px);
+}
+.photos-body .adm-image-viewer-control{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.photos-body .adm-image-viewer-image-wrapper{
+  overflow: hidden;
+  height: max-content;
+  width: max-content;
+  border-radius: 0.25rem;
 }
--- a/app/share/[mid]/page.js
+++ b/app/share/[mid]/page.js
@ -85,8 +85,7 @@ export default function ShareSpace({ data }) {
        <Divider />
        <div
          onClick={() => {
-            console.log(webUrl + "/zone/share/" + streamerInfo?.streamer_ext?.user_id)
-              router.push(webUrl + "/zone/share/" + streamerInfo?.streamer_ext?.user_id)
+              router.push("/space/share/" + streamerInfo?.streamer_ext?.user_id)
          }}
          className="flex justify-between pt-4 pb-2"
        >
--- a/app/space/[id]/page.js
+++ b/app/space/[id]/page.js
@ -386,7 +386,7 @@ export default function PersonSpace() {
                        <PostItemSkeleton />
                      </>
                    )}
-                    {!postList.length && (
+                    {!postList.length && !loading && (
                      <div
                        className={`flex flex-col items-center mt-20`}
                        style={{ height: `${scrollHeight}px` }}
--- a/app/space/share/[user_id]/page.jsx
+++ b/app/space/share/[user_id]/page.jsx
@ -0,0 +1,152 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+import QRCode from "qrcode";
+import { Toast,Image } from "antd-mobile";
+import { useRouter,useParams } from "next/navigation";
+import require from "@/utils/require";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleLeft} from "@fortawesome/free-solid-svg-icons";
+import {saveImage} from "@/utils/tools/handleFuns";
+import clipboard from "copy-to-clipboard";
+export default function Share() {
+  //获取页面数据、生成二维码
+  const [data, setData] = useState({});
+  const [qrcodeUrl, setQrcodeUrl] = useState("");
+  const [isFetching, setIsFetching] = useState(true);
+  const router = useRouter();
+  const {user_id} = useParams();
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const data = await require("POST", "/api/streamer/list_ext_by_user_id", {
+          body:{user_id: parseInt(user_id, 10),},
+        });
+        if (data.ret === -1) {
+          Toast.show({
+            content: data.msg,
+          });
+          return;
+        }
+        setData(data.data.streamer_ext);
+        QRCode.toDataURL(
+          `https://tiefen.fun/zone/${user_id}`,
+          function (err, url) {
+            setQrcodeUrl(url);
+          }
+        );
+        setIsFetching(false);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    getData();
+  }, []);
+
+  //分享海报组件
+  const Poster = () => {
+    return (
+      <div className="flex flex-col">
+        <div id="print" className="flex flex-col overflow-hidden bg-[#07050A]">
+          <div className="flex w-full justify-center items-center aspect-square overflow-hidden mb-4">
+            <img
+              className="w-full"
+              src={data?.cover?.images[0].urls[0]}
+              alt=""
+            />
+          </div>
+          <div className="flex flex-row items-center w-full p-2 bg-[#07050A]">
+            <div className="flex flex-col justify-around items-start shrink min-w-0">
+              <div className="flex flex-row items-center w-full">
+                <div className="flex items-center justify-center shrink-0 rounded-full overflow-hidden aspect-square w-12 border border-white">
+                  <img
+                    className="w-full"
+                    src={data?.avatar?.images[0].urls[0]}
+                    alt=""
+                  />
+                </div>
+                <div className="flex flex-col ml-2 shrink min-w-0">
+                  <p className="font-medium text-base text-white truncate">
+                    {data?.name}
+                  </p>
+                  <div className="flex justify-start flex-1">
+                    <div className="flex flex-row items-center py-0.5 px-2 bg-[#FFFFFF1A] rounded-full">
+                      <p className="text-xs text-white font-medium">ID</p>
+                      <p className="text-white text-xs font-medium ml-0.5">
+                        {data?.user_id}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-col px-2 py-1 mt-2 bg-[#FF61B030] rounded-full justify-center">
+                <p className="text-xs text-[#FF669E] rounded-full text-center">
+                  邀您加入我的
+                  <span className="text-xs text-[#FF669E] font-semibold">
+                    「铁粉空间」
+                  </span>
+                </p>
+              </div>
+            </div>
+            <div className="h-20 aspect-square ml-auto overflow-hidden rounded shrink-0">
+              <img className="object-cover scale-110 w-full" src={qrcodeUrl} />
+            </div>
+          </div>
+        </div>
+        <button
+          onClick={()=>saveImage("print")}
+          className="btn btn-md bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-base font-medium w-full mt-4"
+        >
+          保存图片
+        </button>
+        <button
+          onClick={copyUrl}
+          className="btn btn-md bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-base font-medium w-full mt-4"
+        >
+          复制链接
+        </button>
+      </div>
+    );
+  };
+
+  //复制链接
+  const copyUrl = () => {
+    clipboard(`https://tiefen.fun/zone/${user_id}`);
+    Toast.show({
+      icon: "success",
+      content: "已复制到剪贴板",
+      position: "top",
+    });
+  };
+
+  if (isFetching) {
+    return (
+      <section className="flex flex-1 justify-center container">
+        <span className="absolute top-1/2 loading loading-spinner loading-lg"></span>
+      </section>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center p-4 fixed top-0 z-10 w-full">
+        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full">
+          <FontAwesomeIcon
+            icon={faAngleLeft}
+            size="xl"
+            onClick={() => {
+              router.back();
+            }}
+          />
+        </div>
+      </div>
+      {/* 内容 */}
+      <section className="mt-20 flex flex-1 flex-col items-center justify-center container">
+      <div className="w-4/5">
+        <Poster />
+      </div>
+    </section>
+    </div>
+  );
+}
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@ -1,10 +1,11 @@
 "use client";

-import React, { useEffect, useRef, useState } from "react";
-import { Image, ImageViewer, Dialog, Swiper } from "antd-mobile";
+import React, { createElement, useEffect, useRef, useState } from "react";
+import { Image, ImageViewer, Dialog, Toast } from "antd-mobile";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleUp, faClose, faSave } from "@fortawesome/free-solid-svg-icons";
-
+import { saveFile } from "@/utils/tools/handleFuns";
+import { useRouter } from "next/navigation";
 const tabItems = [
  { key: "commend", title: "推荐" },
  { key: "follow", title: "关注" },
@ -14,6 +15,7 @@ export default function Photos({ isUnlocked, mediaAmount, media }) {
  const [seeAllPhotos, setSeeAllPhotos] = useState(false);
  const [currentPhotos, setCurrentPhotos] = useState([]);
  const [photos, setPhotos] = useState([]);
+  const router = useRouter();
  useEffect(() => {
    if (media) {
      let imgArr = media.images.map((item) => ({
@ -46,9 +48,23 @@ export default function Photos({ isUnlocked, mediaAmount, media }) {
    }
  }, [media]);
  const showPhotos = (photos, index) => {
+    const mediaDom = document.createElement("div");
+    document.body.appendChild(mediaDom);
+    mediaDom.className = `${photos[index]?.type == "hid" ? "photos-body" : ""}`;
    ImageViewer.Multi.show({
      images: photos.map((item) => item?.url),
      defaultIndex: index,
+      renderFooter: (image, index) =>
+        renderFooter(photos[index]?.type == "hid", mediaDom),
+      getContainer: mediaDom,
+      onIndexChange: (index) => {
+        mediaDom.className = `${
+          photos[index]?.type == "hid" ? "photos-body" : ""
+        }`;
+      },
+      afterClose: () => {
+        mediaDom.remove();
+      },
    });
  };
  const handleShowVideo = (video) => {
@ -82,7 +98,7 @@ export default function Photos({ isUnlocked, mediaAmount, media }) {
          <div
            className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
            key="closeBtn"
-            // onClick={handleSeeAllPhotos}
+            onClick={() => saveFile(video.mp4)}
          >
            <FontAwesomeIcon icon={faSave} size="2xl" />
          </div>
@ -110,6 +126,21 @@ export default function Photos({ isUnlocked, mediaAmount, media }) {
      }
    });
  };
+  const renderFooter = (hidden, fatherDom) => {
+    return hidden ? (
+      <div className="flex justify-center">
+        <div
+          className="rounded-full bg-[#131313d4] -mt-[50vh] h-max w-max px-4 py-2 text-primary"
+          onClick={() => {
+            fatherDom && fatherDom.remove();
+            router.push("/pay");
+          }}
+        >
+          此内容暂未解锁，立即解锁
+        </div>
+      </div>
+    ) : null;
+  };
  return (
    <>
      <div
@ -121,10 +152,28 @@ export default function Photos({ isUnlocked, mediaAmount, media }) {
          return (
            <div
              className="relative"
-              style={{maxWidth:"calc(100vw - 72px)"}}
+              style={{ maxWidth: "calc(100vw - 72px)" }}
              key={index}
              onClick={() => {
                if (item?.type == "video") {
+                  if (!isUnlocked) {
+                    const mediaDom = document.createElement("div");
+                    document.body.appendChild(mediaDom);
+                    ImageViewer.show({
+                      image: item.url,
+                      maxZoom: 8,
+                      classNames: { body: "customize-body" },
+                      getContainer:mediaDom,
+                      renderFooter: () => renderFooter(true,mediaDom),
+                    });
+
+                    // Toast.show({
+                    //   icon: "fail",
+                    //   content: "此视频未解锁，无法观看",
+                    //   position: "top",
+                    // });
+                    return;
+                  }
                  handleShowVideo(item);
                } else {
                  showPhotos(photos, index);
@ -132,7 +181,7 @@ export default function Photos({ isUnlocked, mediaAmount, media }) {
              }}
            >
              {
-                <div className="overflow-hidden rounded h-full">
+                <div className="overflow-hidden rounded h-full min-h-40">
                  <Image
                    // lazy={true}
                    placeholder={
@ -141,7 +190,10 @@ export default function Photos({ isUnlocked, mediaAmount, media }) {
                    width={currentPhotos.length > 1 ? "24vw" : "100%"}
                    height={currentPhotos.length > 1 ? "24vw" : "auto"}
                    className={`rounded max-w-full ${
-                      item?.type == "hid" ? "imageBlur" : ""
+                      item?.type == "hid" ||
+                      (item?.type == "video" && !isUnlocked)
+                        ? "imageBlur"
+                        : ""
                    }`}
                    fit="cover"
                    src={item?.url}
--- a/components/PostItem/index.js
+++ b/components/PostItem/index.js
@ -71,8 +71,9 @@ export default function PostItem({
        <Image src="/images/top_post.png" width={76} className="mb-2" />
      )}
      <div className="flex">
-        <img
+        <Image
          className="flex-none w-8 h-8 rounded-full mr-2"
+          fit="cover"
          src={data.streamer_ext?.avatar.images[0].urls[0]}
          alt=""
          onClick={() => router.push("/profile/" + data.mid)}
@ -99,10 +100,9 @@ export default function PostItem({
                  }}
                  className={`mb-2 mt-2 ${!isOpenText ? "text-ellipsis" : ""}`}
                  style={{
-                    WebkitLineClamp:7,
+                    WebkitLineClamp: 7,
                  }}
                ></pre>
-                
              </>
            ) : (
              <div>
@ -112,17 +112,19 @@ export default function PostItem({
                    __html: findLinksInText(data.text),
                  }}
                ></pre>
-                
              </div>
            )}
-            {!(!data?.is_zone_moment_unlocked && data?.text_visible_range < 999) && data.text?.length > 140 && (
-                  <div
-                    className="font-bold text-btn my-4 text-base"
-                    onClick={() => setIsOpenText(!isOpenText)}
-                  >
-                    {isOpenText ? "收起" : "全文"}
-                  </div>
-                )}
+            {!(
+              !data?.is_zone_moment_unlocked && data?.text_visible_range < 999
+            ) &&
+              data.text?.length > 140 && (
+                <div
+                  className="font-bold text-btn my-4 text-base"
+                  onClick={() => setIsOpenText(!isOpenText)}
+                >
+                  {isOpenText ? "收起" : "全文"}
+                </div>
+              )}
          </div>
          <div className="mr-8">
            {data.media_component && (
@ -197,7 +199,15 @@ export default function PostItem({
                      }`
                    : date.getMonth() + 1 + "月" + date.getDate() + "日"}
                </span>
-                <span>{date.getHours() + ":" + date.getMinutes()}</span>
+                <span>
+                  {(date.getHours() > 9
+                    ? date.getHours()
+                    : "0" + date.getHours()) +
+                    ":" +
+                    (date.getMinutes() > 9
+                      ? date.getMinutes()
+                      : "0" + date.getMinutes())}
+                </span>
              </div>
            )}
            <div className="flex items-center">
--- a/package-lock.json
+++ b/package-lock.json
@ -16,8 +16,10 @@
        "cookies-next": "^4.0.0",
        "copy-to-clipboard": "^3.3.3",
        "crypto-js": "^4.2.0",
+        "html2canvas": "^1.0.0-alpha.12",
        "jsencrypt": "^3.3.2",
        "next": "14.0.2",
+        "qrcode": "^1.5.3",
        "react": "^18",
        "react-dom": "^18",
        "react-redux": "^9.1.2",
@ -670,6 +672,14 @@
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "dev": true
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha512-437oANT9tP582zZMwSvZGy2nmSeAb8DW2me3y+Uv1Wp2Rulr8Mqlyrv3E7MLxmsiaPSMMDmiDVzgE+e8zlMx9g==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/binary-extensions": {
      "version": "2.3.0",
      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
@ -744,6 +754,14 @@
        "node": ">=10.16.0"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/camelcase-css": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz",
@ -816,6 +834,80 @@
      "resolved": "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz",
      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/clone-deep": {
      "version": "4.0.1",
      "resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz",
@ -834,7 +926,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
      "dependencies": {
        "color-name": "~1.1.4"
      },
@ -845,8 +936,7 @@
    "node_modules/color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
    "node_modules/commander": {
      "version": "4.1.1",
@ -915,6 +1005,14 @@
      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
    },
+    "node_modules/css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha512-Y/Us0vILnzQj21UxqoZTLaHGrePQKXcZygQIoxNmpII06LJVCgB2sFKmD7PItNDHIAqHWjrmJPVohIywWYKAmQ==",
+      "dependencies": {
+        "base64-arraybuffer": "^0.1.5"
+      }
+    },
    "node_modules/css-selector-tokenizer": {
      "version": "0.8.0",
      "resolved": "https://registry.npmmirror.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@ -970,6 +1068,14 @@
      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/deepmerge": {
      "version": "4.3.1",
      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz",
@ -984,6 +1090,11 @@
      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
      "dev": true
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
    "node_modules/dlv": {
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
@ -1008,6 +1119,11 @@
      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
      "dev": true
    },
+    "node_modules/encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
    "node_modules/errno": {
      "version": "0.1.8",
      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
@ -1085,6 +1201,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/foreground-child": {
      "version": "3.2.1",
      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.2.1.tgz",
@ -1136,6 +1264,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
    "node_modules/glob": {
      "version": "10.4.2",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-10.4.2.tgz",
@ -1193,6 +1329,17 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/html2canvas": {
+      "version": "1.0.0-alpha.12",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
+      "integrity": "sha512-+mr9jumxMQO9ZZwf7nUp3tonOIaI6tAAV0yciDMuX0tetV4wz/lFc2AxAYndxANe7/O67DKLgDLjT+ZcVUSQrw==",
+      "dependencies": {
+        "css-line-break": "1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.6.3",
      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
@ -1278,7 +1425,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -1456,6 +1602,17 @@
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
      "dev": true
    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
@ -1744,6 +1901,39 @@
        "node": ">= 6"
      }
    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/package-json-from-dist": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
@ -1760,6 +1950,14 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz",
@ -1825,6 +2023,14 @@
        "node": ">= 6"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.4.38",
      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz",
@ -1997,6 +2203,23 @@
      "optional": true,
      "peer": true
    },
+    "node_modules/qrcode": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.3.tgz",
+      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -2140,6 +2363,19 @@
      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
    "node_modules/reselect": {
      "version": "5.1.1",
      "resolved": "https://registry.npmmirror.com/reselect/-/reselect-5.1.1.tgz",
@ -2267,6 +2503,11 @@
        "semver": "bin/semver"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
    "node_modules/shallow-clone": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-3.0.1.tgz",
@ -2655,6 +2896,11 @@
        "node": ">= 8"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
    "node_modules/wrap-ansi": {
      "version": "8.1.0",
      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@ -2746,6 +2992,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
    "node_modules/yaml": {
      "version": "2.4.5",
      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.4.5.tgz",
@ -2757,6 +3008,76 @@
      "engines": {
        "node": ">= 14"
      }
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
    }
  },
  "dependencies": {
@ -3185,6 +3506,11 @@
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "dev": true
    },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha512-437oANT9tP582zZMwSvZGy2nmSeAb8DW2me3y+Uv1Wp2Rulr8Mqlyrv3E7MLxmsiaPSMMDmiDVzgE+e8zlMx9g=="
+    },
    "binary-extensions": {
      "version": "2.3.0",
      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
@ -3227,6 +3553,11 @@
        "streamsearch": "^1.1.0"
      }
    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+    },
    "camelcase-css": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz",
@ -3273,6 +3604,64 @@
      "resolved": "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz",
      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
    },
+    "cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "string-width": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        }
+      }
+    },
    "clone-deep": {
      "version": "4.0.1",
      "resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz",
@ -3288,7 +3677,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
      "requires": {
        "color-name": "~1.1.4"
      }
@ -3296,8 +3684,7 @@
    "color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
    "commander": {
      "version": "4.1.1",
@ -3354,6 +3741,14 @@
      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
    },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha512-Y/Us0vILnzQj21UxqoZTLaHGrePQKXcZygQIoxNmpII06LJVCgB2sFKmD7PItNDHIAqHWjrmJPVohIywWYKAmQ==",
+      "requires": {
+        "base64-arraybuffer": "^0.1.5"
+      }
+    },
    "css-selector-tokenizer": {
      "version": "0.8.0",
      "resolved": "https://registry.npmmirror.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@ -3393,6 +3788,11 @@
      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+    },
    "deepmerge": {
      "version": "4.3.1",
      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz",
@ -3404,6 +3804,11 @@
      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
      "dev": true
    },
+    "dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
    "dlv": {
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
@ -3428,6 +3833,11 @@
      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
      "dev": true
    },
+    "encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
    "errno": {
      "version": "0.1.8",
      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
@ -3492,6 +3902,15 @@
        "to-regex-range": "^5.0.1"
      }
    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
    "foreground-child": {
      "version": "3.2.1",
      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.2.1.tgz",
@ -3520,6 +3939,11 @@
      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
      "dev": true
    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
    "glob": {
      "version": "10.4.2",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-10.4.2.tgz",
@ -3562,6 +3986,14 @@
        "function-bind": "^1.1.2"
      }
    },
+    "html2canvas": {
+      "version": "1.0.0-alpha.12",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
+      "integrity": "sha512-+mr9jumxMQO9ZZwf7nUp3tonOIaI6tAAV0yciDMuX0tetV4wz/lFc2AxAYndxANe7/O67DKLgDLjT+ZcVUSQrw==",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
    "iconv-lite": {
      "version": "0.6.3",
      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
@ -3621,8 +4053,7 @@
    "is-fullwidth-code-point": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
    },
    "is-glob": {
      "version": "4.0.3",
@ -3741,6 +4172,14 @@
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
      "dev": true
    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
@ -3926,6 +4365,27 @@
      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
      "dev": true
    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+    },
    "package-json-from-dist": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
@ -3939,6 +4399,11 @@
      "dev": true,
      "peer": true
    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+    },
    "path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz",
@ -3983,6 +4448,11 @@
      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
      "dev": true
    },
+    "pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+    },
    "postcss": {
      "version": "8.4.38",
      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz",
@ -4082,6 +4552,17 @@
      "optional": true,
      "peer": true
    },
+    "qrcode": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.3.tgz",
+      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "requires": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      }
+    },
    "queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -4176,6 +4657,16 @@
      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
    "reselect": {
      "version": "5.1.1",
      "resolved": "https://registry.npmmirror.com/reselect/-/reselect-5.1.1.tgz",
@ -4264,6 +4755,11 @@
      "optional": true,
      "peer": true
    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
    "shallow-clone": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-3.0.1.tgz",
@ -4530,6 +5026,11 @@
        "isexe": "^2.0.0"
      }
    },
+    "which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
    "wrap-ansi": {
      "version": "8.1.0",
      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@ -4595,11 +5096,73 @@
        }
      }
    },
+    "y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
    "yaml": {
      "version": "2.4.5",
      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.4.5.tgz",
      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
      "dev": true
+    },
+    "yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "string-width": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -17,8 +17,10 @@
    "cookies-next": "^4.0.0",
    "copy-to-clipboard": "^3.3.3",
    "crypto-js": "^4.2.0",
+    "html2canvas": "^1.0.0-alpha.12",
    "jsencrypt": "^3.3.2",
    "next": "14.0.2",
+    "qrcode": "^1.5.3",
    "react": "^18",
    "react-dom": "^18",
    "react-redux": "^9.1.2",
--- a/questions.text
+++ b/questions.text
@ -10,9 +10,9 @@
 9。

 待修复的问题：
-1. 空间内没加视频封面是否模糊的判断 (>>>靠后)
-2. 空间内多张图片的付费贴，需要根据可预览图片数字段展示可见图片，并模糊剩余图片 (>>>靠后)
-11. 空间内生成分享卡片页面需要在现有项目里面写 (>>>靠后)
+1. 空间内没加视频封面是否模糊的判断 (完成)
+2. 空间内多张图片的付费贴，需要根据可预览图片数字段展示可见图片，并模糊剩余图片 (完成)
+11. 空间内生成分享卡片页面需要在现有项目里面写 (完成)
 12. 退出空间的弹窗样式错误，确认按钮应该是灰色并且放在左边 (完成)
 13. 空间设置中，创建时间字段放错了，放成id了 (完成)
 14. 空间tab为空的时候，不需要有“查看推荐”这个按钮 (完成)
@ -20,14 +20,14 @@
 16. 需要支持保存图片和视频，只有会员可以保存 (>>>靠后)
 17. 搜索页面，进入空间应该先到空间介绍页，然后判断是否解锁，如果解锁就重定向到空间内 (完成)
 18. 加微信组件中/api/vas/query_wechat这个接口应该在确认用户已经解锁微信了才去调用 (完成)
-19. 主播主页，空间动态的预览图，应该根据是否已经解锁空间来决定是否模糊，以及跳转空间介绍页还是空间内 (>>>靠后)
+19. 主播主页，空间动态的预览图，应该根据是否已经解锁空间来决定是否模糊，以及跳转空间介绍页还是空间内 (完成)(待验证!!!)
 20. 修改密码页面，显示未获取到手机号请重新登录 (完成)(待验证!!!)
-21. 意见反馈页面没完善 (>>>靠后)
+21. 意见反馈页面没完善 (完成)(待验证!!!)
 22. 关于我们页面没完善 (完成)
 23. 账号注销页面没完善、页面改成“账号注销” (完成)(待验证!!!)
 24. 登录页面底部用户协议部分文案改成“我已阅读并同意《用户协议》、《隐私政策》” (完成)
 25. 登录页面顶部加头图：和tiefen_space_web项目相同 (完成)
-26. 登录页面和修改密码页面输入框的placeholder文本颜色不统一 (疑惑🤔)
+26. 登录页面和修改密码页面输入框的placeholder文本颜色不统一 (完成)
 27. 登录页面缺少了忘记密码页面 (完成)
 28. 缺少支付相关页面
 29. 空间卡片，“付费”标签出现两次，同时缺少“创建者”标签，这两个标签需要横向排列 (完成)
--- a/utils/auth.js
+++ b/utils/auth.js
@ -1,5 +1,6 @@
 import { setCookie, deleteCookie, getCookie } from "cookies-next";
 import require from "./require";
+import {get} from "./storeInfo"
 export async function checkAuth() {
  try {
    const data = await require("POST", `/api/login/validate`);
@ -21,3 +22,10 @@ export function signOut() {
  deleteCookie("token");
  deleteCookie("mid");
 }
+
+export function checkRole(){
+  const account =  get("account");
+  const role = account.role;
+  const isVip = account.is_a_member;
+  return (role !== 0 || isVip === 1);
+};
--- a/utils/tools/handleFuns.js
+++ b/utils/tools/handleFuns.js
@ -1,7 +1,8 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose, faSave } from "@fortawesome/free-solid-svg-icons";
-import { Dialog } from "antd-mobile";
-
+import { Dialog,Toast } from "antd-mobile";
+import html2canvas from "html2canvas";
+import {checkRole} from "../auth"
 export const handleShowVideos = (video) => {
  Dialog.className = "videoMask";
  Dialog.show({
@ -45,3 +46,43 @@ export const handleShowVideos = (video) => {
    },
  });
 };
+
+//保存div内容为图片
+export const saveImage = async (divId) => {
+  const div = document.getElementById(divId);
+  html2canvas(div, { useCORS: true }).then(function (canvas) {
+    // 创建一个图片元素
+    var img = canvas.toDataURL("image/jpg");
+    // 创建一个链接元素
+    var link = document.createElement("a");
+    link.href = img;
+    // 设置下载的文件名
+    link.download = "SAVE_IMAGE.jpg";
+    // 触发点击
+    link.click();
+  });
+};
+//保存图片
+export const saveFile = async (href) => {
+  const isVip = checkRole();
+  if (!isVip) {
+    setIsVipModalVisible(true);
+    Toast.show({
+      icon: "fail",
+      content: "仅会员支持下载",
+      position: "top",
+    });
+    return;
+  }
+  var link = document.createElement("a");
+  link.href = href;
+  link.target = "_blank";
+  // 设置下载的文件名
+  link.download = "newfile.mp4";
+  // 触发点击
+  // link.click();
+  link.style.display = "none"; // 设置为隐藏元素
+  document.body.appendChild(link);
+  link.click(); // 模拟点击以开始下载
+  document.body.removeChild(link); // 下载后移除元素
+};