diff --git a/src/component/ImageHosting/AliOSS.js b/src/component/ImageHosting/AliOSS.js
index 6c97c88..63c2a83 100644
--- a/src/component/ImageHosting/AliOSS.js
+++ b/src/component/ImageHosting/AliOSS.js
@@ -1,15 +1,15 @@
-import React, {Component} from "react";
-import {observer, inject} from "mobx-react";
-import {Input, Form} from "antd";
-import {ALIOSS_IMAGE_HOSTING} from "../../utils/constant";
+import React, { Component } from "react";
+import { observer, inject } from "mobx-react";
+import { Input, Form } from "antd";
+import { ALIOSS_IMAGE_HOSTING } from "../../utils/constant";
const formItemLayout = {
labelCol: {
- xs: {span: 6},
+ xs: { span: 6 }
},
wrapperCol: {
- xs: {span: 16},
- },
+ xs: { span: 16 }
+ }
};
@inject("imageHosting")
@@ -20,56 +20,73 @@ class AliOSS extends Component {
// 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(ALIOSS_IMAGE_HOSTING));
this.state = {
- imageHosting,
+ imageHosting
};
}
- regionChange = (e) => {
- const {imageHosting} = this.state;
+ regionChange = e => {
+ const { imageHosting } = this.state;
imageHosting.region = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- accessKeyIdChange = (e) => {
- const {imageHosting} = this.state;
+ accessKeyIdChange = e => {
+ const { imageHosting } = this.state;
imageHosting.accessKeyId = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- accessKeySecretChange = (e) => {
- const {imageHosting} = this.state;
+ accessKeySecretChange = e => {
+ const { imageHosting } = this.state;
imageHosting.accessKeySecret = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- bucketChange = (e) => {
- const {imageHosting} = this.state;
+ bucketChange = e => {
+ const { imageHosting } = this.state;
imageHosting.bucket = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
render() {
- const {region, accessKeyId, accessKeySecret, bucket} = this.state.imageHosting;
+ const {
+ region,
+ accessKeyId,
+ accessKeySecret,
+ bucket
+ } = this.state.imageHosting;
return (
-
+
-
+
-
+
@@ -77,7 +94,7 @@ class AliOSS extends Component {
阿里云图床配置文档
@@ -89,8 +106,8 @@ class AliOSS extends Component {
const style = {
formItem: {
- marginBottom: "10px",
- },
+ marginBottom: "10px"
+ }
};
export default AliOSS;
diff --git a/src/component/ImageHosting/GitHub.js b/src/component/ImageHosting/GitHub.js
index acc9e89..e84c634 100644
--- a/src/component/ImageHosting/GitHub.js
+++ b/src/component/ImageHosting/GitHub.js
@@ -1,15 +1,15 @@
-import React, {Component} from "react";
-import {observer, inject} from "mobx-react";
-import {Input, Form, Checkbox} from "antd";
-import {GITHUB_IMAGE_HOSTING} from "../../utils/constant";
+import React, { Component } from "react";
+import { observer, inject } from "mobx-react";
+import { Input, Form, Checkbox } from "antd";
+import { GITHUB_IMAGE_HOSTING } from "../../utils/constant";
const formItemLayout = {
labelCol: {
- xs: {span: 6},
+ xs: { span: 6 }
},
wrapperCol: {
- xs: {span: 16},
- },
+ xs: { span: 16 }
+ }
};
@inject("imageHosting")
@@ -20,54 +20,69 @@ class Gitee extends Component {
// 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(GITHUB_IMAGE_HOSTING));
this.state = {
- imageHosting,
+ imageHosting
};
}
- usernameChange = (e) => {
- const {imageHosting} = this.state;
+ usernameChange = e => {
+ const { imageHosting } = this.state;
imageHosting.username = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- repoChange = (e) => {
- const {imageHosting} = this.state;
+ repoChange = e => {
+ const { imageHosting } = this.state;
imageHosting.repo = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- tokenChange = (e) => {
- const {imageHosting} = this.state;
+ tokenChange = e => {
+ const { imageHosting } = this.state;
imageHosting.token = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- jsdelivrChange = (e) => {
- const {imageHosting} = this.state;
+ jsdelivrChange = e => {
+ const { imageHosting } = this.state;
imageHosting.jsdelivr = e.target.checked ? "true" : "false";
console.log(imageHosting);
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
render() {
- const {username, repo, token, jsdelivr} = this.state.imageHosting;
+ const { username, repo, token, jsdelivr } = this.state.imageHosting;
return (
-
+
-
+
-
+
-
+
(强烈建议开启,加速图片)
@@ -76,7 +91,7 @@ class Gitee extends Component {
GitHub图床配置文档
@@ -88,8 +103,8 @@ class Gitee extends Component {
const style = {
formItem: {
- marginBottom: "10px",
- },
+ marginBottom: "10px"
+ }
};
export default Gitee;
diff --git a/src/component/ImageHosting/Gitee.js b/src/component/ImageHosting/Gitee.js
index f8b5123..0c21015 100644
--- a/src/component/ImageHosting/Gitee.js
+++ b/src/component/ImageHosting/Gitee.js
@@ -1,15 +1,15 @@
-import React, {Component} from "react";
-import {observer, inject} from "mobx-react";
-import {Input, Form} from "antd";
-import {GITEE_IMAGE_HOSTING} from "../../utils/constant";
+import React, { Component } from "react";
+import { observer, inject } from "mobx-react";
+import { Input, Form } from "antd";
+import { GITEE_IMAGE_HOSTING } from "../../utils/constant";
const formItemLayout = {
labelCol: {
- xs: {span: 6},
+ xs: { span: 6 }
},
wrapperCol: {
- xs: {span: 16},
- },
+ xs: { span: 16 }
+ }
};
@inject("imageHosting")
@@ -20,50 +20,62 @@ class Gitee extends Component {
// 从localstorage里面读取
const imageHosting = JSON.parse(localStorage.getItem(GITEE_IMAGE_HOSTING));
this.state = {
- imageHosting,
+ imageHosting
};
}
- usernameChange = (e) => {
- const {imageHosting} = this.state;
+ usernameChange = e => {
+ const { imageHosting } = this.state;
imageHosting.username = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- repoChange = (e) => {
- const {imageHosting} = this.state;
+ repoChange = e => {
+ const { imageHosting } = this.state;
imageHosting.repo = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- tokenChange = (e) => {
- const {imageHosting} = this.state;
+ tokenChange = e => {
+ const { imageHosting } = this.state;
imageHosting.token = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
render() {
- const {username, repo, token} = this.state.imageHosting;
+ const { username, repo, token } = this.state.imageHosting;
return (
-
+
-
+
-
+
配置后请在右上角进行切换,
Gitee 图床配置文档
@@ -75,8 +87,8 @@ class Gitee extends Component {
const style = {
formItem: {
- marginBottom: "10px",
- },
+ marginBottom: "10px"
+ }
};
export default Gitee;
diff --git a/src/component/ImageHosting/QiniuOSS.js b/src/component/ImageHosting/QiniuOSS.js
index 39c8917..88c2925 100644
--- a/src/component/ImageHosting/QiniuOSS.js
+++ b/src/component/ImageHosting/QiniuOSS.js
@@ -1,16 +1,16 @@
-import React, {Component} from "react";
-import {observer, inject} from "mobx-react";
-import {Input, Select, Form} from "antd";
-import {QINIUOSS_IMAGE_HOSTING} from "../../utils/constant";
+import React, { Component } from "react";
+import { observer, inject } from "mobx-react";
+import { Input, Select, Form } from "antd";
+import { QINIUOSS_IMAGE_HOSTING } from "../../utils/constant";
-const {Option} = Select;
+const { Option } = Select;
const formItemLayout = {
labelCol: {
- xs: {span: 6},
+ xs: { span: 6 }
},
wrapperCol: {
- xs: {span: 16},
- },
+ xs: { span: 16 }
+ }
};
@inject("imageHosting")
@@ -19,68 +19,84 @@ class QiniuOSS extends Component {
constructor(props) {
super(props);
// 从localstorage里面读取
- const imageHosting = JSON.parse(localStorage.getItem(QINIUOSS_IMAGE_HOSTING));
+ const imageHosting = JSON.parse(
+ localStorage.getItem(QINIUOSS_IMAGE_HOSTING)
+ );
const link = imageHosting.domain.split("://")[1];
this.state = {
imageHosting,
- link,
+ link
};
}
- regionChange = (value) => {
- const {imageHosting} = this.state;
+ regionChange = value => {
+ const { imageHosting } = this.state;
imageHosting.region = value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- accessKeyChange = (e) => {
- const {imageHosting} = this.state;
+ accessKeyChange = e => {
+ const { imageHosting } = this.state;
imageHosting.accessKey = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- secretKeyChange = (e) => {
- const {imageHosting} = this.state;
+ secretKeyChange = e => {
+ const { imageHosting } = this.state;
imageHosting.secretKey = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- bucketChange = (e) => {
- const {imageHosting} = this.state;
+ bucketChange = e => {
+ const { imageHosting } = this.state;
imageHosting.bucket = e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- linkChange = (e) => {
- this.setState({link: e.target.value});
+ linkChange = e => {
+ this.setState({ link: e.target.value });
- const {imageHosting} = this.state;
+ const { imageHosting } = this.state;
imageHosting.domain = "https://" + e.target.value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
- namespaceChange = ({target: {value}}) => {
- const {imageHosting} = this.state;
+ namespaceChange = ({ target: { value } }) => {
+ const { imageHosting } = this.state;
imageHosting.namespace = value;
- this.setState({imageHosting});
+ this.setState({ imageHosting });
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
};
render() {
- const {region, accessKey, secretKey, bucket, namespace} = this.state.imageHosting;
- const {link} = this.state;
+ const {
+ region,
+ accessKey,
+ secretKey,
+ bucket,
+ namespace
+ } = this.state.imageHosting;
+ const { link } = this.state;
return (
-
+
-
-
+
-
+
-
+
-
+
配置后请在右上角进行切换,
七牛云图床配置文档
@@ -117,8 +150,8 @@ class QiniuOSS extends Component {
const style = {
formItem: {
- marginBottom: "10px",
- },
+ marginBottom: "10px"
+ }
};
export default QiniuOSS;
diff --git a/src/index.css b/src/index.css
index a1fd52b..bf12c7f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -97,10 +97,35 @@ code {
font-weight: bolder;
}
+.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
+ background-color: #f6f6f6;
+}
+
+.ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover {
+ border-color: #4a148c;
+}
+
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
color: #4a148c;
}
.ant-tabs-nav .ant-tabs-tab:hover {
color: #8E24AA;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner {
+ background-color: #4a148c;
+ border-color: #4a148c;
+}
+
+.ant-checkbox-input:focus+.ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
+ border-color: #4a148c;
+}
+
+a {
+ color: #4a148c;
+}
+
+a:hover, a:active {
+ color: #8E24AA;
}
\ No newline at end of file
diff --git a/stories/allImageHosting.js b/stories/allImageHosting.js
index 101680c..f4a490a 100644
--- a/stories/allImageHosting.js
+++ b/stories/allImageHosting.js
@@ -4,7 +4,7 @@ import MarkdownNice from "../lib/Lib";
// 编辑器默认的内容
const defaultText = `编辑器默认的内容`;
// 标题,是一个字符串
-const defaultTitle = "Markdown Nice";
+const defaultTitle = "Markdown";
// 自定义图床参数
const useImageHosting = {