From 13dbe2c7846447929b0026c29057ea9201c132a0 Mon Sep 17 00:00:00 2001 From: Aaron Yu Date: Fri, 21 Jan 2022 22:19:18 +0800 Subject: [PATCH] add copy --- package-lock.json | 55 ++++++++++++++++++++++++++ package.json | 1 + src/App.js | 10 ++--- src/Components/deviceFrame/index.js | 21 +++++++++- src/Components/settingsFrame/index.js | 1 - src/constants.js | 1 + src/images/copy.png | Bin 0 -> 3251 bytes 7 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 src/constants.js create mode 100644 src/images/copy.png diff --git a/package-lock.json b/package-lock.json index 4b38c44..7b5a666 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3856,6 +3856,16 @@ "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==" }, + "clipboard": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz", + "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==", + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -4032,6 +4042,14 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, + "copy-to-clipboard": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", + "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "requires": { + "toggle-selection": "^1.0.6" + } + }, "core-js": { "version": "3.20.0", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.0.tgz", @@ -4475,6 +4493,11 @@ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -5920,6 +5943,14 @@ } } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "requires": { + "delegate": "^3.1.2" + } + }, "graceful-fs": { "version": "4.2.8", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz", @@ -9731,6 +9762,15 @@ "whatwg-fetch": "^3.6.2" } }, + "react-copy-to-clipboard": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz", + "integrity": "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==", + "requires": { + "copy-to-clipboard": "^3", + "prop-types": "^15.5.8" + } + }, "react-dev-utils": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz", @@ -10311,6 +10351,11 @@ "ajv-keywords": "^3.5.2" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=" + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -11021,6 +11066,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "tmp": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", @@ -11047,6 +11097,11 @@ "is-number": "^7.0.0" } }, + "toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=" + }, "toidentifier": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", diff --git a/package.json b/package.json index 6326598..3bc7be5 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "axios": "^0.24.0", "qrcode": "^1.5.0", "react": "^17.0.2", + "react-copy-to-clipboard": "^5.0.4", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" diff --git a/src/App.js b/src/App.js index 24b610e..e99f1c8 100644 --- a/src/App.js +++ b/src/App.js @@ -5,8 +5,8 @@ import waterMarkPng from './images/water-mark.png' import React from 'react'; import SettingFrame from './Components/settingsFrame'; import QrCode from 'qrcode' +import { BaseUrl } from './constants'; -var baseUrl = "http://123.56.161.61:1157/" var project = "topwar"; class App extends React.Component { constructor() { @@ -28,7 +28,7 @@ class App extends React.Component { refreshQrCode() { var {selectedProject} = this.state; - var rawUrl = encodeURI(baseUrl + selectedProject.HtmlUrl) + var rawUrl = encodeURI(BaseUrl + selectedProject.HtmlUrl) selectedProject.HtmlUrl && QrCode.toDataURL([{ data: rawUrl, mode: 'byte'}], { width: 120 }) .then((dataUrl) => { this.setState({ @@ -71,8 +71,8 @@ class App extends React.Component { async fetchProjects() { var url = project - ? `http://123.56.161.61:1157/home/GetServerProjectJsonData?project=${project}` - : 'http://123.56.161.61:1157/home/GetServerJsonData'; + ? `${BaseUrl}home/GetServerProjectJsonData?project=${project}` + : `${BaseUrl}home/GetServerJsonData`; var response = await fetch(url, { headers: { 'Content-Type': 'application/json' @@ -104,7 +104,7 @@ class App extends React.Component { fileName: this.state.selectedProject.Name, }; var query = Object.keys(body).map(k => `${k}=${body[k]}`).join('&') - fetch(`http://123.56.161.61:1157/home/UpdateFileContentNew?${query}`) + fetch(`${BaseUrl}home/UpdateFileContentNew?${query}`) .then(() => this.refreshProject()) .catch(e => console.log('update fails', e)); } diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js index 1e3d9a9..dd2e657 100644 --- a/src/Components/deviceFrame/index.js +++ b/src/Components/deviceFrame/index.js @@ -5,8 +5,12 @@ import iphoneHPng from '../../images/iphone-h.png' import iphoneVPng from '../../images/iphone-v.png' import ipadHPng from '../../images/iPad-h.png' import ipadVPng from '../../images/iPad-v.png' +import copyPng from '../../images/copy.png' import refreshButtonPng from '../../images/refresh-button.png' -import { useEffect, useState } from 'react' +import {CopyToClipboard} from 'react-copy-to-clipboard'; +import React, { createRef, useEffect, useState } from 'react' +import { BaseUrl } from '../../constants' +import { Alert, Snackbar } from '@mui/material' var baseUrl = "http://123.56.161.61:1157/" var configMap = { @@ -49,6 +53,7 @@ var configMap = { function DeviceFrame(props) { var [config, setConfig] = useState({}) var [cacheKey, setCacheKey] = useState(new Date().getTime()); + var [openPopup, setOpenPopup] = useState(false); useEffect(() => { setConfig(configMap[props.device]) @@ -67,10 +72,22 @@ function DeviceFrame(props) { refresh refresh()} className='refreshButton'/> { props.qrDataUrl &&
-

扫一扫,手机预览

+

扫一扫,手机预览 + setOpenPopup(true)}> + 复制链接 + +

