feat: 生成二维码

src/App.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 
 import './App.scss';
-import { GithubIcon } from './components/GithubIcon';
+import { PersonalInfo } from './components/PersonalInfo';
 import {
     parsePathCustomThemeId,
     parsePathThemeName,
@@ -475,7 +475,7 @@ const App: FC = () => {
         <>
             <h2>{curTheme.title}</h2>
             <p>
-                <GithubIcon />
+                <PersonalInfo />
             </p>
             <h3 className="flex-container flex-center">
                 主题:

src/components/ConfigDialog.module.scss

@@ -1,5 +1,6 @@
 .dialog {
     text-align: left;
+    overflow-y: auto;
 
     &Wrapper {
         z-index: 10;
@@ -15,7 +16,7 @@
         transition: 0.3s;
         padding: 16px;
         display: flex;
-        flex-direction: column;
+        flex-flow: column nowrap !important;
 
         @media screen and (min-width: 1024px) {
             margin: 36px 0;
@@ -49,9 +50,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        cursor: pointer;
 
         &Empty::before {
             content: '+';
+            color: #999;
             font-size: 2em;
         }
 
@@ -92,6 +95,7 @@
         background-color: #f9f9f9;
         font-size: 1.5em;
         color: #999;
+        cursor: pointer;
 
         span {
             transform: rotate(45deg);

src/components/ConfigDialog.tsx

@@ -3,8 +3,10 @@ import style from './ConfigDialog.module.scss';
 import classNames from 'classnames';
 import { Icon, Sound, Theme } from '../themes/interface';
 import { defaultSounds } from '../themes/default';
-import { QRCodeSVG } from 'qrcode.react';
+import { QRCodeCanvas } from 'qrcode.react';
 import Bmob from 'hydrogen-js-sdk';
+import { captureElement } from '../utils';
+import { copy } from 'clipboard';
 
 const STORAGEKEY = 'customTheme';
 let storageTheme: Theme<any>;
@@ -254,7 +256,6 @@ export const ConfigDialog: FC<{
     // 生成二维码和链接
     const onGenQrLinkClick = () => {
         setConfigError('');
-        setGenLink('');
         generateTheme()
             .then((theme) => {
                 const stringify = JSON.stringify(theme);
@@ -274,6 +275,7 @@ export const ConfigDialog: FC<{
             })
             .catch((e) => {
                 setConfigError(e);
+                setGenLink('');
             });
     };
 
@@ -405,7 +407,23 @@ export const ConfigDialog: FC<{
             </div>
 
             <div className="flex-spacer" />
-            {genLink && <textarea value={genLink} />}
+            {genLink && (
+                <div className="flex-container flex-column">
+                    <QRCodeCanvas id="qrCode" value={genLink} size={300} />
+                    <button
+                        onClick={() =>
+                            captureElement('qrCode', customThemeInfo.title)
+                        }
+                        className="primary"
+                    >
+                        下载二维码
+                    </button>
+                    <div>{genLink}</div>
+                    <button onClick={() => copy(genLink)} className="primary">
+                        复制链接
+                    </button>
+                </div>
+            )}
             {configError && <div className={style.error}>{configError}</div>}
             <div className="flex-container">
                 <button className="flex-grow" onClick={onPreviewClick}>

src/components/GithubIcon.tsx

@@ -1,28 +0,0 @@
-import React, { FC } from 'react';
-
-export const GithubIcon: FC = () => {
-    return (
-        <a
-            href="https://github.com/StreakingMan/solvable-sheep-game"
-            target="_blank"
-            rel="noreferrer"
-        >
-            点个✨不迷路 @StreakingMan
-            <svg
-                height="24"
-                aria-hidden="true"
-                viewBox="0 0 16 16"
-                version="1.1"
-                width="24"
-                data-view-component="true"
-                className="octicon octicon-mark-github v-align-middle"
-                fill="currentColor"
-            >
-                <path
-                    fillRule="evenodd"
-                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
-                />
-            </svg>
-        </a>
-    );
-};

src/utils.ts

@@ -31,3 +31,35 @@ export const parsePathCustomThemeId: (url: string) => string = (url) => {
     const params = urlObj.searchParams;
     return params.get('customTheme') || '';
 };
+
+// 截图
+export const captureElement = (id: string, filename: string) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const element = document.getElementById(id);
+    if (!element) return;
+    console.log(element);
+    canvas.width = element.clientWidth;
+    canvas.height = element.clientHeight;
+    console.log(element.clientWidth);
+    // @ts-ignore
+    ctx.drawImage(element, 0, 0, element.clientWidth, element.clientHeight);
+    canvas.toBlob(
+        function (blob) {
+            if (!blob) return;
+            const eleLink = document.createElement('a');
+            eleLink.download = filename;
+            eleLink.style.display = 'none';
+            // 字符内容转变成blob地址
+            eleLink.href = URL.createObjectURL(blob);
+            // 触发点击
+            document.body.appendChild(eleLink);
+            eleLink.click();
+            // 然后移除
+            document.body.removeChild(eleLink);
+        },
+        'image/png',
+        1
+    );
+};