From f36c99b3858a2913b4383ba4dd58d144405f79ac Mon Sep 17 00:00:00 2001 From: streakingman Date: Sun, 25 Sep 2022 04:19:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=9F=E6=88=90=E4=BA=8C=E7=BB=B4?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/App.tsx | 4 +-- src/components/ConfigDialog.module.scss | 6 +++- src/components/ConfigDialog.tsx | 24 +++++++++++-- src/components/GithubIcon.tsx | 28 --------------- src/components/PersonalInfo.tsx | 46 +++++++++++++++++++++++++ src/utils.ts | 32 +++++++++++++++++ yarn.lock | 31 +++++++++++++++++ 8 files changed, 138 insertions(+), 34 deletions(-) delete mode 100644 src/components/GithubIcon.tsx create mode 100644 src/components/PersonalInfo.tsx diff --git a/package.json b/package.json index abd011c..8692066 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "classnames": "^2.3.2", + "clipboard": "^2.0.11", "hydrogen-js-sdk": "^2.3.10", "qrcode.react": "^3.1.0", "react": "^18.2.0", diff --git a/src/App.tsx b/src/App.tsx index 65b5c6c..cd79b5c 100644 --- a/src/App.tsx +++ b/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 = () => { <>

{curTheme.title}

- +

主题: diff --git a/src/components/ConfigDialog.module.scss b/src/components/ConfigDialog.module.scss index 52d18fe..e76ffc5 100644 --- a/src/components/ConfigDialog.module.scss +++ b/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); diff --git a/src/components/ConfigDialog.tsx b/src/components/ConfigDialog.tsx index b2490ea..052e065 100644 --- a/src/components/ConfigDialog.tsx +++ b/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; @@ -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<{
- {genLink &&