提交 2c1d7845 编写于 作者: G guanpengchn

新增版本更新情况

上级 8e0e283f
import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import { Modal } from "antd";
import { Modal, Button } from "antd";
@inject("dialog")
@observer
......@@ -13,6 +13,11 @@ class AboutDialog extends Component {
this.props.dialog.setAboutOpen(false);
};
handleVersion = e => {
this.props.dialog.setAboutOpen(false);
this.props.dialog.setVersionOpen(true);
};
render() {
return (
<Modal
......@@ -22,17 +27,28 @@ class AboutDialog extends Component {
visible={this.props.dialog.isAboutOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={null}
footer={[
<Button onClick={this.handleVersion}>更新记录</Button>,
<Button type="primary" onClick={this.handleOk}>
确认
</Button>
]}
bodyStyle={{
paddingTop: "5px"
}}
>
<h3 style={style.headerMargin}>Markdown Nice</h3>
<p style={style.lineHeight}>一款 Markdown 微信排版工具</p>
<p style={style.lineHeight}>支持图片上传</p>
<p style={style.lineHeight}>支持代码样式</p>
<p style={style.lineHeight}>支持自定义样式</p>
<p style={style.lineHeight}>支持数学公式</p>
<h3 style={style.headerMargin}>
Markdown Nice
<img
alt=""
style={style.img}
src="https://badgen.net/github/stars/zhning12/markdown-nice"
/>
</h3>
<p style={style.lineHeight}>支持自定义样式的 Markdown 编辑器</p>
<p style={style.lineHeight}>支持微信公众号排版</p>
<p style={style.lineHeight}>支持知乎掘金博客园和CSDN等平台</p>
<h3 style={style.headerMargin}>我们</h3>
<p style={style.lineHeight}>
如果你喜欢我们的工具欢迎关注
......@@ -41,10 +57,11 @@ class AboutDialog extends Component {
target="_blank"
href="https://github.com/zhning12/markdown-nice"
>
&nbsp;GitHub&nbsp;
&nbsp;GitHub&nbsp;
</a>
和新项目
和新项目
<a
style={style.a}
rel="noopener noreferrer"
target="_blank"
href="https://github.com/guanpengchn/markdown-resume"
......@@ -52,15 +69,15 @@ class AboutDialog extends Component {
&nbsp;Markdown 简历
</a>
愿意
<strong>微信打赏</strong>就更好啦
<strong style={style.strong}>微信打赏</strong>就更好啦
</p>
<div style={{display: "flex",}}>
<img
alt="图片描述"
style={style.imgWidth}
src="https://i.loli.net/2019/03/31/5ca08c7d19872.png"
/>
{/* <img
<div style={{ display: "flex" }}>
<img
alt="图片描述"
style={style.imgWidth}
src="https://i.loli.net/2019/03/31/5ca08c7d19872.png"
/>
{/* <img
alt="图片描述"
style={style.imgWidth}
src="https://i.loli.net/2019/03/31/5ca095dfa4714.png"
......@@ -78,11 +95,19 @@ const style = {
},
headerMargin: {
marginTop: "5px",
marginBottom: "5px"
marginBottom: "5px",
color: "black"
},
lineHeight: {
lineHeight: "26px",
padding: 0
color: "black",
padding: 0,
margin: 0
},
img: {
width: "70px",
marginLeft: "10px",
display: "inline-block"
}
};
......
import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import { Modal, Timeline, Button } from "antd";
import { VERSION_TIMELINE } from "../../utils/constant";
@inject("dialog")
@inject("content")
@observer
class LinkDialog extends Component {
handleOk = e => {
this.props.dialog.setVersionOpen(false);
};
handleCancel = e => {
this.props.dialog.setVersionOpen(false);
};
handleMore = e => {
const w = window.open("about:blank");
w.location.href = "https://github.com/zhning12/markdown-nice";
};
render() {
return (
<Modal
title="版本更新"
visible={this.props.dialog.isVersionOpen}
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button onClick={this.handleMore}>更多</Button>,
<Button type="primary" onClick={this.handleOk}>
确认
</Button>
]}
>
<Timeline>
{VERSION_TIMELINE.map((version, index) => {
if (index === 0) {
return (
<Timeline.Item>
<strong>{version}</strong>
</Timeline.Item>
);
} else {
return <Timeline.Item>{version}</Timeline.Item>;
}
})}
</Timeline>
</Modal>
);
}
}
export default LinkDialog;
......@@ -2,6 +2,7 @@ import React, { Component } from "react";
import ImageDialog from "../component/Dialog/ImageDialog"
import LinkDialog from "../component/Dialog/LinkDialog"
import AboutDialog from "../component/Dialog/AboutDialog";
import VersionDialog from "../component/Dialog/VersionDialog";
class Dialog extends Component {
......@@ -11,6 +12,7 @@ class Dialog extends Component {
<ImageDialog />
<LinkDialog />
<AboutDialog />
<VersionDialog />
</div>
);
}
......
import { observable, action } from "mobx";
import { VERSION, VERSION_NUM } from '../utils/constant'
class Dialog {
@observable isImageOpen = false;
@observable isLinkOpen = false;
@observable isAboutOpen = false;
@observable isVersionOpen = false;
@action
setImageOpen = isImageOpen => {
......@@ -19,8 +21,20 @@ class Dialog {
setAboutOpen = isAboutOpen => {
this.isAboutOpen = isAboutOpen;
};
@action
setVersionOpen = isVersionOpen => {
this.isVersionOpen = isVersionOpen;
};
}
const store = new Dialog();
const isVersionDiff = localStorage.getItem(VERSION) !== VERSION_NUM;
if(isVersionDiff) {
store.isVersionOpen = true;
localStorage.setItem(VERSION, VERSION_NUM);
}
export default store;
......@@ -178,7 +178,7 @@ img {
/*图片*/
figure {
mairgin: 0;
margin: 0;
margin-top: 10px;
margin-bottom: 10px;
}
......
......@@ -17,12 +17,15 @@ export const CONTENT = "content";
export const STYLE = "style";
export const TEMPLATE_NUM = "template_num";
export const CODE_NUM = "code_num";
export const VERSION = 'version';
export const BASIC_THEME_ID = "basic-theme";
export const CODE_THEME_ID = "code-theme";
export const MARKDOWN_THEME_ID = "markdown-theme";
export const FONT_THEME_ID = "font-theme";
export const VERSION_NUM = '1.0.0';
export const ENTER_DELAY = 0.5;
export const LEAVE_DELAY = 0.0;
......@@ -100,4 +103,11 @@ export const CODE_OPTIONS = [
id: "xcode",
name: "xcode"
}
];
\ No newline at end of file
];
export const VERSION_TIMELINE = [
"2019-08-07 新增主题「绿意」与「wechat-format」",
"2019-07-13 新增主题「嫩青」",
"2019-05-08 v0.1.0版本发布",
"2019-02-02 第一次提交"
]
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册