feat: add qrcode in share dialog (#964)

* feat: add qrcode in share dialog

* update: change the color

* update: import order

web/package.json

@@ -17,6 +17,7 @@
     "highlight.js": "^11.6.0",
     "i18next": "^21.9.2",
     "lodash-es": "^4.17.21",
+    "qrcode.react": "^3.1.0",
     "qs": "^6.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

web/src/components/ShareMemoDialog.tsx

@@ -1,4 +1,5 @@
 import { Select, Option } from "@mui/joy";
+import { QRCodeSVG } from "qrcode.react";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import copy from "copy-to-clipboard";
@@ -69,7 +70,6 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
     if (!memoElRef.current) {
       return;
     }
-
     toImage(memoElRef.current, {
       pixelRatio: window.devicePixelRatio * 2,
     })
@@ -138,13 +138,23 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
             <MemoResources resourceList={memo.resourceList} />
           </div>
           <div className="watermark-container">
+            <div className="logo-container">
+              <img className="logo-img" src="/logo.png" alt="" />
+            </div>
             <div className="userinfo-container">
               <span className="name-text">{user.nickname || user.username}</span>
               <span className="usage-text">
                 {state.memoAmount} MEMOS / {createdDays} DAYS
               </span>
             </div>
-            <img className="logo-img" src="/logo.png" alt="" />
+            <QRCodeSVG
+              value={`${window.location.origin}/m/${memo.id}`}
+              size={64}
+              bgColor={"#F3F4F6"}
+              fgColor={"#4B5563"}
+              level={"L"}
+              includeMargin={false}
+            />
           </div>
         </div>
         <div className="px-4 py-3 w-full flex flex-row justify-between items-center">

web/src/less/share-memo-dialog.less

@@ -70,8 +70,12 @@
             }
           }
 
-          > .logo-img {
-            @apply h-10 shrink-0 w-auto;
+          > .logo-container{
+            @apply mr-2;
+
+            > .logo-img {
+              @apply h-10 shrink-0 w-auto;
+            }
           }
         }
       }

web/yarn.lock

@@ -3795,6 +3795,11 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.2.0.tgz#2092cc57cd2582c38e4e7e8bb869dc8d3148bc74"
   integrity sha512-LN6QV1IJ9ZhxWTNdktaPClrNfp8xdSAYS0Zk2ddX7XsXZAxckMHPCBcHRo0cTcEIgYPRiGEkmji3Idkh2yFtYw==
 
+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
 qs@^6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"