qr code
} + setOpenPopup(false)} autoHideDuration={500} anchorOrigin={{ + vertical: 'top', + horizontal: 'right' + }}> + + 链接复制成功 + +
background { diff --git a/src/Components/settingsFrame/index.js b/src/Components/settingsFrame/index.js index 20fef44..f581f8c 100644 --- a/src/Components/settingsFrame/index.js +++ b/src/Components/settingsFrame/index.js @@ -1,7 +1,6 @@ import { Alert, Grid, List, ListItem, Snackbar } from '@mui/material'; import { useEffect, useState } from 'react' import './index.css' -import settingCardPng from '../../images/setting-card.png'; import checkPng from '../../images/check.png'; import generateButtonPng from '../../images/generate-button.png'; diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..d456052 --- /dev/null +++ b/src/constants.js @@ -0,0 +1 @@ +export var BaseUrl = "http://123.56.161.61:1157/"; \ No newline at end of file diff --git a/src/images/copy.png b/src/images/copy.png new file mode 100644 index 0000000000000000000000000000000000000000..edf86e71ed70e1a4b65878085baf003ada29bc2f GIT binary patch literal 3251 zcmcJSYdBPE8^>p@8ODfFj$vp*+Ds_tFbqPz-%**MHr=`?;=XWw^OGNQx_o z!(cE;$Gv;pd6C8ciHY*ARfm{`ya2?yJJ`UOJ(wvNOd`T@kF`eR6 z(VuwxgZ=QY7!D4~drCdtZ3wO*mf$7;yTsG4*lmJ}5gF5kv-z}d;E*75Q* z!kWOMjsh=?wmWi25Xq;qGK|24_eAh3`#EFKyP1AZNmeLrIrLFXyQ54JXsXg=5S!}> z|LVf&V%+dOE{|Y}^mO?i>!%{r*9>s4wHC_dqAqU<)oF|&oI0?Y7w0O!gUt}3be5qK$T#%RLR8XIj<0X#h5)#Xv*NPH7%VWu!zPSu{^+nOO2n{?bjywYDhpE4wcOv2r%rx5s zJ#+4|@TTZr?uH51vO& zvA4r_7la7Y*Yh6bxxc)qco|LD_a?@yTbSM%D|g2o_?=k%o|?nACQO~49lY&zb7!^9 ztyXFqMyzH#=y2`ccumM0d=89+&taA(_tnYq9uOx-XT$yVQiJ;U_22_u1wlxfUe&@E z>q5RvuQNecWHi{}(k!Y?j%%-m;d}N&X!Ia{MvQ(S>MUAt^c=gjc#bC3u-~at+agjY z^osyXdfyG+J73fVV-`j?ER?kCkv^0{b0u^9*NEFhzrfbnzQSGW3@!+{#dnxVT}32$ z;vD4erkF>Exm)pjz#A_G>aqr3aK7r@{%j==z8^b65BMOjem=MBaoXbi{qD`erF#vV zw=`jcK4uOKjx(WII=?ZKn%LgSvk?1&QtFlaOxU|dM_NRoCtt*qaP!R=jm@n)6rLuJ za~Zy**Hd?n?{^N&jzF;A7E%Sk9;2gd2m+w59;@o!9 z7j{OR6-&d>>PV)C?--pF^OYDXYD?$)8b*xgLVspEyOj@7o=3^7m#jG}xtM~X{j0IK z$dOK^bquNjQ3E{+%qu67^4Fo_qg?`nLK_m`U!Im6USBmr4HeK|gB3FVp)a-3|4cF_ zABv&|UBRx82~p=kE~9?=NS7}>zo@T3DET##lj*4J-~7T3>UWgn_mwwLz2gy(mSdiO zt&=aHLbMK*6x!5KYDb%zbOC2S1(VzFpS9y5vL^x=A!Au|1BIw73JUrwFTF;QryD^^ zU4(D@RlH#86zJjVP4AZ0NhKu7fC5r<&86rA0#fJOht3GWmt^35Jp|wn>zQo5Apn2u zu#^ISc-~V7yPU;@8}ItyBRl>UGQ}>%{3~)T5-eG!mFe%eF?Jw{?EF$=6H<14fMJ}P|}SF&)hHIiAUoWL>UW<$Tvh8Q!EOh-EOVz zdy;;_$odri>Q%SZ5x?TzC(0!c7m*C2%#QfPhX{Tj{1EFE4erTfsQ;?`pKCO(=L;YH zkJ2zgL#beF5vjw}JoIVq3`#IM;(HCv&rM7D_&d`%Yqz(p!@6xgjnZ0&rIiqU8IBV6 zd}fxv+3-r-VW@u#d^Me8@YbdJZ|_P8RpzeWsA|~Sn^rIfW>dWt=ul;vIAw?o)>3md z6$3m8qsgDSyV=_6bBEi4b2BPlPzYYd9cow zyj?I+uj#2GQ_4t~IpfUB$9imO&ju#VTz0Q%)+AmG{lPLtB*2Rfk(AtwKX1Lpg*qfe7 zecUo;?w%qmc_>I85%PV3=>=r?wZhLgW;l!>M(Y=^e7tbu2!SkSv6HxyoTx-or&^VI z$|!^>(vMDvK+9B_Cu!c1sbC@y3P@#j