feat: 更改字体大小

package.json

@@ -67,7 +67,7 @@
   },
   "scripts": {
     "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider node scripts/build.js",
     "deploy": "./deploy.sh",
     "test": "node scripts/test.js"
   },

public/index.html

@@ -62,8 +62,21 @@
         height: "3px";
       }
       a {
-        border-bottom: "1px solid"
+        border-bottom: "1px solid";
+        font-size: 14px;
+      } /* 9 */
+      section, li {
+        font-size: 14px;
       }
+      h1 {
+        font-size: 26px;
+      }
+      h2 {
+        font-size: 15px;
+      }
+      p {
+        font-size: 14px;
+      } /* 13 */
     </style>
     <link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/index.css" id="align"></link>
   </head>

src/App.js

@@ -78,7 +78,7 @@ class App extends Component {
 }
 
 const contentWidth = 210 - 11 * 2;
-const contentHeight = 296 - 16 * 2;
+const contentHeight = 800;
 
 const styles = theme => ({
   app: {

src/components/Button/ChangeFontsize.js

@@ -0,0 +1,114 @@
+import React, { Component } from "react";
+
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core/styles";
+
+import Button from "@material-ui/core/Button";
+import Tooltip from "@material-ui/core/Tooltip";
+import Snackbar from "@material-ui/core/Snackbar";
+
+import a from "../../icons/a.svg";
+
+import { ENTER_DELAY, LEAVE_DELAY, ITEM_MAX_NUMS } from "../../utils/constant";
+
+import { observer, inject } from "mobx-react";
+
+@inject("resume")
+@inject("navbar")
+@observer
+class ChangeFontsize extends Component {
+  state = {
+    isHintOpen: false,
+    isSnackbarOpen: false,
+  };
+
+  closeHint = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    this.setState({ isHintOpen: false });
+  };
+
+  closeSnackbar = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    this.setState({ isSnackbarOpen: false });
+  };
+
+  handleFontSize = (fontSize) => {
+    var targetFontSize = 14;
+    switch (this.props.navbar.fontSize) {
+      case 16:
+        targetFontSize = 14;
+        break;
+      case 14:
+        targetFontSize = 12;
+        break;
+      case 12:
+        targetFontSize = 10;
+        break;
+      case 10:
+        targetFontSize = 16;
+        break;
+      default:
+        targetFontSize = 14;
+        break;
+    }
+    this.props.navbar.setFontSize(targetFontSize);
+    this.setState({ isSnackbarOpen: true });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div>
+        <Tooltip
+          title="切换字体大小: 10, 12, 14, 16"
+          placement="bottom"
+          enterDelay={ENTER_DELAY}
+          leaveDelay={LEAVE_DELAY}
+          disableFocusListener
+        >
+          <Button
+            className={classes.btn}
+            classes={{
+              root: classes.minWidth,
+            }}
+            onClick={this.handleFontSize}
+          >
+            <img src={a} alt="logo" />
+          </Button>
+        </Tooltip>
+        <Snackbar
+          open={this.state.isSnackbarOpen}
+          autoHideDuration={6000}
+          onClose={this.closeSnackbar}
+          message={`字体：${this.props.navbar.fontSize}px`}
+        />
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  btn: {
+    padding: "6px 8px",
+    borderRadius: "0",
+    borderBottom: "1px solid #cccccc",
+    borderTop: "1px solid #cccccc",
+    borderRight: "1px solid #cccccc",
+    height: "100%",
+  },
+  minWidth: {
+    minWidth: "auto",
+  },
+});
+
+ChangeFontsize.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ChangeFontsize);

src/components/Navbar/ListGlobal.js

@@ -9,6 +9,7 @@ import Frame from "../Button/Frame";
 import Color from "../Button/Color";
 import Screen from "../Button/Screen";
 import AddGrid from "../Button/AddGrid";
