Merge pull request #11 from ciaochaos/dev-redux

QRBTF 1.3
latentcat · Sep 1, 2020 · 5f01a7f · 5f01a7f
2 parents 7dbcff5 + 8c56cb3
commit 5f01a7f
Show file tree

Hide file tree

Showing 44 changed files with 2,239 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "react-lazy-load": "^3.0.13",
     "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "serialize-javascript": "^3.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -36,3 +36,17 @@ export const loadDownloadData = (data) => ({
     type: actionTypes.LOAD_DOWNLOAD_DATA,
     data
 })
+
+export const changeTitle = (title) => {
+    return {
+        type: actionTypes.CHANGE_TITLE,
+        title
+    }
+}
+
+export const changeIcon = (icon) => {
+    return {
+        type: actionTypes.CHANGE_ICON,
+        icon
+    }
+}
diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
@@ -176,6 +176,7 @@
     border: rgba(0,0,0,0.12) solid 2px;
     width: calc((100vw - 56px) / 2);
     height: calc((100vw - 56px) / 2);
+    background: rgba(255,255,255,0.5);
 }
 
 @media (min-width: 500px) {
@@ -567,11 +568,15 @@ input[type="number"]{
 }
 
 .div-btn {
-    white-space: nowrap;
-    overflow-x: hidden;
-    display: flex;
     justify-content: space-between;
-    margin-bottom: 10px;
+    width: calc((100vw - 46px) / 1);
+    display: flex;
+    display: -webkit-flex; /* Safari */
+    flex-wrap: wrap;
+}
+
+.div-btn .dl-btn {
+    margin: 0 0 10px!important;
 }
 
 .ul-btn {
@@ -603,6 +608,7 @@ input[type="number"]{
     background: var(--bg-color);
     font-family: 'Futura', sans-serif;
     color: var(--input-font-color);
+    display: inline-block;
 }
 
 @media (min-width: 500px) {
@@ -640,6 +646,7 @@ input[type="number"]{
 }
 
 @media (min-width: 500px) {
+
     .div-btn {
         max-width: 410px;
     }
@@ -649,6 +656,12 @@ input[type="number"]{
     }
 }
 
+@media (min-width: 666px) {
+    .img-dl-btn {
+        max-width: 620px!important;
+    }
+}
+
 .Qr-footer {
     color: var(--footer-font-color);
     margin-bottom: -1em;

diff --git a/src/components/app/PartDownload.js b/src/components/app/PartDownload.js
@@ -15,7 +15,20 @@ const WxMessage = () => {
     return null
 }
 
-const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) => {
+const ImgBox = ({ imgData }) => {
+    if (imgData.length > 0) {
+        return (
+            <div id="dl-image">
+                <div id="dl-image-inner">
+                    <img id="dl-image-inner-jpg" src={imgData} alt="长按保存二维码" />
+                </div>
+            </div>
+        )
+    }
+    return null
+}
+
+const PartDownload = ({ value, downloadCount, onSvgDownload, onImgDownload }) => {
     const [imgData, setImgData] = useState('');
 
     return (
@@ -29,23 +42,17 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) =>
         </div>
         <div className="Qr-Centered">
             <div className="btn-row">
-                <div className="div-btn">
-                    <button className="dl-btn" onClick={() => {
-                        onJpgDownload().then(res => setImgData(res));
-                    }}>
-                        JPG
-                    </button>
+                <div className="div-btn img-dl-btn">
+                    <button className="dl-btn" onClick={() => {onImgDownload("jpg").then(res => setImgData(res));}}>JPG</button>
+                    <button className="dl-btn" onClick={() => {onImgDownload("png").then(res => setImgData(res));}}>PNG</button>
                     <button className="dl-btn" onClick={onSvgDownload}>SVG</button>
                 </div>
             </div>
-
             <div id="wx-message">
                 <WxMessage/>
             </div>
             <div>
-                {
-                    imgData.length > 0 ? <div id="dl-image"><div id="dl-image-inner"><img id="dl-image-inner-jpg" src={imgData} alt="长按保存二维码" /></div></div> : null
-                }
+                <ImgBox imgData={imgData} />
             </div>
         </div>
     </div>
@@ -54,8 +61,9 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) =>
 
 PartDownload.propTypes = {
     value: PropTypes.string.isRequired,
+    downloadCount: PropTypes.number,
     onSvgDownload: PropTypes.func.isRequired,
-    onJpgDownload: PropTypes.func.isRequired,
+    onImgDownload: PropTypes.func.isRequired,
 }
 
 export default PartDownload;
diff --git a/src/components/app/PartMore.js b/src/components/app/PartMore.js
@@ -51,6 +51,7 @@ const PartMore = () => {
                     </ScrollContainer>
                     <div className="Qr-Centered">
                         <h2>最新消息</h2>
+                        <p><b>2020.9.1</b><br/>新增 C3 样式、图标插入、 PNG 下载。</p>
                         <p><b>2020.6.29</b><br/>新的反馈渠道！我们开始征集好玩的二维码设计啦，可以是推送尾图、海报等等，快来上传吧。<LinkTrace
                             href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer"
                             target="_blank">点击提交</LinkTrace>。</p>
@@ -80,9 +81,10 @@ const PartMore = () => {
                         <p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式，各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG
                             有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工，如删除中央的信息点 <b>放入自己的 Logo</b> 等。如果需要直接分享二维码图像，请直接下载 JPG 格式。
                         </p>
+                        <h2>二维码无法识别的原因是什么？</h2>
+                        <p>二维码无法识别有很多原因。比如定位点不匹配识别模式、信息点颜色对比不够、遮挡部分太大。建议尝试调整容错率、颜色、图标大小等参数并在各种二维码扫描器中测试，以保证二维码被识别的成功率</p>
                         <h2>使用遇到了问题，怎么反馈？</h2>
                         <p>我们是两位大一的学生，忙于学业，可能在设计与开发的过程中有一些疏漏，敬请谅解。如果遇到浏览器兼容问题，请暂时选择更换软件或设备尝试。</p>
-                        <p>请注意，应用并不能保证二维码时刻可被识别，需要多加测试。</p>
                         <p>编写二维码样式是一个锻炼设计与开发（JavaScript）能力的绝佳机会，如果你有兴趣和我们一起玩这个项目，欢迎添加我的微信（微信号：<span
                             style={{userSelect: "text"}}>nhciao</span>，请备注真实姓名）或发送邮件至 <LinkTrace
                             href='mailto:[email protected]'>[email protected]</LinkTrace> 联系我们！</p>

diff --git a/src/components/app/PartParams.js b/src/components/app/PartParams.js
@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 import ParamListViewer from "../../containers/param/ParamListViewer";
 import ParamCorrectLevelViewer from "../../containers/param/ParamCorrectLevelViewer";
+import ParamIconViewer from "../../containers/param/disposable/ParamIconViewer";
 
 const PartParams = () => (
     <div className="Qr-titled-nobg">
@@ -12,6 +13,7 @@ const PartParams = () => (
         <div className="Qr-Centered">
             <div className="Qr-div-table">
                 <ParamCorrectLevelViewer/>
+                <ParamIconViewer/>
                 <ParamListViewer/>
             </div>
         </div>

diff --git a/src/components/param/FrameworkParam.js b/src/components/param/FrameworkParam.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../Qrcode.css';
+
+const FrameworkParam = ({ paramName, children, ...other }) => (
+    <table className="Qr-table" {...other}>
+        <tbody>
+        <tr>
+            <td>{ paramName }</td>
+            <td>
+                { children }
+            </td>
+        </tr>
+        </tbody>
+    </table>
+)
+
+export default FrameworkParam;
diff --git a/src/components/param/ParamColor.js b/src/components/param/ParamColor.js
@@ -42,7 +42,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
                         <div style={styles.cover} onClick={() => setDisplay(false)} />
                         <TwitterPicker
                             key={"input_" + rendererIndex + "_" + paramIndex}
-                            triangle="none"
+                            triangle="hide"
                             color={value}
                             colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
                             onChangeComplete={onChange}

diff --git a/src/components/param/ParamCorrectLevel.js b/src/components/param/ParamCorrectLevel.js
diff --git a/src/components/param/ParamList.js b/src/components/param/ParamList.js
@@ -6,6 +6,7 @@ import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
 import ParamColorViewer from "../../containers/param/ParamColorViewer";
 import ParamUploadViewer from "../../containers/param/ParamUploadViewer";
 import ParamCheckBoxViewer from "../../containers/param/ParamCheckBoxViewer";
+import FrameworkParam from "./FrameworkParam";
 
 const mapTypeToComponent = ({
     [ParamTypes.TEXT_EDITOR]: ParamTextViewer,
@@ -18,19 +19,12 @@ const mapTypeToComponent = ({
 const ParamList = ({ rendererIndex, paramInfo }) => (
     paramInfo.map((item, paramIndex) => {
         return (
-            <table className="Qr-table" key={"tr_" + rendererIndex + "_" + paramIndex}>
-                <tbody>
-                    <tr>
-                        <td>{item.key}</td>
-                        <td>
-                            {React.createElement(mapTypeToComponent[item.type], {
-                                rendererIndex: rendererIndex,
-                                paramIndex: paramIndex
-                            })}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+            <FrameworkParam key={"tr_" + rendererIndex + "_" + paramIndex} paramName={item.key}>
+                {React.createElement(mapTypeToComponent[item.type], {
+                    rendererIndex: rendererIndex,
+                    paramIndex: paramIndex
+                })}
+            </FrameworkParam>
         );
     })
 )

diff --git a/src/components/param/disposable/ParamCorrectLevel.js b/src/components/param/disposable/ParamCorrectLevel.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../../Qrcode.css';
+import FrameworkParam from "../FrameworkParam";
+
+const ParamCorrectLevel = ({value, onChange}) => (
+    <FrameworkParam paramName={"容错率"}>
+        <select
+            className="Qr-select"
+            value={value}
+            onChange={onChange}>
+            <option value={1}>7%</option>
+            <option value={0}>15%</option>
+            <option value={3}>25%</option>
+            <option value={2}>30%</option>
+        </select>
+    </FrameworkParam>
+)
+
+ParamCorrectLevel.propTypes = {
+    value: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired
+}
+
+export default ParamCorrectLevel;
diff --git a/src/components/param/disposable/ParamIcon.js b/src/components/param/disposable/ParamIcon.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../../Qrcode.css';
+import FrameworkParam from "../FrameworkParam";
+import {getExactValue} from "../../../utils/util";
+import ParamIconSrcViewer from "../../../containers/param/disposable/ParamIconSrcViewer";
+
+const IconParams = ({ icon, onBlur, onKeyPress }) => {
+    const { enabled, src, scale } = icon;
+    const components = [];
+
+    if (getExactValue(enabled, 0) == 1) {
+        components.push(
+            <FrameworkParam paramName={"图标源"}>
+                <ParamIconSrcViewer icon={icon} onChange={onBlur}/>
+            </FrameworkParam>
+        );
+    }
+
+    if (getExactValue(enabled, 0) != 0) {
+        components.push(
+            <FrameworkParam paramName={"图标缩放"}>
+                <input
+                    type="number"
+                    className="Qr-input small-input"
+                    defaultValue={scale}
+                    onBlur={(e) => onBlur({...icon, scale: e.target.value})}
+                    onKeyPress={(e) => onKeyPress(e, {...icon, scale: e.target.value})}
+                />
+            </FrameworkParam>
+        )
+    }
+    return components;
+}
+
+const ParamIcon = ({icon, onBlur, onKeyPress}) => (
+    <React.Fragment>
+        <FrameworkParam paramName={"图标"}>
+            <select
+                className="Qr-select"
+                defaultValue={icon.enabled}
+                onChange={(e) => onBlur({...icon, enabled: e.target.value})}>
+                <option value={0}>无</option>
+                <option value={1}>自定义</option>
+                <option value={2}>微信 — 小</option>
+                <option value={3}>微信</option>
+                <option value={4}>微信支付</option>
+                <option value={5}>支付宝</option>
+            </select>
+        </FrameworkParam>
+        <IconParams icon={icon} onBlur={onBlur} onKeyPress={onKeyPress}/>
+    </React.Fragment>
+)
+
+ParamIcon.propTypes = {
+    icon: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired
+}
+
+export default ParamIcon;