From 32f4c649ec01411db477d61eb3918093c909ada1 Mon Sep 17 00:00:00 2001
From: liushuang <liushuang@zalldigital.cn>
Date: Wed, 7 Aug 2024 23:12:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/ImageHosting/AliOSS.js   |  73 ++++++++++------
 src/component/ImageHosting/GitHub.js   |  71 ++++++++++------
 src/component/ImageHosting/Gitee.js    |  60 +++++++------
 src/component/ImageHosting/QiniuOSS.js | 113 ++++++++++++++++---------
 src/index.css                          |  25 ++++++
 stories/allImageHosting.js             |   2 +-
 6 files changed, 223 insertions(+), 121 deletions(-)

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 (
       <Form {...formItemLayout}>
         <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 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 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 label="AccessKey Secret" style={style.formItem}>
           <Input
             value={accessKeySecret}
             onChange={this.accessKeySecretChange}
-            placeholder="例如：qweASDF1234zxcvbqweASD"
+            placeholder="例如：we23df2ae2fdw423"
           />
         </Form.Item>
         <Form.Item label="提示" style={style.formItem}>
@@ -77,7 +94,7 @@ class AliOSS extends Component {
           <a
             rel="noopener noreferrer"
             target="_blank"
-            href="https://preview.mdnice.com/article/developer/aliyun-image-hosting/"
+            href="https://doc.luckday.cn"
           >
             阿里云图床配置文档
           </a>
@@ -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 (
       <Form {...formItemLayout}>
         <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 label="仓库名" style={style.formItem}>
-          <Input value={repo} onChange={this.repoChange} placeholder="例如：picture" />
+          <Input
+            value={repo}
+            onChange={this.repoChange}
+            placeholder="例如：picture"
+          />
         </Form.Item>
         <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 label="jsDelivr CDN" style={style.formItem}>
-          <Checkbox checked={jsdelivr === "true"} onChange={this.jsdelivrChange}>
+          <Checkbox
+            checked={jsdelivr === "true"}
+            onChange={this.jsdelivrChange}
+          >
             （强烈建议开启，加速图片）
           </Checkbox>
         </Form.Item>
@@ -76,7 +91,7 @@ class Gitee extends Component {
           <a
             rel="noopener noreferrer"
             target="_blank"
-            href="https://preview.mdnice.com/article/developer/github-image-hosting/"
+            href="https://doc.luckday.cn"
           >
             GitHub图床配置文档
           </a>
@@ -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 (
       <Form {...formItemLayout}>
         <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 label="仓库名" style={style.formItem}>
-          <Input value={repo} onChange={this.repoChange} placeholder="例如：picture" />
+          <Input
+            value={repo}
+            onChange={this.repoChange}
+            placeholder="例如：picture"
+          />
         </Form.Item>
         <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 label="提示" style={style.formItem}>
           <span>配置后请在右上角进行切换，</span>
           <a
             rel="noopener noreferrer"
             target="_blank"
-            href="https://preview.mdnice.com/article/developer/gitee-image-hosting/"
+            href="https://doc.luckday.cn"
           >
             Gitee 图床配置文档
           </a>
@@ -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 (
       <Form {...formItemLayout}>
         <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 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="z1">华北</Option>
             <Option value="z2">华南</Option>
@@ -89,23 +105,40 @@ class QiniuOSS extends Component {
           </Select>
         </Form.Item>
         <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 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 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 label="自定义命名空间" style={style.formItem}>
-          <Input value={namespace} onChange={this.namespaceChange} placeholder="例如：image/" />
+          <Input
+            value={namespace}
+            onChange={this.namespaceChange}
+            placeholder="例如：image/"
+          />
         </Form.Item>
         <Form.Item label="提示" style={style.formItem}>
           <span>配置后请在右上角进行切换，</span>
           <a
             rel="noopener noreferrer"
             target="_blank"
-            href="https://preview.mdnice.com/article/developer/qiniu-image-hosting/"
+            href="https://doc.luckday.cn"
           >
             七牛云图床配置文档
           </a>
@@ -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 = {