参数分栏、微信端图片下载优化

src/components/Qrcode.css

@@ -103,9 +103,38 @@
 @media (min-width: 500px) {
     .Qr-item-image {
         border: rgba(0,0,0,0.12) solid 3px;
+        width: 200px;
+        height: 200px;
     }
 }
 
+#dl-image {
+    padding-top: 20px;
+}
+
+#dl-image-inner {
+    overflow: hidden;
+    display: flex;
+    border-radius: 20px;
+    box-sizing: border-box;
+    border: rgba(0,0,0,0.12) solid 2px;
+    width: calc((100vw - 56px) / 2);
+    height: calc((100vw - 56px) / 2);
+}
+
+@media (min-width: 500px) {
+    #dl-image-inner {
+        border: rgba(0,0,0,0.12) solid 3px;
+        width: 200px;
+        height: 200px;
+    }
+}
+
+#dl-image-inner-jpg {
+    width: 100%;
+    height: 100%;
+}
+
 .Qr-item-image-inner {
     justify-content: center;
     -webkit-transition-timing-function: ease-in-out;
@@ -118,13 +147,6 @@
     -moz-transform: translateZ(0);
 }
 
-@media (min-width: 500px) {
-    .Qr-item-image {
-        width: 200px;
-        height: 200px;
-    }
-}
-
 .Qr-item-selected .Qr-item-image {
     border-color: #44D7B6 !important;
 }
@@ -177,10 +199,6 @@ td {
     padding: 0 0 10px 0;
 }
 
