This commit is contained in:
CPunisher
parent
9bd461dfac
commit
4c83262ec7
|
|
@ -1,5 +1,5 @@
|
|||
import {actionTypes} from "../constant/ActionTypes";
|
||||
import ReactGA from "react-ga";
|
||||
import {handleStyle} from "../utils/gaHelper";
|
||||
|
||||
export const genQRInfo = text => ({
|
||||
type: actionTypes.GENERATE_QR_INFO,
|
||||
|
|
@ -7,12 +7,7 @@ export const genQRInfo = text => ({
|
|||
})
|
||||
|
||||
export const changeStyle = (rendererIndex, rendererType, value) => {
|
||||
ReactGA.event({
|
||||
category: 'Style',
|
||||
action: 'Switch',
|
||||
value: value
|
||||
});
|
||||
|
||||
handleStyle(value);
|
||||
return {
|
||||
type: actionTypes.CHANGE_STYLE,
|
||||
rendererIndex, rendererType, value
|
||||
|
|
@ -29,10 +24,13 @@ export const createParam = (paramInfo, paramValue) => ({
|
|||
paramInfo, paramValue
|
||||
})
|
||||
|
||||
export const changeParam = (rendererIndex, paramIndex, value) => ({
|
||||
type: actionTypes.CHANGE_PARAM,
|
||||
rendererIndex, paramIndex, value
|
||||
})
|
||||
export const changeParam = (rendererIndex, paramIndex, value) => {
|
||||
|
||||
return {
|
||||
type: actionTypes.CHANGE_PARAM,
|
||||
rendererIndex, paramIndex, value
|
||||
};
|
||||
}
|
||||
|
||||
export const loadDownloadData = (data) => ({
|
||||
type: actionTypes.LOAD_DOWNLOAD_DATA,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import '../Qrcode.css';
|
||||
import {handleLink} from "../../utils/gaHelper";
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
|
|
@ -13,26 +14,26 @@ const PartFooter = () => (
|
|||
rel="noopener noreferrer"
|
||||
target="_blank">ciaochaos
|
||||
</a> 
|
||||
<a href="https://github.com/CPunisher/"
|
||||
<a onClick={ (e) => handleLink(e.target.href) } href="https://github.com/CPunisher/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank">CPunisher
|
||||
</a>
|
||||
<span className="gray"> 丨 </span>
|
||||
<span><a href="https://www.yuque.com/qrbtf/docs/contact" rel="noopener noreferrer" target="_blank">联系我们</a><span className="gray"> 丨 </span></span>
|
||||
<span><a href="https://www.yuque.com/qrbtf/docs/coop" rel="noopener noreferrer" target="_blank">合作咨询</a></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"> 丨 </span></span>
|
||||
<span><a onClick={ (e) => handleLink(e.target.href) } href="https://www.yuque.com/qrbtf/docs/coop" rel="noopener noreferrer" target="_blank">合作咨询</a></span>
|
||||
</div>
|
||||
|
||||
<div className="Qr-footer-part">
|
||||
<strong>更多产品</strong> 
|
||||
<span><a href="https://mdnice.com" rel="noopener noreferrer" target="_blank">mdnice 公众号排版</a><span className="gray"> 丨 </span></span>
|
||||
<span><a href="https://urlify.cn/" rel="noopener noreferrer" target="_blank">Urlify 短链接</a><span className="gray"> 丨 </span></span>
|
||||
<span><a href="https://imgkr.com/" rel="noopener noreferrer" target="_blank">imgkr 图壳图床</a><span className="gray"> 丨 </span></span>
|
||||
<span><a href="https://blog.ciaochaos.com/mpmath/" rel="noopener noreferrer" target="_blank">mpMath 公众号公式插件</a></span>
|
||||
<span><a onClick={ (e) => handleLink(e.target.href) } href="https://mdnice.com" rel="noopener noreferrer" target="_blank">mdnice 公众号排版</a><span className="gray"> 丨 </span></span>
|
||||
<span><a onClick={ (e) => handleLink(e.target.href) } href="https://urlify.cn/" rel="noopener noreferrer" target="_blank">Urlify 短链接</a><span className="gray"> 丨 </span></span>
|
||||
<span><a onClick={ (e) => handleLink(e.target.href) } href="https://imgkr.com/" rel="noopener noreferrer" target="_blank">imgkr 图壳图床</a><span className="gray"> 丨 </span></span>
|
||||
<span><a onClick={ (e) => handleLink(e.target.href) } href="https://blog.ciaochaos.com/mpmath/" rel="noopener noreferrer" target="_blank">mpMath 公众号公式插件</a></span>
|
||||
</div>
|
||||
|
||||
<div className="Gray">
|
||||
Copyright © {currentYear} QRBTF. 保留所有权利。<br />
|
||||
<a href="http://www.beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">
|
||||
<a onClick={ (e) => handleLink(e.target.href) } href="http://www.beian.miit.gov.cn/" rel="noopener noreferrer" target="_blank">
|
||||
浙
|
||||
ICP 备 19005869 号
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -2,6 +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";
|
||||
|
||||
const PartMore = () => (
|
||||
<div className="Qr-titled-nobg">
|
||||
|
|
@ -11,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 href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</a>。</p>
|
||||
<p><b>2020.5.23</b><br/>网站开源啦！<a href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</a> 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 <a href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～</a>。</p>
|
||||
<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.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.22</b><br/>新增 C2 样式、下载计数（好像还不太稳定）、普通二维码上传、颜色选择、背景图片上传、输入提示、桌面端横向滚动提示。</p>
|
||||
<h2>为什么要做一个二维码生成器？</h2>
|
||||
<p>看这里，<a href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码</a> 这篇文章简要介绍了我们的初心与愿景。</p>
|
||||
<p>看这里，<a onClick={ (e) => handleLink(e.target.href) } href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码</a> 这篇文章简要介绍了我们的初心与愿景。</p>
|
||||
<h2>这个生成器的特别之处在哪里？</h2>
|
||||
<p>普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 <b>丰富的参数化样式、基于 SVG 的二维码生成能力</b>，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 SVG 有较好的拓展性，可以完美兼容矢量制图流程。</p>
|
||||
<h2>如何使用？</h2>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import React from "react";
|
||||
import PropTypes from 'prop-types'
|
||||
import '../Qrcode.css';
|
||||
import {handleLink} from "../../utils/gaHelper";
|
||||
|
||||
const LinkButton = ({ href, value }) => (
|
||||
<a href={href} rel="noopener noreferrer" target="_blank">
|
||||
<a onClick={ (e) => handleLink(e.target.href) } href={href} rel="noopener noreferrer" target="_blank">
|
||||
<button className="dl-btn">{value}</button>
|
||||
</a>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {genQRInfo} from "../../actions";
|
|||
import React, {useRef} from "react";
|
||||
import {isPicture} from "../../utils/imageUtils";
|
||||
import {decodeData} from "../../utils/qrcodeHandler";
|
||||
import {handleUpload} from "../../utils/gaHelper";
|
||||
|
||||
const InputText = ({dispatch}) => {
|
||||
const textRef = useRef();
|
||||
|
|
@ -36,6 +37,7 @@ const InputText = ({dispatch}) => {
|
|||
if (e.target.files.length > 0) {
|
||||
const file = e.target.files[0];
|
||||
if (isPicture(file)) {
|
||||
handleUpload();
|
||||
decodeData(file).then((res) => {
|
||||
if (res) {
|
||||
textRef.current.value = res.data;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import PartDownload from "../../components/app/PartDownload";
|
|||
import {saveImg, saveSvg} from "../../utils/downloader";
|
||||
import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/db";
|
||||
import {getParamDetailedValue, outerHtml} from "../../utils/util";
|
||||
import {handleDownloadEvent} from "../../utils/gaHelper";
|
||||
|
||||
function saveDB(state, type, updateDownloadData) {
|
||||
return new Promise(resolve => {
|
||||
|
|
@ -41,11 +42,13 @@ const mapStateToProps = (state, ownProps) => ({
|
|||
onSvgDownload: () => {
|
||||
saveSvg(state.value, outerHtml(state.selectedIndex));
|
||||
saveDB(state, 'svg', ownProps.updateDownloadData);
|
||||
handleDownloadEvent(state.value, 0);
|
||||
},
|
||||
onJpgDownload: () => {
|
||||
return new Promise(resolve => {
|
||||
saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500).then((res) => {
|
||||
saveDB(state, 'jpg', ownProps.updateDownloadData).then(() => {
|
||||
handleDownloadEvent(state.value, 1);
|
||||
resolve(res)
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { connect } from 'react-redux';
|
|||
import {changeParam} from "../../actions";
|
||||
import ParamUpload from "../../components/param/ParamUpload";
|
||||
import {isPicture, toBase64} from "../../utils/imageUtils";
|
||||
import {handleUpload} from "../../utils/gaHelper";
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
rendererIndex: ownProps.rendererIndex,
|
||||
|
|
@ -15,6 +16,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
|
|||
if (e.target.files.length > 0) {
|
||||
const file = e.target.files[0];
|
||||
if (isPicture(file)) {
|
||||
handleUpload();
|
||||
toBase64(file, 500, 500).then(res => {
|
||||
dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, res))
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import ReactGA from "react-ga";
|
||||
|
||||
export function handleStyle(rendererName) {
|
||||
ReactGA.event({
|
||||
category: 'Style',
|
||||
action: 'Switch',
|
||||
label: rendererName
|
||||
});
|
||||
}
|
||||
|
||||
export function handleDownloadEvent(rendererName, value) {
|
||||
ReactGA.event({
|
||||
category: 'Style',
|
||||
action: 'Download',
|
||||
label: rendererName,
|
||||
value: value
|
||||
});
|
||||
}
|
||||
|
||||
export function handleParam(rendererName, paramName) {
|
||||
ReactGA.event({
|
||||
category: 'Param',
|
||||
action: rendererName,
|
||||
label: paramName,
|
||||
});
|
||||
}
|
||||
|
||||
export function handleLink(link) {
|
||||
ReactGA.event({
|
||||
category: 'Link',
|
||||
action: 'Click',
|
||||
label: link,
|
||||
});
|
||||
}
|
||||
|
||||
export function handleUpload() {
|
||||
ReactGA.event({
|
||||
category: 'Upload',
|
||||
action: 'Click',
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue