调整样式
This commit is contained in:
parent
2351f3e12d
commit
32f4c649ec
@ -1,15 +1,15 @@
|
|||||||
import React, {Component} from "react";
|
import React, { Component } from "react";
|
||||||
import {observer, inject} from "mobx-react";
|
import { observer, inject } from "mobx-react";
|
||||||
import {Input, Form} from "antd";
|
import { Input, Form } from "antd";
|
||||||
import {ALIOSS_IMAGE_HOSTING} from "../../utils/constant";
|
import { ALIOSS_IMAGE_HOSTING } from "../../utils/constant";
|
||||||
|
|
||||||
const formItemLayout = {
|
const formItemLayout = {
|
||||||
labelCol: {
|
labelCol: {
|
||||||
xs: {span: 6},
|
xs: { span: 6 }
|
||||||
},
|
},
|
||||||
wrapperCol: {
|
wrapperCol: {
|
||||||
xs: {span: 16},
|
xs: { span: 16 }
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@inject("imageHosting")
|
@inject("imageHosting")
|
||||||
@ -20,56 +20,73 @@ class AliOSS extends Component {
|
|||||||
// 从localstorage里面读取
|
// 从localstorage里面读取
|
||||||
const imageHosting = JSON.parse(localStorage.getItem(ALIOSS_IMAGE_HOSTING));
|
const imageHosting = JSON.parse(localStorage.getItem(ALIOSS_IMAGE_HOSTING));
|
||||||
this.state = {
|
this.state = {
|
||||||
imageHosting,
|
imageHosting
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
regionChange = (e) => {
|
regionChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.region = e.target.value;
|
imageHosting.region = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
accessKeyIdChange = (e) => {
|
accessKeyIdChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.accessKeyId = e.target.value;
|
imageHosting.accessKeyId = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
accessKeySecretChange = (e) => {
|
accessKeySecretChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.accessKeySecret = e.target.value;
|
imageHosting.accessKeySecret = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
bucketChange = (e) => {
|
bucketChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.bucket = e.target.value;
|
imageHosting.bucket = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {region, accessKeyId, accessKeySecret, bucket} = this.state.imageHosting;
|
const {
|
||||||
|
region,
|
||||||
|
accessKeyId,
|
||||||
|
accessKeySecret,
|
||||||
|
bucket
|
||||||
|
} = this.state.imageHosting;
|
||||||
return (
|
return (
|
||||||
<Form {...formItemLayout}>
|
<Form {...formItemLayout}>
|
||||||
<Form.Item label="Bucket" style={style.formItem}>
|
<Form.Item label="Bucket" style={style.formItem}>
|
||||||
<Input value={bucket} onChange={this.bucketChange} placeholder="例如:my-wechat" />
|
<Input
|
||||||
|
value={bucket}
|
||||||
|
onChange={this.bucketChange}
|
||||||
|
placeholder="例如:images"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="Region" style={style.formItem}>
|
<Form.Item label="Region" style={style.formItem}>
|
||||||
<Input value={region} onChange={this.regionChange} placeholder="例如:oss-cn-hangzhou" />
|
<Input
|
||||||
|
value={region}
|
||||||
|
onChange={this.regionChange}
|
||||||
|
placeholder="例如:oss"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="AccessKey ID" style={style.formItem}>
|
<Form.Item label="AccessKey ID" style={style.formItem}>
|
||||||
<Input value={accessKeyId} onChange={this.accessKeyIdChange} placeholder="例如:qweASDF1234zxcvb" />
|
<Input
|
||||||
|
value={accessKeyId}
|
||||||
|
onChange={this.accessKeyIdChange}
|
||||||
|
placeholder="例如:2fsae2fasddfq34gi"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="AccessKey Secret" style={style.formItem}>
|
<Form.Item label="AccessKey Secret" style={style.formItem}>
|
||||||
<Input
|
<Input
|
||||||
value={accessKeySecret}
|
value={accessKeySecret}
|
||||||
onChange={this.accessKeySecretChange}
|
onChange={this.accessKeySecretChange}
|
||||||
placeholder="例如:qweASDF1234zxcvbqweASD"
|
placeholder="例如:we23df2ae2fdw423"
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="提示" style={style.formItem}>
|
<Form.Item label="提示" style={style.formItem}>
|
||||||
@ -77,7 +94,7 @@ class AliOSS extends Component {
|
|||||||
<a
|
<a
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://preview.mdnice.com/article/developer/aliyun-image-hosting/"
|
href="https://doc.luckday.cn"
|
||||||
>
|
>
|
||||||
阿里云图床配置文档
|
阿里云图床配置文档
|
||||||
</a>
|
</a>
|
||||||
@ -89,8 +106,8 @@ class AliOSS extends Component {
|
|||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
formItem: {
|
formItem: {
|
||||||
marginBottom: "10px",
|
marginBottom: "10px"
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AliOSS;
|
export default AliOSS;
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
import React, {Component} from "react";
|
import React, { Component } from "react";
|
||||||
import {observer, inject} from "mobx-react";
|
import { observer, inject } from "mobx-react";
|
||||||
import {Input, Form, Checkbox} from "antd";
|
import { Input, Form, Checkbox } from "antd";
|
||||||
import {GITHUB_IMAGE_HOSTING} from "../../utils/constant";
|
import { GITHUB_IMAGE_HOSTING } from "../../utils/constant";
|
||||||
|
|
||||||
const formItemLayout = {
|
const formItemLayout = {
|
||||||
labelCol: {
|
labelCol: {
|
||||||
xs: {span: 6},
|
xs: { span: 6 }
|
||||||
},
|
},
|
||||||
wrapperCol: {
|
wrapperCol: {
|
||||||
xs: {span: 16},
|
xs: { span: 16 }
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@inject("imageHosting")
|
@inject("imageHosting")
|
||||||
@ -20,54 +20,69 @@ class Gitee extends Component {
|
|||||||
// 从localstorage里面读取
|
// 从localstorage里面读取
|
||||||
const imageHosting = JSON.parse(localStorage.getItem(GITHUB_IMAGE_HOSTING));
|
const imageHosting = JSON.parse(localStorage.getItem(GITHUB_IMAGE_HOSTING));
|
||||||
this.state = {
|
this.state = {
|
||||||
imageHosting,
|
imageHosting
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
usernameChange = (e) => {
|
usernameChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.username = e.target.value;
|
imageHosting.username = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
repoChange = (e) => {
|
repoChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.repo = e.target.value;
|
imageHosting.repo = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
tokenChange = (e) => {
|
tokenChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.token = e.target.value;
|
imageHosting.token = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
jsdelivrChange = (e) => {
|
jsdelivrChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.jsdelivr = e.target.checked ? "true" : "false";
|
imageHosting.jsdelivr = e.target.checked ? "true" : "false";
|
||||||
console.log(imageHosting);
|
console.log(imageHosting);
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {username, repo, token, jsdelivr} = this.state.imageHosting;
|
const { username, repo, token, jsdelivr } = this.state.imageHosting;
|
||||||
return (
|
return (
|
||||||
<Form {...formItemLayout}>
|
<Form {...formItemLayout}>
|
||||||
<Form.Item label="用户名" style={style.formItem}>
|
<Form.Item label="用户名" style={style.formItem}>
|
||||||
<Input value={username} onChange={this.usernameChange} placeholder="例如:mdnice" />
|
<Input
|
||||||
|
value={username}
|
||||||
|
onChange={this.usernameChange}
|
||||||
|
placeholder="例如:luckday"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="仓库名" style={style.formItem}>
|
<Form.Item label="仓库名" style={style.formItem}>
|
||||||
<Input value={repo} onChange={this.repoChange} placeholder="例如:picture" />
|
<Input
|
||||||
|
value={repo}
|
||||||
|
onChange={this.repoChange}
|
||||||
|
placeholder="例如:picture"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="token" style={style.formItem}>
|
<Form.Item label="token" style={style.formItem}>
|
||||||
<Input value={token} onChange={this.tokenChange} placeholder="例如:qweASDF1234zxcvb" />
|
<Input
|
||||||
|
value={token}
|
||||||
|
onChange={this.tokenChange}
|
||||||
|
placeholder="例如:qwewsxABCD1234zxcvb"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="jsDelivr CDN" style={style.formItem}>
|
<Form.Item label="jsDelivr CDN" style={style.formItem}>
|
||||||
<Checkbox checked={jsdelivr === "true"} onChange={this.jsdelivrChange}>
|
<Checkbox
|
||||||
|
checked={jsdelivr === "true"}
|
||||||
|
onChange={this.jsdelivrChange}
|
||||||
|
>
|
||||||
(强烈建议开启,加速图片)
|
(强烈建议开启,加速图片)
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
@ -76,7 +91,7 @@ class Gitee extends Component {
|
|||||||
<a
|
<a
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://preview.mdnice.com/article/developer/github-image-hosting/"
|
href="https://doc.luckday.cn"
|
||||||
>
|
>
|
||||||
GitHub图床配置文档
|
GitHub图床配置文档
|
||||||
</a>
|
</a>
|
||||||
@ -88,8 +103,8 @@ class Gitee extends Component {
|
|||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
formItem: {
|
formItem: {
|
||||||
marginBottom: "10px",
|
marginBottom: "10px"
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Gitee;
|
export default Gitee;
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
import React, {Component} from "react";
|
import React, { Component } from "react";
|
||||||
import {observer, inject} from "mobx-react";
|
import { observer, inject } from "mobx-react";
|
||||||
import {Input, Form} from "antd";
|
import { Input, Form } from "antd";
|
||||||
import {GITEE_IMAGE_HOSTING} from "../../utils/constant";
|
import { GITEE_IMAGE_HOSTING } from "../../utils/constant";
|
||||||
|
|
||||||
const formItemLayout = {
|
const formItemLayout = {
|
||||||
labelCol: {
|
labelCol: {
|
||||||
xs: {span: 6},
|
xs: { span: 6 }
|
||||||
},
|
},
|
||||||
wrapperCol: {
|
wrapperCol: {
|
||||||
xs: {span: 16},
|
xs: { span: 16 }
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@inject("imageHosting")
|
@inject("imageHosting")
|
||||||
@ -20,50 +20,62 @@ class Gitee extends Component {
|
|||||||
// 从localstorage里面读取
|
// 从localstorage里面读取
|
||||||
const imageHosting = JSON.parse(localStorage.getItem(GITEE_IMAGE_HOSTING));
|
const imageHosting = JSON.parse(localStorage.getItem(GITEE_IMAGE_HOSTING));
|
||||||
this.state = {
|
this.state = {
|
||||||
imageHosting,
|
imageHosting
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
usernameChange = (e) => {
|
usernameChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.username = e.target.value;
|
imageHosting.username = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
repoChange = (e) => {
|
repoChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.repo = e.target.value;
|
imageHosting.repo = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
tokenChange = (e) => {
|
tokenChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.token = e.target.value;
|
imageHosting.token = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {username, repo, token} = this.state.imageHosting;
|
const { username, repo, token } = this.state.imageHosting;
|
||||||
return (
|
return (
|
||||||
<Form {...formItemLayout}>
|
<Form {...formItemLayout}>
|
||||||
<Form.Item label="用户名" style={style.formItem}>
|
<Form.Item label="用户名" style={style.formItem}>
|
||||||
<Input value={username} onChange={this.usernameChange} placeholder="例如:mdnice" />
|
<Input
|
||||||
|
value={username}
|
||||||
|
onChange={this.usernameChange}
|
||||||
|
placeholder="例如:luckday"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="仓库名" style={style.formItem}>
|
<Form.Item label="仓库名" style={style.formItem}>
|
||||||
<Input value={repo} onChange={this.repoChange} placeholder="例如:picture" />
|
<Input
|
||||||
|
value={repo}
|
||||||
|
onChange={this.repoChange}
|
||||||
|
placeholder="例如:picture"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="token" style={style.formItem}>
|
<Form.Item label="token" style={style.formItem}>
|
||||||
<Input value={token} onChange={this.tokenChange} placeholder="例如:qweASDF1234zxcvb" />
|
<Input
|
||||||
|
value={token}
|
||||||
|
onChange={this.tokenChange}
|
||||||
|
placeholder="例如:adsfwe2fsdf23q44twdf"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="提示" style={style.formItem}>
|
<Form.Item label="提示" style={style.formItem}>
|
||||||
<span>配置后请在右上角进行切换,</span>
|
<span>配置后请在右上角进行切换,</span>
|
||||||
<a
|
<a
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://preview.mdnice.com/article/developer/gitee-image-hosting/"
|
href="https://doc.luckday.cn"
|
||||||
>
|
>
|
||||||
Gitee 图床配置文档
|
Gitee 图床配置文档
|
||||||
</a>
|
</a>
|
||||||
@ -75,8 +87,8 @@ class Gitee extends Component {
|
|||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
formItem: {
|
formItem: {
|
||||||
marginBottom: "10px",
|
marginBottom: "10px"
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Gitee;
|
export default Gitee;
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import React, {Component} from "react";
|
import React, { Component } from "react";
|
||||||
import {observer, inject} from "mobx-react";
|
import { observer, inject } from "mobx-react";
|
||||||
import {Input, Select, Form} from "antd";
|
import { Input, Select, Form } from "antd";
|
||||||
import {QINIUOSS_IMAGE_HOSTING} from "../../utils/constant";
|
import { QINIUOSS_IMAGE_HOSTING } from "../../utils/constant";
|
||||||
|
|
||||||
const {Option} = Select;
|
const { Option } = Select;
|
||||||
const formItemLayout = {
|
const formItemLayout = {
|
||||||
labelCol: {
|
labelCol: {
|
||||||
xs: {span: 6},
|
xs: { span: 6 }
|
||||||
},
|
},
|
||||||
wrapperCol: {
|
wrapperCol: {
|
||||||
xs: {span: 16},
|
xs: { span: 16 }
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@inject("imageHosting")
|
@inject("imageHosting")
|
||||||
@ -19,68 +19,84 @@ class QiniuOSS extends Component {
|
|||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
// 从localstorage里面读取
|
// 从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];
|
const link = imageHosting.domain.split("://")[1];
|
||||||
this.state = {
|
this.state = {
|
||||||
imageHosting,
|
imageHosting,
|
||||||
link,
|
link
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
regionChange = (value) => {
|
regionChange = value => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.region = value;
|
imageHosting.region = value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
accessKeyChange = (e) => {
|
accessKeyChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.accessKey = e.target.value;
|
imageHosting.accessKey = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
secretKeyChange = (e) => {
|
secretKeyChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.secretKey = e.target.value;
|
imageHosting.secretKey = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
bucketChange = (e) => {
|
bucketChange = e => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.bucket = e.target.value;
|
imageHosting.bucket = e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
linkChange = (e) => {
|
linkChange = e => {
|
||||||
this.setState({link: e.target.value});
|
this.setState({ link: e.target.value });
|
||||||
|
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.domain = "https://" + e.target.value;
|
imageHosting.domain = "https://" + e.target.value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
namespaceChange = ({target: {value}}) => {
|
namespaceChange = ({ target: { value } }) => {
|
||||||
const {imageHosting} = this.state;
|
const { imageHosting } = this.state;
|
||||||
imageHosting.namespace = value;
|
imageHosting.namespace = value;
|
||||||
this.setState({imageHosting});
|
this.setState({ imageHosting });
|
||||||
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {region, accessKey, secretKey, bucket, namespace} = this.state.imageHosting;
|
const {
|
||||||
const {link} = this.state;
|
region,
|
||||||
|
accessKey,
|
||||||
|
secretKey,
|
||||||
|
bucket,
|
||||||
|
namespace
|
||||||
|
} = this.state.imageHosting;
|
||||||
|
const { link } = this.state;
|
||||||
return (
|
return (
|
||||||
<Form {...formItemLayout}>
|
<Form {...formItemLayout}>
|
||||||
<Form.Item label="存储空间名称" style={style.formItem}>
|
<Form.Item label="存储空间名称" style={style.formItem}>
|
||||||
<Input value={bucket} onChange={this.bucketChange} placeholder="例如:my-wechat" />
|
<Input
|
||||||
|
value={bucket}
|
||||||
|
onChange={this.bucketChange}
|
||||||
|
placeholder="例如:images"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="存储区域" style={style.formItem}>
|
<Form.Item label="存储区域" style={style.formItem}>
|
||||||
<Select value={region} onChange={this.regionChange} placeholder="例如:qiniu.region.z2">
|
<Select
|
||||||
|
value={region}
|
||||||
|
onChange={this.regionChange}
|
||||||
|
placeholder="例如:qiniu.region.z2"
|
||||||
|
>
|
||||||
<Option value="z0">华东</Option>
|
<Option value="z0">华东</Option>
|
||||||
<Option value="z1">华北</Option>
|
<Option value="z1">华北</Option>
|
||||||
<Option value="z2">华南</Option>
|
<Option value="z2">华南</Option>
|
||||||
@ -89,23 +105,40 @@ class QiniuOSS extends Component {
|
|||||||
</Select>
|
</Select>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="AccessKey" style={style.formItem}>
|
<Form.Item label="AccessKey" style={style.formItem}>
|
||||||
<Input value={accessKey} onChange={this.accessKeyChange} placeholder="例如:qweASDF1234zxcvb" />
|
<Input
|
||||||
|
value={accessKey}
|
||||||
|
onChange={this.accessKeyChange}
|
||||||
|
placeholder="例如:asdfq2e2fa224t235t"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="SecretKey" style={style.formItem}>
|
<Form.Item label="SecretKey" style={style.formItem}>
|
||||||
<Input value={secretKey} onChange={this.secretKeyChange} placeholder="例如:qweASDF1234zxcvbqweASD" />
|
<Input
|
||||||
|
value={secretKey}
|
||||||
|
onChange={this.secretKeyChange}
|
||||||
|
placeholder="例如:34swffdg34y0fg8asdf"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="自定义域名" style={style.formItem}>
|
<Form.Item label="自定义域名" style={style.formItem}>
|
||||||
<Input value={link} onChange={this.linkChange} addonBefore="https://" placeholder="例如:qiniu.mdnice.com" />
|
<Input
|
||||||
|
value={link}
|
||||||
|
onChange={this.linkChange}
|
||||||
|
addonBefore="https://"
|
||||||
|
placeholder="例如:qiniu.luckday.cn"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="自定义命名空间" style={style.formItem}>
|
<Form.Item label="自定义命名空间" style={style.formItem}>
|
||||||
<Input value={namespace} onChange={this.namespaceChange} placeholder="例如:image/" />
|
<Input
|
||||||
|
value={namespace}
|
||||||
|
onChange={this.namespaceChange}
|
||||||
|
placeholder="例如:image/"
|
||||||
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="提示" style={style.formItem}>
|
<Form.Item label="提示" style={style.formItem}>
|
||||||
<span>配置后请在右上角进行切换,</span>
|
<span>配置后请在右上角进行切换,</span>
|
||||||
<a
|
<a
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://preview.mdnice.com/article/developer/qiniu-image-hosting/"
|
href="https://doc.luckday.cn"
|
||||||
>
|
>
|
||||||
七牛云图床配置文档
|
七牛云图床配置文档
|
||||||
</a>
|
</a>
|
||||||
@ -117,8 +150,8 @@ class QiniuOSS extends Component {
|
|||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
formItem: {
|
formItem: {
|
||||||
marginBottom: "10px",
|
marginBottom: "10px"
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default QiniuOSS;
|
export default QiniuOSS;
|
||||||
|
@ -97,6 +97,14 @@ code {
|
|||||||
font-weight: bolder;
|
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 {
|
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
|
||||||
color: #4a148c;
|
color: #4a148c;
|
||||||
}
|
}
|
||||||
@ -104,3 +112,20 @@ code {
|
|||||||
.ant-tabs-nav .ant-tabs-tab:hover {
|
.ant-tabs-nav .ant-tabs-tab:hover {
|
||||||
color: #8E24AA;
|
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;
|
||||||
|
}
|
@ -4,7 +4,7 @@ import MarkdownNice from "../lib/Lib";
|
|||||||
// 编辑器默认的内容
|
// 编辑器默认的内容
|
||||||
const defaultText = `编辑器默认的内容`;
|
const defaultText = `编辑器默认的内容`;
|
||||||
// 标题,是一个字符串
|
// 标题,是一个字符串
|
||||||
const defaultTitle = "Markdown Nice";
|
const defaultTitle = "Markdown";
|
||||||
|
|
||||||
// 自定义图床参数
|
// 自定义图床参数
|
||||||
const useImageHosting = {
|
const useImageHosting = {
|
||||||
|
Loading…
Reference in New Issue
Block a user