feat(home): home & cra 多页配置

README.md

@@ -5,13 +5,25 @@
 > 基于 vscode 架构，利用 【依赖注入】【多进程】等思想实现，用于编辑 `markdown` 文件，并输出为 【微信公众号文章】
 
 <div align=center>
-    <img src="./doc/cover.png" width="800px" />
+    <img src="./doc/home.png" width="800px" />
 </div>
 
 # 工具集合
 - [ ] 插件化
 ## markdown
 
+<div align=center>
+    <img src="./doc/cover.png" width="800px" />
+</div>
+
+<div align=center>
+    <img src="./doc/toc.png" width="800px" />
+</div>
+
+<div align=center>
+    <img src="./doc/search.png" width="800px" />
+</div>
+
 ### 文件功能
 - [x] 搜索
 - [x] 文件管理（保存，重命名，新建）

packages/views/config-overrides.js

@@ -37,17 +37,6 @@ const publicPathPlugin = (config) => {
     return config;
 }
 
-const electronConfig = (config) => {
-    // 关闭自动打开浏览器：node_modules/react-dev-utils/openBrowser.js
-    process.env.BROWSER = "none";
-    config.entry = path.resolve(__dirname, './src/index.tsx');
-    config.target = 'electron-renderer';
-    config.externals = {
-        electron : 'require("electron")'
-    };
-    return config;
-}
-
 //更改打包是图片加载模式，解决electron打包后图片无法加载问题
 const customizeFileLoaderOptions  = config  => {
     for (let item of config.module.rules) {
@@ -67,21 +56,57 @@ const customizeFileLoaderOptions  = config  => {
     }
 }
 
+const electronConfig = (config) => {
+    // config.entry = [];
+    // 关闭自动打开浏览器：node_modules/react-dev-utils/openBrowser.js
+    process.env.BROWSER = "none";
+    // config.entry = path.resolve(__dirname, './src/index.tsx');
+    config.target = 'electron-renderer';
+    config.externals = {
+        electron : 'require("electron")'
+    };
+    return config;
+}
+
 const webConfig = config => {
+    // config.entry = [];
     config.devServer = {
         open: true
     };
-    config.entry = path.resolve(__dirname, './src/index.web.tsx');
+    // config.entry = path.resolve(__dirname, './src/index.web.tsx');
     return config;
-}
+};
 
-module.exports = override(
-    building && addWebpackPlugin(compiledHook),
-    isWeb ? webConfig : electronConfig,
-    publicPathPlugin,
-    fixBabelImports("import", {
-        libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
-    }),
-    craBabelBugFix,
-    buildingNotWeb && customizeFileLoaderOptions
-);
+const entry = [
+    {
+        entry: isWeb ? './src/pages/editor/index.web.tsx' : './src/pages/editor/index.tsx',
+        template: 'public/index.html',
+        outPath: '/index.html',
+    },
+    {
+        entry: './src/pages/home/index.tsx',
+        template: 'public/index.html',
+        outPath: '/home.html',
+    }
+]
+
+const multipleEntry = require('react-app-rewire-multiple-entry')(entry);
+
+const addEntry = () => config => {
+    multipleEntry.addMultiEntry(config);
+    return config;
+};
+
+module.exports = {
+    webpack: override(
+        building && addWebpackPlugin(compiledHook),
+        isWeb ? webConfig : electronConfig,
+        publicPathPlugin,
+        fixBabelImports("import", {
+            libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
+        }),
+        craBabelBugFix,
+        buildingNotWeb && customizeFileLoaderOptions,
+        addEntry()
+    )
+}

packages/views/package.json

@@ -20,6 +20,7 @@
         "core": "0.0.0",
         "immer": "^9.0.2",
         "markdown-it": "^12.0.4",
+        "react-app-rewire-multiple-entry": "^2.2.1",
         "react-split-pane": "^0.1.92",
         "web-vitals": "^0.2.4"
     },

packages/views/src/index.tsx

