[Style details]

src/components/app/PartFooter.js

@@ -1,6 +1,6 @@
 import React from "react";
 import '../Qrcode.css';
-import {handleLink} from "../../utils/gaHelper";
+import LinkTrace from "../link/LinkTrace";
 
 const currentYear = new Date().getFullYear();
 
@@ -9,34 +9,43 @@ const PartFooter = () => (
         <div className="Qr-Centered Qr-footer note-font">
             <div>
                 <strong>作者</strong>&emsp;
-                <a onClick={ (e) =>  handleLink(e.target.href)  }
+                <LinkTrace
                     href="https://blog.ciaochaos.com/"
                     rel="noopener noreferrer"
                     target="_blank">ciaochaos
-                </a>&emsp;
+                </LinkTrace>&emsp;
-                <a onClick={ (e) =>  handleLink(e.target.href)  } href="https://github.com/CPunisher/"
+                <LinkTrace
+                    href="https://github.com/CPunisher/"
                     rel="noopener noreferrer"
                     target="_blank">CPunisher
-                </a>
+                </LinkTrace>
                 <span className="gray">&ensp;丨&ensp;</span>
-                <span><a onClick={ (e) =>  handleLink(e.target.href)  } href="https://www.yuque.com/qrbtf/docs/contact" rel="noopener noreferrer" target="_blank">联系我们</a><span className="gray">&ensp;丨&ensp;</span></span>
+                <span><LinkTrace href="https://www.yuque.com/qrbtf/docs/contact"
-                <span><a onClick={ (e) =>  handleLink(e.target.href)  } href="https://www.yuque.com/qrbtf/docs/coop" rel="noopener noreferrer" target="_blank">合作咨询</a></span>
+                                 rel="noopener noreferrer" target="_blank">联系我们</LinkTrace><span
+                    className="gray">&ensp;丨&ensp;</span></span>
+                <span><LinkTrace href="https://www.yuque.com/qrbtf/docs/coop"
+                                 rel="noopener noreferrer" target="_blank">合作咨询</LinkTrace></span>
             </div>
 
             <div className="Qr-footer-part">
                 <strong>更多产品</strong>&emsp;
-                <span><a onClick={ (e) =>  handleLink(e.target.href)  } href="https://mdnice.com" rel="noopener noreferrer" target="_blank">mdnice 公众号排版</a><span className="gray">&ensp;丨&ensp;</span></span>
+                <span><LinkTrace href="https://mdnice.com" rel="noopener noreferrer"
-                <span><a onClick={ (e) =>  handleLink(e.target.href)  } href="https://urlify.cn/" rel="noopener noreferrer" target="_blank">Urlify 短链接</a><span className="gray">&ensp;丨&ensp;</span></span>
+                         target="_blank">mdnice 公众号排版</LinkTrace><span className="gray">&ensp;丨&ensp;</span></span>
-                <span><a onClick={ (e) =>  handleLink(e.target.href)  } href="https://imgkr.com/" rel="noopener noreferrer" target="_blank">imgkr 图壳图床</a><span className="gray">&ensp;丨&ensp;</span></span>
+                <span><LinkTrace href="https://urlify.cn/" rel="noopener noreferrer"
-                <span><a onClick={ (e) =>  handleLink(e.target.href)  } href="https://blog.ciaochaos.com/mpmath/" rel="noopener noreferrer" target="_blank">mpMath 公众号公式插件</a></span>
+                         target="_blank">Urlify 短链接</LinkTrace><span className="gray">&ensp;丨&ensp;</span></span>
+                <span><LinkTrace href="https://imgkr.com/" rel="noopener noreferrer"
+                         target="_blank">imgkr 图壳图床</LinkTrace><span className="gray">&ensp;丨&ensp;</span></span>
+                <span><LinkTrace href="https://blog.ciaochaos.com/mpmath/"
+                         rel="noopener noreferrer" target="_blank">mpMath 公众号公式插件</LinkTrace></span>
             </div>
 
             <div className="Gray">
                 Copyright © {currentYear} QRBTF. 保留所有权利。<br/>
-                <a onClick={ (e) =>  handleLink(e.target.href)  } href="http://www.beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">
+                <LinkTrace href="http://www.beian.miit.gov.cn/"
+                   rel="noopener noreferrer" target="_blank">
                     浙
                     ICP 备 19005869 号
-                </a>
+                </LinkTrace>
             </div>
         </div>
     </div>

src/components/app/PartMore.js

@@ -2,7 +2,7 @@ import React from 'react';
 import './App.css';
 import LinkButton from "../link/LinkButton";
 import GitHubButton from 'react-github-btn'
-import {handleLink} from "../../utils/gaHelper";
+import LinkTrace from "../link/LinkTrace";
 
 const PartMore = () => (
     <div className="Qr-titled-nobg">
@@ -12,11 +12,11 @@ const PartMore = () => (
             <div className="Qr-article">
                 <p><GitHubButton className="github-btn" href="https://github.com/ciaochaos/qrbtf" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
                 <h2>最新消息</h2>
-                <p><b>2020.6.11</b><br/>QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。<a onClick={ (e) =>  handleLink(e.target.href)  } href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</a>。</p>
+                <p><b>2020.6.11</b><br/>QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。<LinkTrace href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</LinkTrace>。</p>
-                <p><b>2020.5.23</b><br/>网站开源啦！<a onClick={ (e) =>  handleLink(e.target.href)  } href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</a> 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 <a onClick={ (e) =>  handleLink(e.target.href)  } href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～</a>。</p>
+                <p><b>2020.5.23</b><br/>网站开源啦！<LinkTrace href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</LinkTrace> 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～</LinkTrace>。</p>
                 <p><b>2020.5.22</b><br/>新增 C2 样式、下载计数（好像还不太稳定）、普通二维码上传、颜色选择、背景图片上传、输入提示、桌面端横向滚动提示。</p>
                 <h2>为什么要做一个二维码生成器？</h2>
-                <p>看这里，<a onClick={ (e) =>  handleLink(e.target.href)  } href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码</a> 这篇文章简要介绍了我们的初心与愿景。</p>
+                <p>看这里，<LinkTrace href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码</LinkTrace> 这篇文章简要介绍了我们的初心与愿景。</p>
                 <h2>这个生成器的特别之处在哪里？</h2>
                 <p>普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 <b>丰富的参数化样式、基于 SVG 的二维码生成能力</b>，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 SVG 有较好的拓展性，可以完美兼容矢量制图流程。</p>
                 <h2>如何使用？</h2>

src/components/link/LinkButton.js

@@ -1,12 +1,12 @@
 import React from "react";
 import PropTypes from 'prop-types'
 import '../Qrcode.css';
-import {handleLink} from "../../utils/gaHelper";
+import LinkTrace from "./LinkTrace";
 
 const LinkButton = ({ href, value }) => (
-    <a onClick={ (e) =>  handleLink(href)  } href={href} rel="noopener noreferrer" target="_blank">
+    <LinkTrace href={href} rel="noopener noreferrer" target="_blank">
         <button className="dl-btn">{value}</button>
-    </a>
+    </LinkTrace>
 )
 
 LinkButton.propTypes = {

src/components/link/LinkTrace.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {handleLink} from "../../utils/gaHelper";
+
+const LinkTrace = (props) => {
+    return (
+        <a onClick={(e) => handleLink(props.href)} {...props}>
+            {props.children}
+        </a>
+    )
+}
+
+export default LinkTrace;

src/components/renderer/RendererBase.js

@@ -3,6 +3,7 @@ import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
 import {rand} from "../../utils/util";
+import LinkTrace from "../link/LinkTrace";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -229,3 +230,16 @@ export const RendererRandRound = createRenderer({
     listPoints: listPoints,
     getParamInfo: getParamInfoRandRound,
 });
+
+RendererRect.detail = (
+    <p>生成矩形<LinkTrace href="https://zh.wikipedia.org/wiki/QR%E7%A2%BC">二维码</LinkTrace>。</p>
+);
+
+RendererRound.detail = (
+    <p>生成圆形二维码。</p>
+);
+
+
+RendererRandRound.detail = (
+    <p>生成随机点圆形二维码。</p>
+);

src/components/renderer/RendererFunc.js

@@ -2,7 +2,6 @@ import React  from "react";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
-import {rand} from "../../utils/util";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []

src/components/renderer/RendererLine.js

@@ -2,7 +2,6 @@ import React  from "react";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
-import {rand} from "../../utils/util";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []

src/components/style/Style.js

@@ -6,7 +6,7 @@ function calClassName(selected) {
     return 'Qr-item';
 }
 
-const Style = ({ value, renderer, selected, onSelected }) => (
+const Style = ({ value, renderer, selected, details, onSelected }) => (
     <div className={calClassName(selected)}
          onMouseDown={onSelected}>
         <div className="Qr-item-image">
@@ -17,6 +17,9 @@ const Style = ({ value, renderer, selected, onSelected }) => (
         <div className="Qr-item-detail">
             {value}
         </div>
+        <div className="Qr-item-detail">
+            {details}
+        </div>
     </div>
 );
 

src/containers/app/PartDownloadViewer.js

@@ -20,6 +20,7 @@ function saveDB(state, type, updateDownloadData) {
                             value: value
                         }
                     }
+                    return {}
                 }),
                 history: state.history
             }, () => {

src/containers/style/StyleListViewer.js

@@ -39,6 +39,7 @@ const mapStateToProps = state => ({
         return {
             value: style.value,
             selected: state.selectedIndex === index,
+            details: style.renderer.detail,
             renderer: <RendererViewer rendererType={style.renderer} index={index} setParamInfo={setParamInfo}/>
         }
     })

src/utils/qrcodeEncoder.js

@@ -199,37 +199,6 @@ QRCode.prototype = {
 
 		return pattern;
 	},
-
-	createMovieClip : function(target_mc, instance_name, depth) {
-
-		let qr_mc = target_mc.createEmptyMovieClip(instance_name, depth);
-		let cs = 1;
-
-		this.make();
-
-		for (let row = 0; row < this.modules.length; row++) {
-
-			let y = row * cs;
-
-			for (let col = 0; col < this.modules[row].length; col++) {
-
-				let x = col * cs;
-				let dark = this.modules[row][col];
-
-				if (dark) {
-					qr_mc.beginFill(0, 100);
-					qr_mc.moveTo(x, y);
-					qr_mc.lineTo(x + cs, y);
-					qr_mc.lineTo(x + cs, y + cs);
-					qr_mc.lineTo(x, y + cs);
-					qr_mc.endFill();
-				}
-			}
-		}
-
-		return qr_mc;
-	},
-
     setupTimingPattern : function() {
 
 		for (let r = 8; r < this.moduleCount - 8; r++) {