+import ChangeFontsize from "../Button/ChangeFontsize";
 import Help from "../Button/Help";
 
 class ListGlobal extends Component {
@@ -22,6 +23,7 @@ class ListGlobal extends Component {
         <Color />
         <Screen />
         <AddGrid />
+        <ChangeFontsize />
         <Help />
       </List>
     );

src/index.css

@@ -1,43 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 body {
-  margin: 0;
-  padding: 0 !important;
-  font-family: "Times New Roman", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: #cccccc;
-  overflow-y: scroll !important;
+    margin: 0;
+    padding: 0 !important;
+    font-family: 'Ubuntu', 'Noto Serif SC';
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background: #cccccc;
+    overflow-y: scroll !important;
 }
 
 code {
-  font-family: "Times New Roman", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+    font-family: 'EB Garamond', serif;
+    font-family: 'Noto Serif SC', serif;
 }
 
 /* 滚动槽 */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+    width: 6px;
+    height: 6px;
 }
+
 ::-webkit-scrollbar-track {
-  border-radius: 3px;
-  background: rgba(0,0,0,0.06);
-  box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.06);
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
 }
+
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: rgba(0,0,0,0.12);
-  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
 }
 
 img {
-  -webkit-touch-callout: none;
+    -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-}
+}

src/index.js

@@ -11,7 +11,6 @@ import hint from "./store/hint";
 import dialog from "./store/dialog";
 
 import { Provider } from "mobx-react";
-
 import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
 
 const theme = createMuiTheme({

src/layout/Resume.js

@@ -164,6 +164,18 @@ class Resume extends Component {
     }`;
     document.styleSheets[0].rules[9].style.color = this.props.navbar.themeColor;
 
+    // 设置字体大小
+    // a
+    document.styleSheets[0].cssRules[9].style.fontSize = `${this.props.navbar.fontSize}px`;
+    // section
+    document.styleSheets[0].cssRules[10].style.fontSize = `${this.props.navbar.fontSize}px`;
+    // h1
+    document.styleSheets[0].cssRules[11].style.fontSize = `${this.props.navbar.fontSize * 2 - 2}px`;
+    // h2
+    document.styleSheets[0].cssRules[12].style.fontSize = `${this.props.navbar.fontSize + 1}px`;
+    // p
+    document.styleSheets[0].cssRules[13].style.fontSize = `${this.props.navbar.fontSize}px`;
+
     return (
       <GridLayout
         className={classes.layout}
@@ -232,27 +244,22 @@ const styles = theme => ({
       "& section": {
         height: "100%",
         display: "flex",
-        fontSize: "3.8mm",
         lineHeight: "24px",
         overflow: "hidden",
         width: "100%"
       },
       "& h1": {
         margin: "0",
-        fontSize: "7mm"
       },
       "& h2": {
         margin: "0",
-        fontSize: "4mm",
         fontWeight: "bold"
       },
       "& p": {
-        fontSize: "3.8mm",
         margin: "0",
         lineHeight: "24px"
       },
       "& a": {
-        fontSize: "3.8mm",
         textDecoration: "none",
         fontWeight: "bold"
         // borderBottom: "1px solid black"

src/store/navbar.js

@@ -4,6 +4,7 @@ import { TEMPLATE_NUM, MARKDOWN_MODE } from "../utils/constant";
 class Navbar {
   @observable isDisabled = true;
   @observable themeColor = "#468CD4";
+  @observable fontSize = 14;
   @observable isExported = false;
   @observable isMarkdownMode = false;
   @observable templateNum = 1;
@@ -18,6 +19,11 @@ class Navbar {
     this.themeColor = themeColor;
   };
 
+  @action
+  setFontSize = fontSize => {
+    this.fontSize = fontSize;
+  }
+
   @action
   setExported = isExported => {
     this.isExported = isExported;

src/utils/constant.js

@@ -16,7 +16,7 @@ export const LEAVE_DELAY = 0;
 
 export const MARK = "_";
 
-export const ITEM_MAX_NUMS = 100;
+export const ITEM_MAX_NUMS = 1000;
 
 export const DATA_MARKDOWN = "data-markdown";
 export const DATA_ORIGIN = "data-origin";