@@ -1,27 +1,3 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.scss';
-import Editor from './pages/editor';
-import reportWebVitals from './reportWebVitals';
-import EditorStore from './pages/editor/store';
-
-import {registerContextMenu, registerTopMenuListener} from './electron/menu';
-
-ReactDOM.render(
-    <React.StrictMode>
-        <EditorStore>
-            <Editor />
-        </EditorStore>
-    </React.StrictMode>,
-    document.getElementById('root')
-);
-
-// 设置electron上下文菜单
-registerContextMenu();
-// 设置顶部菜单监听
-registerTopMenuListener();
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// must be empty file
+// https://github.com/facebook/create-react-app/blob/64df135c29208f08a175c941a0e94d9a56d9e4af/packages/react-scripts/config/paths.js#L18
+export {};

packages/views/src/pages/editor/editor.scss

@@ -0,0 +1,129 @@
+.pandora-editor {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+    .editor-file-folder {
+        width:30%;
+        transition: all .5s;
+        background-color: #f3f3f7;
+        max-width: 400px;
+        overflow: auto;
+    }
+    .editor-container {
+        overflow: hidden;
+        width:100%;
+        transition: all .5s;
+        .editor-wrapper {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            position: relative;
+            width: 100%;
+            height: calc(100% - 50px);
+            .md-view-wrapper {
+                position: relative;
+                flex: 1;
+                margin: auto;
+                width: 400px;
+                padding-left: 35px;
+                padding-right: 55px;
+                height: 100%;
+                overflow: auto;
+                .md-view-layer {
+                    height: 673px;
+                    position: relative;
+                    overflow: auto;
+                    top: 36px;
+                    overflow: auto;
+                    .md-view-container {
+                      overflow: auto;
+                      padding: 0 4px;
+                  }
+                }
+                .iphone-frame {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 400px;
+                    height: 758px;
+                    background: url('../../assets/img/iPhone-11.png') no-repeat;
+                    background-size: contain;
+                    background-position: top;
+                    pointer-events: none;
+                }
+            }
+            .md-editor-wrapper {
+                flex: 1;
+                .md-editor-container {
+                    height: 100%;
+                    & > div {
+                        height: 100%;
+                    }
+                }
+            }
+            .Resizer {
+                background: #000;
+                opacity: 0.2;
+                z-index: 1;
+                -moz-box-sizing: border-box;
+                -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+                -moz-background-clip: padding;
+                -webkit-background-clip: padding;
+                background-clip: padding-box;
+              }
+
+              .Resizer:hover {
+                -webkit-transition: all 2s ease;
+                transition: all 2s ease;
+              }
+
+              .Resizer.horizontal {
+                height: 11px;
+                margin: -5px 0;
+                border-top: 5px solid rgba(255, 255, 255, 0);
+                border-bottom: 5px solid rgba(255, 255, 255, 0);
+                cursor: row-resize;
+                width: 100%;
+              }
+
+              .Resizer.horizontal:hover {
+                border-top: 5px solid rgba(0, 0, 0, 0.5);
+                border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+              }
+
+              .Resizer.vertical {
+                width: 11px;
+                margin: 0 -5px;
+                border-left: 5px solid rgba(255, 255, 255, 0);
+                border-right: 5px solid rgba(255, 255, 255, 0);
+                cursor: col-resize;
+              }
+
+              .Resizer.vertical:hover {
+                border-left: 5px solid rgba(0, 0, 0, 0.5);
+                border-right: 5px solid rgba(0, 0, 0, 0.5);
+              }
+              .Resizer.disabled {
+                cursor: not-allowed;
+              }
+              .Resizer.disabled:hover {
+                border-color: transparent;
+              }
+        }
+    }
+}
+
+.pandora-message-success,
+.pandora-message-loading,
+.pandora-message-error
+{
+    .ant-message-notice-content {
+        padding: 5px 16px;
+        border-radius: 8px;
+        .ant-message-success .anticon {
+            color: #ffb531;
+        }
+    }
+}