-table {
-    margin-bottom: -10px;
-}
-
 .big-input {
     font-size: calc(10px + 2vmin);
     margin-top: calc((10px + 2vmin) * 2);
@@ -301,16 +319,26 @@ input[type="number"]{
 
 
 .Qr-table {
+    max-width: 410px;
     width: 100%;
     border-spacing: 0;
-    margin-top: 23px;
 }
 
 .Qr-div-table {
-    max-width: 410px;
+    margin-bottom: -10px;
+    display: block;
 }
 
-.btn-row:nth-last-child(1) {
+@media (min-width: 886px) {
+    .Qr-div-table {
+        display: inline-flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin-bottom: -10px;
+    }
+}
+
+.btn-row {
     margin-bottom: -10px;
 }
 

src/components/app/PartDownload.js

@@ -5,7 +5,7 @@ import {isWeiXin} from "../../utils/util";
 
 const WxMessage = () => {
     if (isWeiXin()) {
-        return <div className="note-font" id="wx-message-inner">当前客户端不支持下载，请长按图片保存。</div>
+        return <div className="note-font" id="wx-message-inner">当前客户端不支持下载 SVG，<br />请下载 JPG 并长按二维码保存。</div>
     }
     return null
 }
@@ -20,20 +20,25 @@ const PartDownload = ({ value, onSvgDownload, onJpgDownload }) => {
             <p className="Qr-s-subtitle">下载二维码 — {value}</p>
         </div>
         <div className="Qr-Centered">
-            <div className="div-btn">
+            <div className="btn-row">
-                <button className="dl-btn" onClick={onSvgDownload}>SVG</button>
+                <div className="div-btn">
-                <button className="dl-btn" onClick={() => {
+                    <button className="dl-btn" onClick={() => {
-                    onJpgDownload().then(res => setImgData(res));
+                        onJpgDownload().then(res => setImgData(res));
-                }}>
+                    }}>
-                    JPG
+                        JPG
-                </button>
+                    </button>
+                    <button className="dl-btn" onClick={onSvgDownload}>SVG</button>
+                </div>
             </div>
+
             <div id="wx-message">
                 <WxMessage/>
             </div>
             <div>
                 {
-                    imgData.length > 0 ? <img src={imgData} width={300} height={300} alt="点击JPG下载" /> : null
+                    imgData.length > 0 ? <div id="dl-image" onClick={() => {
+                        onJpgDownload().then(res => setImgData(res));
+                    }}><div id="dl-image-inner"><img id="dl-image-inner-jpg" src={imgData} alt="点击JPG下载" /></div></div> : null
                 }
             </div>
         </div>

src/components/app/PartParams.js

@@ -11,12 +11,8 @@ const PartParams = () => (
         </div>
         <div className="Qr-Centered">
             <div className="Qr-div-table">
-                <table className="Qr-table">
+                <ParamCorrectLevelViewer/>
-                    <tbody>
+                <ParamListViewer/>
-                    <ParamCorrectLevelViewer/>
-                    <ParamListViewer/>
-                    </tbody>
-                </table>
             </div>
         </div>
     </div>

src/components/param/ParamColor.js

@@ -33,7 +33,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
     return (
         <div>
             <button className="dl-btn" onClick={ () => setDisplay(!displayColorPicker) }>
-                点击选择颜色
+                选择颜色
             </button>
             {
                 displayColorPicker ?

src/components/param/ParamCorrectLevel.js

@@ -3,20 +3,24 @@ import PropTypes from 'prop-types'
 import '../Qrcode.css';
 
 const ParamCorrectLevel = ({value, onChange}) => (
-    <tr>
+    <table className="Qr-table">
-        <td>容错率</td>
+        <tbody>
-        <td>
+        <tr>
-            <select
+            <td>容错率</td>
-                className="Qr-select"
+            <td>
-                value={value}
+                <select
-                onChange={onChange}>
+                    className="Qr-select"
-                <option value={1}>7%</option>
+                    value={value}
-                <option value={0}>15%</option>
+                    onChange={onChange}>
-                <option value={3}>25%</option>
+                    <option value={1}>7%</option>
-                <option value={2}>30%</option>
+                    <option value={0}>15%</option>
-            </select>
+                    <option value={3}>25%</option>
-        </td>
+                    <option value={2}>30%</option>
-    </tr>
+                </select>
+            </td>
+        </tr>
+        </tbody>
+    </table>
 )
 
 ParamCorrectLevel.propTypes = {

src/components/param/ParamList.js

@@ -16,15 +16,19 @@ const mapTypeToComponent = ({
 const ParamList = ({ rendererIndex, paramInfo }) => (
     paramInfo.map((item, paramIndex) => {
         return (
-            <tr key={"tr_" + rendererIndex + "_" + paramIndex}>
+            <table className="Qr-table" key={"tr_" + rendererIndex + "_" + paramIndex}>
-                <td>{item.key}</td>
+                <tbody>
-                <td>
+                    <tr>
-                    {React.createElement(mapTypeToComponent[item.type], {
+                        <td>{item.key}</td>
-                        rendererIndex: rendererIndex,
+                        <td>
-                        paramIndex: paramIndex
+                            {React.createElement(mapTypeToComponent[item.type], {
-                    })}
+                                rendererIndex: rendererIndex,
-                </td>
+                                paramIndex: paramIndex
-            </tr>
+                            })}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         );
     })
 )

src/components/renderer/RendererImage.js

@@ -10,10 +10,10 @@ function listPoints(qrcode, params) {
     const typeTable = getTypeTable(qrcode);
     const pointList = new Array(nCount);
 
-    let type = params[0];
+    let type = params[1];
-    let size = params[1] / 100 / 3;
+    let size = params[2] / 100 / 3;
-    let opacity = params[2] / 100;
+    let opacity = params[3] / 100;
-    let posType = params[3];
+    let posType = params[4];
     let id = 0;
 
     const vw = [3, -3];
@@ -21,7 +21,7 @@ function listPoints(qrcode, params) {
 
     if (size <= 0) size = 1.0
 
-    pointList.push(<image key={id++} x="0" y="0" width={nCount} height={nCount} xlinkHref={params[4]}/>);
+    pointList.push(<image key={id++} x="0" y="0" width={nCount} height={nCount} xlinkHref={params[0]}/>);
 
     for (let x = 0; x < nCount; x++) {
         for (let y = 0; y < nCount; y++) {
@@ -95,6 +95,11 @@ function listPoints(qrcode, params) {
 
 function getParamInfo() {
     return [
+        {
+            type: ParamTypes.UPLOAD_BUTTON,
+            key: '背景图片',
+            default: data,
+        },
         {
             type: ParamTypes.SELECTOR,
             key: '信息点样式',
@@ -124,11 +129,6 @@ function getParamInfo() {
                 "行星",
             ]
         },
-        {
-            type: ParamTypes.UPLOAD_BUTTON,
-            key: '背景图片',
-            default: data,
-        }
     ];
 }