调整极客黑样式

2024-08-06 23:50:54 +08:00 · 2024-08-06 23:50:54 +08:00 · 2351f3e12d
commit 2351f3e12d
parent 5a24639b69
8 changed files with 216 additions and 135 deletions
--- a/src/App.css
+++ b/src/App.css
@ -1,77 +1,4 @@
-.ant-btn-primary {
-  color: #fff;
-  background-color: #000;
-  border-color: #000;
-}

-.ant-btn-primary:hover,
-.ant-btn-primary:focus {
-  color: #fff;
-  background-color: #000;
-  border-color: #000;
-}
-
-.ant-btn:hover, .ant-btn:focus {
-  color: #000;
-  background-color: #fff;
-  border-color: #000;
-}
-
-.ant-input:hover, .ant-input:focus {
-  border-color: #000;
-  border-right-width: 1px !important;
-  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
-  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
-}
-
-.ant-select-selection:hover {
-  border-color: #000;
-  border-right-width: 1px !important;
-}
-
-.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active,
-.ant-input-number:focus, .ant-input-number:active , .ant-input-number:hover {
-  border-color: #000;
-  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
-  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
-}
-
-.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
-  background-color: #f1f1f1;
-}
-
-.ant-select-dropdown-menu {
-  margin: 4px;
-  padding: 0;
-}
-
-.ant-select-dropdown-menu-item {
-  border-radius: 4px;
-  margin: 2px 0;
-}
-
-.ant-menu-item-selected {
-  color: #000;
-  /*font-weight: bolder;*/
-}
-
-.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-  background-color: #f6f6f6;
-}
-
-.ant-menu-item {
-  text-align: center;
-  margin-right: 20px;
-}
-
-.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
-  margin-right: 20px;
-}
-
-.ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover {
-  color: #000;
-  font-weight: bolder;
-}

 .nice-app {
  height: 100vh;
--- a/src/component/Dialog/ImageDialog.js
+++ b/src/component/Dialog/ImageDialog.js
@ -1,6 +1,6 @@
-import React, {Component} from "react";
-import {observer, inject} from "mobx-react";
-import {Modal, Upload, Tabs, Select} from "antd";
+import React, { Component } from "react";
+import { observer, inject } from "mobx-react";
+import { Modal, Upload, Tabs, Select } from "antd";

 import SvgIcon from "../../icon";

@ -9,13 +9,17 @@ import QiniuOSS from "../ImageHosting/QiniuOSS";
 import Gitee from "../ImageHosting/Gitee";
 import GitHub from "../ImageHosting/GitHub";

-import {uploadAdaptor} from "../../utils/imageHosting";
-import {SM_MS_PROXY, IMAGE_HOSTING_TYPE, IMAGE_HOSTING_NAMES} from "../../utils/constant";
+import { uploadAdaptor } from "../../utils/imageHosting";
+import {
+  SM_MS_PROXY,
+  IMAGE_HOSTING_TYPE,
+  IMAGE_HOSTING_NAMES
+} from "../../utils/constant";
 import appContext from "../../utils/appContext";

-const {Dragger} = Upload;
-const {TabPane} = Tabs;
-const {Option} = Select;
+const { Dragger } = Upload;
+const { TabPane } = Tabs;
+const { Option } = Select;

@inject("dialog")
@inject("content")
@ -33,17 +37,17 @@ class ImageDialog extends Component {
    let text = "";
    // 成功后添加url
    if (this.props.navbar.isContainImgName) {
-      this.images.forEach((value) => {
+      this.images.forEach(value => {
        text += `![${value.filename}](${value.url})\n`;
      });
    } else {
-      this.images.forEach((value) => {
+      this.images.forEach(value => {
        text += `![](${value.url})\n`;
      });
    }
    // 重新初始化
    this.images = [];
-    const {markdownEditor} = this.props.content;
+    const { markdownEditor } = this.props.content;
    const cursor = markdownEditor.getCursor();
    markdownEditor.replaceSelection(text, cursor);
    // 上传后实时更新内容
@ -60,53 +64,91 @@ class ImageDialog extends Component {
    this.props.dialog.setImageOpen(false);
  };

-  customRequest = ({action, data, file, headers, onError, onProgress, onSuccess, withCredentials}) => {
+  customRequest = ({
+    action,
+    data,
+    file,
+    headers,
+    onError,
+    onProgress,
+    onSuccess,
+    withCredentials
+  }) => {
    const formData = new FormData();
-    const {images} = this;
+    const { images } = this;
    if (data) {
-      Object.keys(data).forEach((key) => {
+      Object.keys(data).forEach(key => {
        formData.append(key, data[key]);
      });
    }
    // 使用阿里云图床
    if (this.props.imageHosting.type === "阿里云") {
-      uploadAdaptor({file, onSuccess, onError, images});
+      uploadAdaptor({ file, onSuccess, onError, images });
    }
    // 使用七牛云图床
    else if (this.props.imageHosting.type === "七牛云") {
-      uploadAdaptor({file, onSuccess, onError, onProgress, images});
+      uploadAdaptor({ file, onSuccess, onError, onProgress, images });
    }
    // 使用SM.MS图床
    else if (this.props.imageHosting.type === "SM.MS") {
-      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials});
+      uploadAdaptor({
+        formData,
+        file,
+        action,
+        onProgress,
+        onSuccess,
+        onError,
+        headers,
+        withCredentials
+      });
    }
    // 使用Gitee图床
    else if (this.props.imageHosting.type === "Gitee") {
-      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials, images});
+      uploadAdaptor({
+        formData,
+        file,
+        action,
+        onProgress,
+        onSuccess,
+        onError,
+        headers,
+        withCredentials,
+        images
+      });
    }
    // 使用GitHub图床
    else if (this.props.imageHosting.type === "GitHub") {
-      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials, images});
+      uploadAdaptor({
+        formData,
+        file,
+        action,
+        onProgress,
+        onSuccess,
+        onError,
+        headers,
+        withCredentials,
+        images
+      });
    }
    // 使用用户提供的图床或是默认mdnice图床
    else {
-      uploadAdaptor({formData, file, onSuccess, onError, images});
+      uploadAdaptor({ formData, file, onSuccess, onError, images });
    }

    return {
      abort() {
        console.log("upload progress is aborted.");
-      },
+      }
    };
  };

-  typeChange = (type) => {
+  typeChange = type => {
    this.props.imageHosting.setType(type);
    window.localStorage.setItem(IMAGE_HOSTING_TYPE, type);
  };

  render() {
-    const {hostingList, type} = this.props.imageHosting;
+    const { hostingList, type } = this.props.imageHosting;

    const columns = hostingList.map((option, index) => (
      <Option key={index} value={option.value}>
@ -115,7 +157,7 @@ class ImageDialog extends Component {
    ));

    const imageHostingSwitch = (
-      <Select style={{width: "90px"}} value={type} onChange={this.typeChange}>
+      <Select style={{ width: "90px" }} value={type} onChange={this.typeChange}>
        {columns}
      </Select>
    );
@ -128,18 +170,31 @@ class ImageDialog extends Component {
        visible={this.props.dialog.isImageOpen}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
-        bodyStyle={{paddingTop: "10px"}}
+        bodyStyle={{ paddingTop: "10px" }}
      >
        <appContext.Consumer>
-          {({useImageHosting}) => (
+          {({ useImageHosting }) => (
            <Tabs tabBarExtraContent={imageHostingSwitch} type="card">
              <TabPane tab="图片上传" key="1">
-                <Dragger name="file" multiple action={SM_MS_PROXY} customRequest={this.customRequest}>
+                <Dragger
+                  name="file"
+                  multiple
+                  action={SM_MS_PROXY}
+                  customRequest={this.customRequest}
+                >
                  <p className="ant-upload-drag-icon">
-                    <SvgIcon name="inbox" style={style.svgIcon} fill="#40a9ff" />
+                    <SvgIcon
+                      name="inbox"
+                      style={style.svgIcon}
+                      fill="#8E24AA"
+                    />
+                  </p>
+                  <p className="ant-upload-text">
+                    点击或拖拽一张或多张照片上传
+                  </p>
+                  <p className="ant-upload-hint">
+                    {"正在使用" + type + "图床"}
                  </p>
-                  <p className="ant-upload-text">点击或拖拽一张或多张照片上传</p>
-                  <p className="ant-upload-hint">{"正在使用" + type + "图床"}</p>
                </Dragger>
              </TabPane>
              {useImageHosting.isAliyunOpen ? (
@ -173,8 +228,8 @@ class ImageDialog extends Component {
 const style = {
  svgIcon: {
    width: "48px",
-    height: "48px",
-  },
+    height: "48px"
+  }
 };

 export default ImageDialog;
--- a/src/icon/index.css
+++ b/src/icon/index.css
@ -3,5 +3,5 @@
 }

 .icon:hover {
-  fill: #40a9ff;
+  fill: #8E24AA;
 }
--- a/src/index.css
+++ b/src/index.css
@ -13,3 +13,94 @@ code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
 }
+
+@font-face {
+  font-display: swap;
+  font-family: Mangueira Alt;
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://cdn.luckday.cn/static/font/mangueira-alt-bold.woff2) format("woff2");
+}
+
+.ant-btn-primary {
+  color: #fff;
+  background-color: #000;
+  border-color: #000;
+}
+
+.ant-btn-primary:hover,
+.ant-btn-primary:focus {
+  color: #fff;
+  background-color: #000;
+  border-color: #000;
+}
+
+.ant-btn:hover, .ant-btn:focus {
+  color: #000;
+  background-color: #fff;
+  border-color: #000;
+}
+
+.ant-input:hover, .ant-input:focus {
+  border-color: #000;
+  border-right-width: 1px !important;
+  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+}
+
+.ant-select-selection:hover {
+  border-color: #000;
+  border-right-width: 1px !important;
+}
+
+.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active,
+.ant-input-number:focus, .ant-input-number:active , .ant-input-number:hover {
+  border-color: #000;
+  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+}
+
+.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
+  background-color: #f1f1f1;
+}
+
+.ant-select-dropdown-menu {
+  margin: 4px;
+  padding: 0;
+}
+
+.ant-select-dropdown-menu-item {
+  border-radius: 4px;
+  margin: 2px 0;
+}
+
+.ant-menu-item-selected {
+  color: #000;
+  /*font-weight: bolder;*/
+}
+
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background-color: #f6f6f6;
+}
+
+.ant-menu-item {
+  text-align: center;
+  margin-right: 20px;
+}
+
+.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+  margin-right: 20px;
+}
+
+.ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover {
+  color: #000;
+  font-weight: bolder;
+}
+
+.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
+  color: #4a148c;
+}
+
+.ant-tabs-nav .ant-tabs-tab:hover {
+  color: #8E24AA;
+}
--- a/src/layout/Footer.js
+++ b/src/layout/Footer.js
@ -1,9 +1,9 @@
-import React, {Component} from "react";
-import {Menu, Dropdown, message} from "antd";
-import {observer, inject} from "mobx-react";
-import {wordCalc} from "../utils/helper";
+import React, { Component } from "react";
+import { Menu, Dropdown, message } from "antd";
+import { observer, inject } from "mobx-react";
+import { wordCalc } from "../utils/helper";
 import SitDownConverter from "../utils/sitdownConverter";
-import {SITDOWN_OPTIONS} from "../utils/constant";
+import { SITDOWN_OPTIONS } from "../utils/constant";
 import SvgIcon from "../icon";

 import "./Footer.css";
@ -16,12 +16,12 @@ class Footer extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      engineDesc: SITDOWN_OPTIONS[0].desc,
+      engineDesc: SITDOWN_OPTIONS[0].desc
    };
  }

  handleMessage = () => {
-    const {pasteHtml, pasteText} = this.props.footer;
+    const { pasteHtml, pasteText } = this.props.footer;
    let toMarkdown = SitDownConverter.GFM;
    switch (this.state.platform) {
      case "csdn":
@ -41,7 +41,7 @@ class Footer extends Component {
        break;
    }
    const markdown = toMarkdown(pasteHtml);
-    const {content} = this.props.content;
+    const { content } = this.props.content;
    const convertContent = content.replace(pasteText, markdown);
    this.props.content.setContent(convertContent);

@ -51,12 +51,12 @@ class Footer extends Component {
    message.success("转换成功！");
  };

-  handleMenu = ({key, domEvent}) => {
+  handleMenu = ({ key, domEvent }) => {
    if (key === "thanks") {
      const w = window.open("about:blank");
      w.location.href = "https://github.com/mdnice/sitdown";
    } else {
-      this.setState({engineDesc: key});
+      this.setState({ engineDesc: key });
    }
    domEvent.stopPropagation();
  };
@ -64,7 +64,7 @@ class Footer extends Component {
  render() {
    const menu = (
      <Menu onClick={this.handleMenu}>
-        {SITDOWN_OPTIONS.map((option) => (
+        {SITDOWN_OPTIONS.map(option => (
          <Menu.Item key={option.desc}>
            <div>{option.value}</div>
          </Menu.Item>
@ -76,9 +76,9 @@ class Footer extends Component {
      </Menu>
    );

-    const {content, themeList} = this.props.content;
-    const {templateNum} = this.props.navbar;
-    const {isPasteHtmlChecked} = this.props.footer;
+    const { content, themeList } = this.props.content;
+    const { templateNum } = this.props.navbar;
+    const { isPasteHtmlChecked } = this.props.footer;

    const lineCount = content.split("\n").length;
    const wordCount = wordCalc(content);
@ -100,17 +100,22 @@ class Footer extends Component {
        {isPasteHtmlChecked && (
          <div className="nice-footer-message" onClick={this.handleMessage}>
            点击使用
-            <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-footer-overlay" placement="topLeft">
+            <Dropdown
+              overlay={menu}
+              trigger={["click"]}
+              overlayClassName="nice-footer-overlay"
+              placement="topLeft"
+            >
              <a
                id="nice-footer-engine"
                className="nice-footer-engine"
                href="#"
-                onClick={(e) => {
+                onClick={e => {
                  e.stopPropagation();
                }}
              >
                {this.state.engineDesc}
-                <SvgIcon name="down" style={style.svgIcon} fill="#40a9ff" />
+                <SvgIcon name="down" style={style.svgIcon} fill="#8E24AA" />
              </a>
            </Dropdown>
            将粘贴的富文本转换为 markdown
@ -124,8 +129,8 @@ class Footer extends Component {
 const style = {
  svgIcon: {
    width: "12px",
-    height: "12px",
-  },
+    height: "12px"
+  }
 };

 export default Footer;
--- a/src/layout/Navbar.css
+++ b/src/layout/Navbar.css
@ -56,8 +56,11 @@
  padding: 0 10px 0 20px;
  font-weight: bold;
  font-size: 16px;
-  font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia,
-    Times, "Times New Roman", serif;
+  /*font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia,*/
+  /*  Times, "Times New Roman", serif;*/
+
+  /*font-size: x-large;*/
+  font-family: Mangueira Alt, sans-serif;
 }

 .nice-navbar-hide {
--- a/src/template/markdown/ten.js
+++ b/src/template/markdown/ten.js
@ -34,7 +34,7 @@ export default `/*自定义样式，实时生效*/
 #nice h1 {
  margin-top: -0.46em;
  margin-bottom: 0.1em;
-  border-bottom: 2px solid rgb(198, 196, 196);
+  // border-bottom: 2px solid rgb(198, 196, 196);
  box-sizing: border-box;
 }

@ -56,8 +56,8 @@ export default `/*自定义样式，实时生效*/
 #nice h2 {
  margin: 10px auto;
  height: 40px;
-  background-color: rgb(251, 251, 251);
-  border-bottom: 1px solid rgb(246, 246, 246);
+  // background-color: rgb(251, 251, 251);
+  // border-bottom: 1px solid rgb(246, 246, 246);
  overflow: hidden;
  box-sizing: border-box;
 }
@ -84,7 +84,7 @@ export default `/*自定义样式，实时生效*/
 /* 三级标题 */
 #nice h3 {
  margin: 20px auto 5px;
-  border-top: 1px solid rgb(221, 221, 221);
+  // border-top: 1px solid rgb(221, 221, 221);
  box-sizing: border-box;
 }

--- a/src/template/markdown/wgh.js
+++ b/src/template/markdown/wgh.js
@ -37,7 +37,7 @@ export default `/*自定义样式，实时生效*/
 #nice h1 {
  margin-top: -0.46em;
  margin-bottom: 0.1em;
-  border-bottom: 2px solid rgb(198, 196, 196);
+  // border-bottom: 2px solid rgb(198, 196, 196);
  box-sizing: border-box;
 }

@ -59,8 +59,8 @@ export default `/*自定义样式，实时生效*/
 #nice h2 {
  margin: 10px auto;
  height: 40px;
-  background-color: rgb(251, 251, 251);
-  border-bottom: 1px solid rgb(246, 246, 246);
+  // background-color: rgb(251, 251, 251);
+  // border-bottom: 1px solid rgb(246, 246, 246);
  overflow: hidden;
  box-sizing: border-box;
 }
@ -87,7 +87,7 @@ export default `/*自定义样式，实时生效*/
 /* 三级标题 */
 #nice h3 {
  margin: 20px auto 5px;
-  border-top: 1px solid rgb(221, 221, 221);
+  // border-top: 1px solid rgb(221, 221, 221);
  box-sizing: border-box;
 }