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

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="btn-row">
                 <div className="div-btn">
-                <button className="dl-btn" onClick={onSvgDownload}>SVG</button>
                     <button className="dl-btn" onClick={() => {
                         onJpgDownload().then(res => setImgData(res));
                     }}>
                         JPG
                     </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">
-                    <tbody>
                 <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,6 +3,8 @@ import PropTypes from 'prop-types'
 import '../Qrcode.css';
 
 const ParamCorrectLevel = ({value, onChange}) => (
+    <table className="Qr-table">
+        <tbody>
         <tr>
             <td>容错率</td>
             <td>
@@ -17,6 +19,8 @@ const ParamCorrectLevel = ({value, onChange}) => (
                 </select>
             </td>
         </tr>
+        </tbody>
+    </table>
 )
 
 ParamCorrectLevel.propTypes = {

src/components/param/ParamList.js

@@ -16,7 +16,9 @@ const mapTypeToComponent = ({
 const ParamList = ({ rendererIndex, paramInfo }) => (
     paramInfo.map((item, paramIndex) => {
         return (
-            <tr key={"tr_" + rendererIndex + "_" + paramIndex}>
+            <table className="Qr-table" key={"tr_" + rendererIndex + "_" + paramIndex}>
+                <tbody>
+                    <tr>
                         <td>{item.key}</td>
                         <td>
                             {React.createElement(mapTypeToComponent[item.type], {
@@ -25,6 +27,8 @@ const ParamList = ({ rendererIndex, paramInfo }) => (
                             })}
                         </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,
-        }
     ];
 }