调整样式

2024-08-07 23:12:22 +08:00 · 2024-08-07 23:12:22 +08:00 · 32f4c649ec
commit 32f4c649ec
parent 2351f3e12d
6 changed files with 223 additions and 121 deletions
--- 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;
--- 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;
--- 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;
--- 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;
--- a/src/index.css
+++ b/src/index.css
@ -97,6 +97,14 @@ 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;
 }
@ -104,3 +112,20 @@ code {
 .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;
+}
--- 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 = {