feat：初始化

.editorconfig

@@ -2,7 +2,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
       typescript: {},
     },
     'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
+      '@typescript-eslint/parser': ['.ts', '.tsx','.js', '.jsx'],
     },
   },
 };

.vscode/extensions.json

 {
-  "recommendations": ["dbaeumer.vscode-eslint", "EditorConfig.EditorConfig"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "rvest.vs-code-prettier-eslint"
+  ]
 }

package.json

@@ -110,11 +110,13 @@
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.14",
     "@mui/material": "^5.10.8",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",
     "electron-root-path": "^1.1.0",
     "electron-updater": "^5.2.1",
+    "history": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0"

src/commons/public/index.jsx

+import React, { useState } from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import { SnackbarContent } from '@mui/material';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+
+export default () => {
+    const [onloading, setOnloading] = useState(false);
+    const [messages, setMessages] = useState({
+        message: '',
+        messagetype: '',
+    });
+    const handleClose = (e) => {
+        console.log('e: ', e);
+    };
+
+    const action = (
+        <React.Fragment>
+            {/* <Button color="secondary" size="small" onClick={handleClose}>
+                UNDO
+            </Button> */}
+            <IconButton
+                size="small"
+                aria-label="close"
+                color="inherit"
+                onClick={handleClose}
+            >
+                <CloseIcon fontSize="small" />
+            </IconButton>
+        </React.Fragment>
+    );
+
+    const render = (dom) => {
+        return (
+            <React.Fragment>
+                {dom}
+                <Snackbar
+                    anchorOrigin={{
+                        vertical: 'top',
+                        horizontal: 'center',
+                    }}
+                    open={open}
+                    onClose={handleClose}
+                    message="I love snacks"
+                    key={messages['message']}
+                    action={action}
+                />
+            </React.Fragment>
+        );
+    };
+
+    return { render, setMessages, setOnloading };
+};

src/commons/routes/index.jsx

+import Login from '../../renderer/console/login';
+
+import Test from '../../renderer/console/test';
+
+var indexRoutes = [
+    { exact: false, path: '/', name: 'Pages', component: <Login /> }, //登录页面
+    { exact: false, path: '/test', name: 'Pages', component: <Test /> }, //test
+];
+
+export default indexRoutes;

src/renderer/App.jsx

+import {
+    MemoryRouter as Router,
+    Route,
+    Switch,
+    Routes,
+} from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import icon from '../../assets/icon.svg';
+import { createBrowserHistory } from 'history';
+import './App.css';
+import path from 'path';
+import { Button } from '@mui/material';
+const rootPath = require('electron-root-path').rootPath;
+const { shell } = require('electron');
+const location = path.join(
+    rootPath.substring(0, rootPath.length - 8),
+    './assets/script/start.vbs'
+);
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import indexRoutes from '../commons/routes/index';
+
+const hist = createBrowserHistory();
+const theme = createTheme({
+    typography: {
+        fontFamily: [
+            'Roboto',
+            'Helvetica',
+            'Tahoma',
+            'Arial',
+            '"PingFang SC"',
+            '"Hiragino Sans GB"',
+            '"Heiti SC"',
+            '"WenQuanYi Micro Hei"',
+            'sans-serif',
+            '"Apple Color Emoji"',
+            '"Segoe UI Emoji"',
+            '"Segoe UI Symbol"',
+        ].join(','),
+    },
+    palette: {
+        primary: { main: '#136EFA' },
+        secondary: { main: '#F44335' },
+    },
+});
+
+export default function App() {
+    return (
+        <ThemeProvider theme={theme}>
+            <Router history={hist} basename={'/'}>
+                <Routes>
+                    {indexRoutes.map((prop, key) => {
+                        return (
+                            <Route
+                                exact={prop.exact}
+                                path={prop.path}
+                                element={prop.component}
+                                key={key}
+                            />
+                        );
+                    })}
+                </Routes>
+            </Router>
+        </ThemeProvider>
+    );
+}

src/renderer/App.tsx

-import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
-import icon from '../../assets/icon.svg';
-import './App.css';
-import path from 'path';
-import { Button } from '@mui/material';
-const rootPath = require('electron-root-path').rootPath;
-const { shell } = require('electron');
-const location = path.join(
-  rootPath.substring(0, rootPath.length - 8),
-  './assets/script/start.vbs'
-);
-const Hello = () => {
-  return (
-    <div>
-      <div className="Hello">
-        <img width="200" alt="icon" src={icon} />
-      </div>
-      <h1>electron-react</h1>
-      <div className="Hello">
-        <Button
-          variant="contained"
-          onClick={() => {
-            shell.openPath(location);
-          }}
-        >
-          挂载
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default function App() {
-  return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Hello />} />
-      </Routes>
-    </Router>
-  );
-}

src/renderer/console/login.jsx

+import React from 'react';
+import { Grid } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+import { createBrowserHistory } from 'history';
+
+import public from 'commons/public';
+
+const history = createBrowserHistory();
+console.log('history: ', history);
+
+export default (props) => {
+    console.log('props: ', props);
+    const { render } = public();
+    const navigate = useNavigate();
+
+    return render(
+        <Grid>
+            <Grid
+                onClick={() => {
+                    navigate('/test');
+
+                    console.log('2222222222222');
+                }}
+            >
+                eee2222222222wwww222
+            </Grid>
+            <Grid onClick={() => {}}>1111111</Grid>
+        </Grid>
+    );
+};

src/renderer/console/test.jsx

+import React from 'react';
+import { Grid } from '@mui/material';
+
+export default (props) => {
+    console.log('props: ', props);
+
+    return (
+        <Grid
+            onClick={() => {
+                console.log('2222222222222');
+            }}
+        >
+            11111111111
+        </Grid>
+    );
+};