Merge pull request #9 from BUPTlhuanyu/restructure

Restructure

Author: BUPTlhuanyu

.eslintrc.json

@@ -18,6 +18,7 @@
         "no-use-before-define": [0],
         "@typescript-eslint/no-use-before-define": [1],
         "operator-linebreak": "off",
-        "@typescript-eslint/no-parameter-properties": "off"
+        "@typescript-eslint/no-parameter-properties": "off",
+        "spaced-comment": "off"
     }
 }

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] 文件管理（保存，重命名，新建）

doc/cover.png

@@ -17,7 +17,9 @@
         "release:mac": "yarn workspace workbench-electron release:mac"
     },
     "workspaces": {
-        "packages": ["packages/*"],
+        "packages": [
+            "packages/*"
+        ],
         "nohoist": [
             "electron"
         ]

doc/home.png

@@ -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()
+    )
+}

doc/search.png

@@ -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"
     },

doc/toc.png

@@ -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 {};

package.json

@@ -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;
+        }
+    }
+}

packages/views/config-overrides.js

@@ -0,0 +1,203 @@
+import './editor.scss';
+
+import React, {useRef, useEffect, useCallback, useState, useContext} from 'react';
+import {useMount} from 'ahooks';
+import useCodemirror from '../../components/useCodemirror';
+import {FileContext} from './store/sidbar';
+import {EditorContext} from 'views/src/pages/editor/store/editor';
+
+import SplitPane, {Pane} from 'react-split-pane';
+import Sider from './components/sider';
+import MdView from '../../components/md-view';
+import ToolBar from './components/tool-bar';
+import Footer from './components/footer';
+
+import {success, error} from '../../utils/message';
+import {isFilePath} from 'views/src/utils/tools';
+
+import {fileEvent, FS_SAVE} from '../../utils/event';
+import {pandora} from 'views/src/services/pandora';
+
+function Editor() {
+    const [storeState] = useContext(FileContext);
+    const {
+        code,
+        setCode,
+        setCodemirrorEle,
+        scroll: coScroll,
+        editor,
+        count
+    } = useCodemirror();
+
+    /* -------------------------------------------------------------------------- */
+    /*                                 store 全局状态                              */
+    /* -------------------------------------------------------------------------- */
+    const [, dispatch] = useContext(EditorContext);
+    useEffect(() => {
+        dispatch({
+            type: 'storeeditor',
+            payload: editor
+        });
+    }, [editor]);
+
+    /* -------------------------------------------------------------------------- */
+    /*                                    侧边栏展开                               */
+    /* -------------------------------------------------------------------------- */
+    const sideRef = useRef<HTMLDivElement | null>(null);
+    useEffect(() => {
+        if (sideRef && sideRef.current) {
+            sideRef.current.style.width = storeState.sidbarOpened ? '30%' : '0px';
+        }
+    }, [storeState.sidbarOpened, sideRef.current]);
+
+    /* -------------------------------------------------------------------------- */
+    /*                                    文件操作                                 */
+    /* -------------------------------------------------------------------------- */
+    const scrollTarget = useRef<number>(-1);
+    const [mdScroll, setMdScroll] = useState<any>({
+        scrollTop: 0,
+        scrollHeight: 0
+    });
+    // 获取文件code.TODO: 确保组件没有卸载
+    useEffect(() => {
+        if (isFilePath(storeState.selectedFilePath) && pandora) {
+            pandora.ipcRenderer.invoke('pandora:readFile', storeState.selectedFilePath).then((resStr: string) => {
+                setCode(resStr);
+                editor?.getDoc().setValue(resStr);
+            }).catch(err => {
+                console.warn(err);
+            });
+        } else {
+            setCode('');
+            editor?.getDoc().setValue('');
+        }
+    }, [storeState.selectedFilePath, setCode, editor]);
+
+    // 保存文件内容
+    const saveFileCb = useCallback(async () => {
+        const content = editor?.getDoc().getValue() || '';
+        if (!storeState.selectedFilePath) {
+            // TODO：保存文件弹窗
+            error('保存文件失败');
+            return;
+        }
+        // TODO:错误处理
+        pandora && pandora.ipcRenderer.invoke('pandora:writeFile', storeState.selectedFilePath, content).then(() => {
+            success('保存文件成功');
+        }).catch(err => {
+            console.log(err);
+        });
+    }, [storeState.selectedFilePath]);
+
+    // 监听保存文件内容的事件 TODO: saveFileCb 会一直变化
+    useEffect(() => {
+        fileEvent.removeAllListeners(FS_SAVE);
+        fileEvent.on(FS_SAVE, saveFileCb);
+    }, [saveFileCb]);
+
+    /* -------------------------------------------------------------------------- */
+    /*                                    滚动相关                                 */
+    /* -------------------------------------------------------------------------- */
+    const mdRef = useRef<HTMLDivElement | null>(null);
+    const editorRef: React.RefObject<HTMLDivElement> = useRef(null);
+    useMount(() => {
+        setCodemirrorEle(editorRef.current as Element);
+        const ele = mdRef.current;
+        if (ele) {
+            ele.addEventListener('scroll', mdScrollHandler);
+            ele.addEventListener('mouseover', mdMouseHandler);
+        }
+        return () => {
+            mdRef.current?.removeEventListener('scroll', mdScrollHandler);
+            mdRef.current?.removeEventListener('mouseover', mdMouseHandler);
+        };
+    });
+
+    const mdScrollHandler = useCallback(
+        (evt: any) => {
+            let {scrollTop, scrollHeight} = evt.target;
+            setMdScroll({scrollTop, scrollHeight});
+        },
+        [],
+    );
+    const mdMouseHandler = useCallback(
+        () => {
+            scrollTarget.current = 1;
+        },
+        [scrollTarget],
+    );
+    const getCoViewEle = useCallback(
+        (ele: HTMLDivElement) => {
+            ele && ele.addEventListener('mouseover', () => {
+                scrollTarget.current = 0;
+            });
+        },
+        []
+    );
+
+    useEffect(() => {
+        const layerDom = mdRef.current;
+        let mdScrollHeight = layerDom!.scrollHeight - layerDom!.clientHeight;
+        let coScrollHeight = coScroll.scrollHeight - coScroll.clientHeight;
+        if (scrollTarget.current === 1) {
+            let coScrollTop = mdScroll.scrollTop / mdScrollHeight * coScrollHeight;
+            editor && editor.scrollTo(null, coScrollTop);
+        }
+        else {
+            let mdScrollTop = coScroll.scrollTop / coScrollHeight * mdScrollHeight;
+            mdRef.current && mdRef.current.scrollTo(0, mdScrollTop);
+        }
+    }, [
+        coScroll.scrollTop,
+        coScroll.scrollHeight,
+        coScroll.clientHeight,
+        mdScroll.scrollTop,
+        mdScroll.scrollHeight,
+        editor
+    ]);
+
+    return (
+        <div className="pandora-editor">
+            {
+                pandora && <Sider
+                    className="editor-file-folder"
+                    ref={sideRef}
+                />
+            }
+            <div className="editor-container">
+                <ToolBar />
+                <div className="editor-wrapper">
+                    <SplitPane
+                        split="vertical"
+                        defaultSize="50%"
+                        paneStyle={{overflow: 'auto'}}
+                        style={{position: 'relative'}}
+                    >
+                        <Pane
+                            eleRef={getCoViewEle}
+                            className="md-editor-wrapper"
+                            style={{height: '100%'}}
+                        >
+                            <div
+                                ref={editorRef}
+                                className="md-editor-container"
+                            ></div>
+                        </Pane>
+                        <Pane className="md-view-wrapper">
+                            <div ref={mdRef} className="md-view-layer">
+                                <MdView
+                                    value={code}
+                                    className="md-view-container"
+                                />
+                            </div>
+                            <div className="iphone-frame"></div>
+                        </Pane>
+                    </SplitPane>
+                </div>
+                <Footer count={count} />
+            </div>
+        </div>
+    );
+}
+
+export default Editor;

packages/views/package.json

@@ -1,129 +1,11 @@
-.pandora-editor {
-    display: flex;
-    height: 100%;
+@import 'views/src/theme/codemirror.scss';
+html, body, #root, .app {
     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;
-                }
-            }
-            .code-mirror-wrapper {
-                flex: 1;
-                .code-mirror-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;
-              }
-        }
-    }
+    height: 100%;
+    font-family: Raleway,'Source Sans Pro',sans-serif;
 }
 
-.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;
-        }
-    }
-}
+body {
+    margin: 0;
+    padding: 0;
+}

packages/views/src/assets/img/logo.png

@@ -1,192 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import './index.scss';
-
-import React, {useRef, useEffect, useCallback, useState, useContext} from 'react';
-import {useMount} from 'ahooks';
-import useCodemirror from '../../components/useCodemirror';
-import {FileContext} from './store/sidbar';
-import {EditorContext} from 'views/src/pages/editor/store/editor';
-
-import SplitPane, {Pane} from 'react-split-pane';
-import Sider from './components/sider';
-import MdView from '../../components/md-view';
-import ToolBar from './components/tool-bar';
-import Footer from './components/footer';
-
-import {success, error} from '../../utils/message';
-import {isFilePath} from 'views/src/utils/tools';
-
-import {fileEvent, FS_SAVE} from '../../utils/event';
-import {pandora} from 'views/src/services/pandora';
-
-function Editor() {
-    const [storeState] = useContext(FileContext);
-    const [, dispatch] = useContext(EditorContext);
-    const editorRef: React.RefObject<HTMLDivElement> = useRef(null);
-    let {
-        code,
-        setCode,
-        setCodemirrorEle,
-        scroll: coScroll,
-        editor,
-        count
-    } = useCodemirror();
-    const mdRef = useRef<HTMLDivElement | null>(null);
-    const sideRef = useRef<HTMLDivElement | null>(null);
-    const scrollTarget = useRef<number>(-1);
-    const containerHeight = useRef<number>(0);
-    const [mdScroll, setMdScroll] = useState<any>({
-        scrollTop: 0,
-        scrollHeight: 0
-    });
-
-    useEffect(() => {
-        dispatch({
-            type: 'storeeditor',
-            payload: editor
-        });
-    }, [editor]);
-
-    useEffect(() => {
-        if (sideRef && sideRef.current) {
-            sideRef.current.style.width = storeState.sidbarOpened ? '30%' : '0px';
-        }
-    }, [storeState.sidbarOpened, sideRef.current]);
-
-    // 获取文件code.TODO: 确保组件没有卸载
-    useEffect(() => {
-        if (isFilePath(storeState.selectedFilePath) && pandora) {
-            pandora.ipcRenderer.invoke('pandora:readFile', storeState.selectedFilePath).then((resStr: string) => {
-                setCode(resStr);
-                editor?.getDoc().setValue(resStr);
-            }).catch(err => {
-                console.warn(err);
-            });
-        } else {
-            setCode('');
-            editor?.getDoc().setValue('');
-        }
-    }, [storeState.selectedFilePath, setCode, editor]);
-
-    // 保存文件内容
-    const saveFileCb = useCallback(async () => {
-        const content = editor?.getDoc().getValue() || '';
-        if (!storeState.selectedFilePath) {
-            // TODO：保存文件弹窗
-            error('保存文件失败');
-            return;
-        }
-        // TODO:错误处理
-        pandora && pandora.ipcRenderer.invoke('pandora:writeFile', storeState.selectedFilePath, content).then(() => {
-            success('保存文件成功');
-        }).catch(err => {
-            console.log(err);
-        });
-    }, [storeState.selectedFilePath]);
-
-    // 监听保存文件内容的事件 TODO: saveFileCb 会一直变化
-    useEffect(() => {
-        fileEvent.removeAllListeners(FS_SAVE);
-        fileEvent.on(FS_SAVE, saveFileCb);
-    }, [saveFileCb]);
-
-    useEffect(() => {
-        const layerDom = mdRef.current;
-        let mdScrollHeight = layerDom!.scrollHeight - layerDom!.clientHeight;
-        let coScrollHeight = coScroll.scrollHeight - coScroll.clientHeight;
-        if (scrollTarget.current === 1) {
-            let coScrollTop = mdScroll.scrollTop / mdScrollHeight * coScrollHeight;
-            editor && editor.scrollTo(null, coScrollTop);
-        }
-        else {
-            let mdScrollTop = coScroll.scrollTop / coScrollHeight * mdScrollHeight;
-            mdRef.current && mdRef.current.scrollTo(0, mdScrollTop);
-        }
-    }, [
-        coScroll.scrollTop,
-        coScroll.scrollHeight,
-        coScroll.clientHeight,
-        mdScroll.scrollTop,
-        mdScroll.scrollHeight,
-        editor
-    ]);
-    const mdScrollHandler = useCallback(
-        (evt: any) => {
-            let {scrollTop, scrollHeight} = evt.target;
-            setMdScroll({scrollTop, scrollHeight});
-        },
-        [],
-    );
-    const mdMouseHandler = useCallback(
-        () => {
-            scrollTarget.current = 1;
-        },
-        [scrollTarget],
-    );
-    useMount(() => {
-        let containerDom = document.querySelector('.editor-wrapper');
-        containerHeight.current = containerDom ? containerDom.clientHeight : 0;
-        setCodemirrorEle(editorRef.current as Element);
-        const ele = mdRef.current;
-        if (ele) {
-            // TODO: ref 放到 MdView 上
-            ele.addEventListener('scroll', mdScrollHandler);
-            ele.addEventListener('mouseover', mdMouseHandler);
-        }
-        return () => {
-            mdRef.current?.removeEventListener('scroll', mdScrollHandler);
-            mdRef.current?.removeEventListener('mouseover', mdMouseHandler);
-        };
-    });
-    const getCoViewEle = useCallback(
-        (ele: HTMLDivElement) => {
-            ele && ele.addEventListener('mouseover', () => {
-                scrollTarget.current = 0;
-            });
-        },
-        []
-    );
-    return (
-        <div className="pandora-editor">
-            {
-                pandora && <Sider
-                    className="editor-file-folder"
-                    ref={sideRef}
-                />
-            }
-            <div className="editor-container">
-                <ToolBar />
-                <div className="editor-wrapper">
-                    <SplitPane
-                        split="vertical"
-                        defaultSize="50%"
-                        paneStyle={{overflow: 'auto'}}
-                        style={{position: 'relative'}}
-                    >
-                        <Pane
-                            eleRef={getCoViewEle}
-                            className="code-mirror-wrapper"
-                            style={{height: '100%'}}
-                        >
-                            <div
-                                ref={editorRef}
-                                className="code-mirror-container"
-                            ></div>
-                        </Pane>
-                        <Pane className="md-view-wrapper">
-                            <div ref={mdRef} className="md-view-layer">
-                                <MdView
-                                    value={code}
-                                    className="md-view-container"
-                                />
-                            </div>
-                            <div className="iphone-frame"></div>
-                        </Pane>
-                    </SplitPane>
-                </div>
-                <Footer count={count} />
-            </div>
-        </div>
-    );
-}
-
-export default Editor;
+import Editor from './editor';
+import EditorStore from './store';
+
+import {registerContextMenu, registerTopMenuListener} from 'views/src/electron/menu';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <EditorStore>
+            <Editor />
+        </EditorStore>
+    </React.StrictMode>,
+    document.getElementById('root')
+);
+
+// 设置electron上下文菜单
+registerContextMenu();
+// 设置顶部菜单监听
+registerTopMenuListener();

packages/views/src/index.scss

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.scss';
+import Editor from './editor';
+import EditorStore from './store';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <EditorStore>
+            <Editor />
+        </EditorStore>
+    </React.StrictMode>,
+    document.getElementById('root')
+);

packages/views/src/index.tsx

@@ -0,0 +1,89 @@
+.pandora-home-content {
+    flex: 1;
+    width: 100%;
+    padding: 40px 8vw 0;
+    color: #ffffff;
+    box-sizing: border-box;
+    overflow: auto;
+    &-banner {
+        background-color: #1C1C24;
+        border-radius: 20px;
+        width: 100%;
+        margin: 25px 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+        box-sizing: border-box;
+        &-img {
+            width: 40vw;
+            height: 20vw;
+            border-radius: 20px;
+            background: #F2C9C7;
+            box-sizing: border-box;
+            background: linear-gradient(288.274deg, rgba(221, 132, 255, 0.68), rgba(255, 85, 125, 0.82));
+        }
+        &-info {
+            width: 36vw;
+            height: 20vw;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            &-title {
+                display: inline-block;
+                line-height: 1.5;
+                font-size: 28px;
+                word-wrap: break-word;
+                text-overflow: ellipsis;
+                font-weight: 500;
+            }
+            &-desc {
+                margin: 12px 0;
+                display: inline-block;
+                line-height: 1.2;
+                font-size: 16px;
+                overflow: auto;
+                word-wrap: break-word;
+                font-weight: 200;
+            }
+            &-time {
+                display: inline-block;
+                font-size: 12px;
+                color: #A6ADB1;
+            }
+        }
+    }
+    &-box {
+        margin: 25px 0;
+        &-item {
+            width: 240px;
+            height: 268px;
+            background-color: #1C1C24;
+            border-radius: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: start;
+            padding: 10px;
+            box-sizing: border-box;
+            &:hover {
+                box-shadow: 2px 2px 6px #ffffff;
+            }
+            &-img {
+                width: 200px;
+                height: 180px;
+                border-radius: 10px;
+                background: url('../../../../assets/img/logo.png') no-repeat;
+                background-size: contain;
+                background-position: center;
+            }
+            &-info {
+                width: 200px;
+                font-size: 14px;
+                color: #A6ADB1;
+                margin-top: 20px;
+            }
+        }
+    }
+}

packages/views/src/index.web.tsx

@@ -0,0 +1,59 @@
+/**
+ * @file
+ */
+import './index.scss';
+import * as React from 'react';
+import {pandora} from 'views/src/services/pandora';
+
+const prefix = 'pandora-home-content';
+
+function Content() {
+    const edEditor = React.useCallback(() => {
+        pandora.ipcRenderer.invoke('pandora:mdEditor').then((resStr: string) => {
+            console.log(resStr);
+        }).catch(err => {
+            console.warn(err);
+        });
+    }, []);
+    return (
+        <div className={`${prefix}`}>
+            <span>Most popular</span>
+            <div className={`${prefix}-banner`}>
+                <div className={`${prefix}-banner-img`}></div>
+                <div className={`${prefix}-banner-info`}>
+                    <div className={`${prefix}-banner-info-title`}>
+                        将进酒
+                    </div>
+                    <div className={`${prefix}-banner-info-desc`}>
+                        君不见黄河之水天上来②，奔流到海不复回。
+                        君不见高堂明镜悲白发③，朝如青丝暮成雪④。
+                        人生得意须尽欢⑤，莫使金樽空对月⑥。
+                        天生我材必有用⑦，千金散尽还复来⑧。
+                        烹羊宰牛且为乐，会须一饮三百杯⑨。
+                        岑夫子⑩，丹丘生⑪，将进酒，杯莫停⑫。
+                        与君歌一曲⑬，请君为我倾耳听⑭。
+                        钟鼓馔玉不足贵⑮，但愿长醉不复醒⑯。
+                        古来圣贤皆寂寞⑰，惟有饮者留其名。
+                        陈王昔时宴平乐⑱，斗酒十千恣欢谑⑲。
+                        主人何为言少钱⑳，径须沽取对君酌㉑。
+                        五花马㉒、千金裘㉓，呼儿将出换美酒㉔，与尔同销万古愁
+                    </div>
+                    <div className={`${prefix}-banner-info-time`}>
+                        唐代李白诗作
+                    </div>
+                </div>
+            </div>
+            <span>Toolkits</span>
+            <div className={`${prefix}-box`}>
+                <div className={`${prefix}-box-item`} onClick={edEditor}>
+                    <div className={`${prefix}-box-item-img`}></div>
+                    <div className={`${prefix}-box-item-info`}>
+                        Make wechart article easy!
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Content;

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

@@ -0,0 +1,15 @@
+/**
+ * @file
+ */
+import './index.scss';
+import * as React from 'react';
+
+function Footer() {
+    return (
+        <div className="pandora-home-footer">
+            点击跳转
+        </div>
+    );
+}
+
+export default Footer;

packages/views/src/pages/editor/editor.tsx

@@ -0,0 +1,9 @@
+.pandora-home-header {
+    -webkit-app-region: drag;
+    background-color: #231F20;
+    width: 100%;
+    height: 30px;
+    padding: 0 8vw;
+    box-sizing: border-box;
+    color: #ffffff;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @file
+ */
+import './index.scss';
+import * as React from 'react';
+
+function Header() {
+    return (
+        <div className="pandora-home-header">
+        </div>
+    );
+}
+
+export default Header;

packages/views/src/pages/editor/index.tsx

@@ -0,0 +1,12 @@
+body, html, #root, .pandora-home {
+  border: 0;
+  margin: 0;
+  height: 100%;
+  font-size: 18px;
+}
+
+.pandora-home {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}

packages/views/src/pages/editor/index.web.tsx

@@ -0,0 +1,29 @@
+/**
+ * @file
+ */
+import './index.scss';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Header from 'views/src/pages/home/container/header';
+import Content from 'views/src/pages/home/container/content';
+import Footer from 'views/src/pages/home/container/footer';
+
+// import React, {useRef, useEffect, useCallback, useState, useContext} from 'react';
+
+function Home() {
+    return (
+        <div className="pandora-home">
+            <Header />
+            <Content />
+            <Footer />
+        </div>
+    );
+}
+
+ReactDOM.render(
+    <Home />,
+    document.getElementById('root')
+);
+
+export default Home;

packages/views/src/pages/home/container/content/index.scss

@@ -1,2 +1 @@
-// @ts-nocheck
 /// <reference types="react-scripts" />

packages/views/src/pages/home/container/content/index.tsx

@@ -0,0 +1,93 @@
+/**
+ * @file
+ */
+import {Menubar} from '../menu/menubar';
+import {registerContextMenuListener} from '../contextmenu/electron-main/contextmenu';
+
+import path from 'path';
+import {app, BrowserWindow, ipcMain, Menu} from 'electron';
+import {DEVELOP_PORT} from 'shared/common/constant';
+
+import CodeApplication, {IPC_CHANNEL} from './initService';
+import {Injector} from 'core/base/dependency-inject';
+import {IFileService} from 'services/files/files';
+import {FileService} from 'services/files/fileService';
+import {IDialogService, DialogService} from 'services/dialog/dialog';
+import {INativeService, NativeService} from 'services/native/native';
+import {ICommandService, CommandService} from 'services/command';
+// single service
+import 'services/search/electron-browser/searchServices';
+
+const MODE = process.env.NODE_ENV === 'production';
+function createWindow() {
+    const html = MODE
+        ? `file://${path.resolve(app.getAppPath(), './dist/index.html')}`
+        : `http://localhost:${DEVELOP_PORT}/index.html`;
+    const preload = MODE
+        ? path.resolve(app.getAppPath(), './dist/preload.js')
+        : path.resolve(app.getAppPath(), './preload.js');
+    const win = new BrowserWindow({
+        minWidth: 800,
+        minHeight: 600,
+        width: 1350,
+        height: 900,
+        title: '',
+        backgroundColor: '#262626',
+        // titleBarStyle: 'hidden',
+        // trafficLightPosition: {
+        //     x: 0,
+        //     y: 0
+        // },
+        webPreferences: {
+            preload,
+            nodeIntegration: true,
+            enableRemoteModule: true
+        }
+    });
+
+    win.loadURL(html).catch(e => console.error(e));
+
+    win.webContents.on('did-finish-load', () => {
+        // splashWindow?.destroy();
+    });
+
+    win.on('close', () => {
+        IPC_CHANNEL.forEach((item: string) => {
+            ipcMain.removeHandler(item);
+        });
+        Menu.setApplicationMenu(new Menu());
+    });
+}
+
+export class CodeMain {
+    constructor() {
+        this.initServices();
+    }
+    async startUp(): Promise<void> {
+        createWindow();
+        registerContextMenuListener();
+    }
+
+    private initServices() {
+        const injector = new Injector();
+
+        injector.add(IFileService, {
+            useClass: FileService
+        });
+
+        injector.add(IDialogService, {
+            useClass: DialogService
+        });
+
+        injector.add(INativeService, {
+            useClass: NativeService
+        });
+
+        injector.add(ICommandService, {
+            useClass: CommandService
+        });
+
+        injector.createInstance(CodeApplication);
+        injector.createInstance(Menubar);
+    }
+}

packages/views/src/pages/home/container/footer/index.scss

@@ -0,0 +1,111 @@
+/**
+ * @file 应用启动的时候需要启动的service
+ */
+import {ipcMain} from 'electron';
+import {IFileService} from 'services/files/files';
+import {IDialogService} from 'services/dialog/dialog';
+import {INativeService} from 'services/native/native';
+import {ISearchService} from 'services/search/common/searchService';
+
+export const IPC_CHANNEL = [
+    'pandora:writeFile',
+    'pandora:readFile',
+    'pandora:renameFile',
+    'pandora:renameDir',
+    'pandora:getDirFiles',
+    'pandora:dialog',
+    'pandora:revealFileInOs',
+    'pandora:moveFileToTrash',
+    'pandora:fileSearch'
+];
+
+class CodeApplication {
+    constructor(
+        @IFileService private readonly fileService: IFileService,
+        @IDialogService private readonly dialogService: IDialogService,
+        @INativeService private readonly nativeService: INativeService,
+        @ISearchService private readonly diskSearch: ISearchService
+    ) {
+        // TODO：返回数据格式
+        IPC_CHANNEL.forEach((item: string) => {
+            const handlerName = item.split(':')[1];
+            ipcMain.handle(item, (this[handlerName as keyof CodeApplication] as Function).bind(this))
+        });
+    }
+
+    private async writeFile (event: Electron.IpcMainInvokeEvent, path: string, data: string) {
+        if (typeof data !== 'string') {
+            throw new Error('Invalid operation (vscode:writeNlsFile)');
+        }
+
+        return this.fileService.writeFile(path, data);
+    }
+
+    private async readFile (event: Electron.IpcMainInvokeEvent, path: string) {
+        return this.fileService.readFile(path);
+    }
+
+    private async renameFile (event: Electron.IpcMainInvokeEvent, oldPath: string, newPath: string, data: string) {
+        const result = await this.fileService.renameFile(oldPath, newPath, data).catch(err => console.log(err));
+        if (result) {
+            return {
+                success: true,
+                data: result
+            };
+        } else {
+            return {
+                success: false,
+                data: ''
+            };
+        }
+    }
+
+    private async renameDir (event: Electron.IpcMainInvokeEvent, oldPath: string, newPath: string) {
+        const result = await this.fileService.renameDir(oldPath, newPath).catch(err => console.log(err));
+        if (result) {
+            return {
+                success: true,
+                data: result
+            };
+        } else {
+            return {
+                success: false,
+                data: ''
+            };
+        }
+    }
+
+    private async getDirFiles (event: Electron.IpcMainInvokeEvent, dirPath: string) {
+        return this.fileService.getDirTree(dirPath);
+    }
+
+    private async dialog () {
+        const result: Record<string, any> = await this.dialogService.openDialog();
+        let treeData = null;
+        if (!result.canceled && result.filePaths) {
+            treeData = this.fileService.getDirTree(result.filePaths[0]);
+        }
+        return treeData;
+    }
+
+    private async revealFileInOs (event: Electron.IpcMainInvokeEvent, fullpath: string) {
+        this.nativeService.revealFileInOs(fullpath);
+    };
+
+    private async moveFileToTrash (event: Electron.IpcMainInvokeEvent, fullpath: string) {
+        this.nativeService.moveFileToTrash(fullpath);
+    }
+
+    private async fileSearch (event: Electron.IpcMainInvokeEvent, dir: string, query: Record<string, string>) {
+        const res = await this.diskSearch.fileSearch({
+            dir,
+            query
+        });
+        return {
+            status: res.data && res.data.length && 0,
+            data: res.data
+        };
+    }
+}
+
+export default CodeApplication;

packages/views/src/pages/home/container/footer/index.tsx

@@ -2,188 +2,39 @@
  * @file app
  */
 import path from 'path';
-import {app, BrowserWindow} from 'electron';
-import logoIcon from '../assets/png/logo.svg';
-import pkg from '../package.json';
-import {DEVELOP_PORT} from '../../shared/common/constant';
+import {app, BrowserWindow, ipcMain, Menu} from 'electron';
+import {DEVELOP_PORT} from 'shared/common/constant';
 
 import {registerContextMenuListener} from './contextmenu/electron-main/contextmenu';
-import {Menubar} from './menu/menubar';
+import {CodeMain} from './editor/editorMain';
 
-import {Injector} from 'core/base/dependency-inject';
-import CodeApplication from './initService';
-import {IFileService} from 'services/files/files';
-import {FileService} from 'services/files/fileService';
-import {IDialogService, DialogService} from 'services/dialog/dialog';
-import {INativeService, NativeService} from 'services/native/native';
-import {ICommandService, CommandService} from 'services/command';
-
-// single service
-import 'services/search/electron-browser/searchServices';
+/// #if IS_DEV
+import installExtension, {REACT_DEVELOPER_TOOLS} from 'electron-devtools-installer';
+/// #endif
 
 let splashWindow: BrowserWindow | null = null;
 
 const MODE = process.env.NODE_ENV === 'production';
 
-// eslint-disable-next-line
-function createSplashWindow() {
-    return new Promise(resolve => {
-        const html = `
-            <!DOCTYPE html>
-            <html>
-                <head>
-                    <meta charset="utf-8">
-                    <style>
-                        html {
-                            background-color: rgb(24,24,24,0.9);
-                        }
-                        body,
-                        html {
-                            width: 100%;
-                            height: 100%;
-                            margin: 0;
-                            overflow: hidden;
-                            position: relative;
-                            background-repeat: no-repeat;
-                            -webkit-user-select: none;
-                        }
-                        .logo {
-                            width: 90px;
-                            height: 90px;
-                            margin-right: 20px;
-                        }
-                        h1 {
-                            margin: 0;
-                            padding: 0;
-                            line-height: 48px;
-                            font-size: 48px;
-                            text-align: center;
-                            color: #f1f1f1;
-                        }
-                        .top {
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            margin-top: 150px;
-                        }
-                        .version {
-                            margin-top: 50px;
-                            text-align: center;
-                            font-weight: bold;
-                            color: #ddd;
-                        }
-                        .tip {
-                            position: absolute;
-                            right: 20px;
-                            bottom: 20px;
-                            margin: 0;
-                            color: #999;
-                        }
-                        .animate__rubberBand {
-                            -webkit-animation-name: rubberBand;
-                            animation-name: rubberBand;
-                        }
-                        .animate__animated {
-                            -webkit-animation-duration: 1s;
-                            animation-duration: 1s;
-                            -webkit-animation-duration: var(--animate-duration);
-                            animation-duration: var(--animate-duration);
-                            -webkit-animation-fill-mode: both;
-                            animation-fill-mode: both;
-                            animation-delay: 150ms;
-                        }
-                        :root {
-                            --animate-duration: 1s;
-                            --animate-delay: 1s;
-                            --animate-repeat: 1;
-                        }
-                        @keyframes rubberBand {
-                            from {
-                              -webkit-transform: scale3d(1, 1, 1);
-                              transform: scale3d(1, 1, 1);
-                            }
-                          
-                            30% {
-                              -webkit-transform: scale3d(1.25, 0.75, 1);
-                              transform: scale3d(1.25, 0.75, 1);
-                            }
-                          
-                            40% {
-                              -webkit-transform: scale3d(0.75, 1.25, 1);
-                              transform: scale3d(0.75, 1.25, 1);
-                            }
-                          
-                            50% {
-                              -webkit-transform: scale3d(1.15, 0.85, 1);
-                              transform: scale3d(1.15, 0.85, 1);
-                            }
-                          
-                            65% {
-                              -webkit-transform: scale3d(0.95, 1.05, 1);
-                              transform: scale3d(0.95, 1.05, 1);
-                            }
-                          
-                            75% {
-                              -webkit-transform: scale3d(1.05, 0.95, 1);
-                              transform: scale3d(1.05, 0.95, 1);
-                            }
-                          
-                            to {
-                              -webkit-transform: scale3d(1, 1, 1);
-                              transform: scale3d(1, 1, 1);
-                            }
-                          }
-                    </style>
-                </head>
-                <body>
-                    <div class="top">
-                        <img class="logo" src="${logoIcon}"/>
-                        <h1 id="name" class="animate__rubberBand animate__animated">${pkg.productName}</h1>
-                    </div>
-                    <p class="version">Version ${pkg.version}</p>
-                </body>
-            </html>
-        `;
-        splashWindow = new BrowserWindow({
-            width: 600,
-            height: 400,
-            show: false,
-            frame: false,
-            movable: true,
-            resizable: false,
-            autoHideMenuBar: true,
-            transparent: true
-        });
-        splashWindow
-            .loadURL('data:text/html;charset=UTF-8,' + encodeURIComponent(html))
-            .then(() => splashWindow?.show());
-        splashWindow.webContents.on('did-finish-load', () => {
-            setTimeout(() => {
-                resolve('');
-            }, 1500);
-        });
-    });
-}
-
-function createWindow() {
+function createHome() {
     const html = MODE
-        ? `file://${path.resolve(app.getAppPath(), './dist/index.html')}`
-        : `http://localhost:${DEVELOP_PORT}/index.html`;
+        ? `file://${path.resolve(app.getAppPath(), './dist/home.html')}`
+        : `http://localhost:${DEVELOP_PORT}/home.html`;
     const preload = MODE
         ? path.resolve(app.getAppPath(), './dist/preload.js')
         : path.resolve(app.getAppPath(), './preload.js');
     const win = new BrowserWindow({
         minWidth: 800,
         minHeight: 600,
-        width: 1350,
-        height: 900,
+        width: 800,
+        height: 600,
         title: '',
-        backgroundColor: '#262626',
-        // titleBarStyle: 'hidden',
-        // trafficLightPosition: {
-        //     x: 0,
-        //     y: 0
-        // },
+        backgroundColor: '#131419',
+        titleBarStyle: 'hidden',
+        trafficLightPosition: {
+            x: 0,
+            y: 0
+        },
         webPreferences: {
             preload,
             nodeIntegration: true,
@@ -198,21 +49,22 @@ function createWindow() {
     });
 }
 
-class CodeMain {
-    constructor() {
+class Home {
+    constructor () {
+        Menu.setApplicationMenu(new Menu());
         this.registerListeners();
     }
-    async startUp(): Promise<void> {
-        this.initServices();
-    }
-    private registerListeners() {
+    private registerListeners () {
         process.on('uncaughtException', err => this.onUnexpectedError(err));
-        // TODO: 如何处理promise的错误
-        // process.on('unhandledRejection', (reason: unknown) => onUnexpectedError(reason));
-
         app.whenReady().then(async () => {
+            /// #if IS_DEV
+            installExtension(REACT_DEVELOPER_TOOLS)
+                .then(name => console.log(`Added Extension:  ${name}`))
+                .catch(err => console.log('An error occurred: ', err));
+            /// #endif
+
             // await createSplashWindow();
-            await createWindow();
+            await createHome();
             registerContextMenuListener();
         });
 
@@ -224,10 +76,11 @@ class CodeMain {
 
         app.on('activate', () => {
             if (BrowserWindow.getAllWindows().length === 0) {
-                createWindow();
+                createHome();
             }
         });
     }
+
     private onUnexpectedError(err: Error): void {
         if (err) {
             // take only the message and stack property
@@ -243,29 +96,14 @@ class CodeMain {
         // TODO: logService
     }
 
-    private initServices() {
-        const injector = new Injector();
-
-        injector.add(IFileService, {
-            useClass: FileService
+    startUp() {
+        ipcMain.handle('pandora:mdEditor', async (event, dirPath) => {
+            const codeMain = new CodeMain();
+            codeMain.startUp();
+            return;
         });
-
-        injector.add(IDialogService, {
-            useClass: DialogService
-        });
-
-        injector.add(INativeService, {
-            useClass: NativeService
-        });
-
-        injector.add(ICommandService, {
-            useClass: CommandService
-        });
-
-        injector.createInstance(CodeApplication);
-        injector.createInstance(Menubar);
     }
 }
 
-const main = new CodeMain();
-main.startUp();
+const home = new Home();
+home.startUp();

packages/views/src/pages/home/container/header/index.scss

@@ -93,17 +93,23 @@ function __separator__(): MenuItem {
 }
 
 export class Menubar {
+    private oldMenus: Menu[];
     // private menubarMenus: {[id: string]: IMenubarMenu};
     constructor(
         @ICommandService private readonly commandService: ICommandService
     ) {
         // this.menubarMenus = Object.create(null);
+        this.oldMenus = [];
         this.install();
     }
 
     // private addFallbackHandlers(): void {}
 
     private install(): void {
+        const oldMenu = Menu.getApplicationMenu();
+		if (oldMenu) {
+			this.oldMenus.push(oldMenu);
+		}
         // Menus
         const menubar = new Menu();
 

packages/views/src/pages/home/container/header/index.tsx

@@ -1,6 +1,6 @@
 {
   "name": "workbench-electron",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Pandora Workbench",
   "productName": "Pandora Workbench",
   "private": true,
@@ -29,6 +29,8 @@
     "cross-env": "^7.0.3",
     "electron": "^11.2.0",
     "electron-builder": "^22.10.5",
+    "electron-devtools-installer": "^3.2.0",
+    "ifdef-loader": "^2.3.0",
     "png2icons": "^2.0.1",
     "ts-loader": "^8.1.0",
     "webpack": "^4.43.0",

packages/views/src/pages/home/index.scss

@@ -8,6 +8,11 @@ const {createConfig} = require('build-tools');
 const compiledHook = require('build-tools/plugins/compilationFinished');
 
 const isProd = process.env.NODE_ENV === 'production';
+
+const opts = {
+    IS_DEV: !isProd
+};
+
 module.exports = createConfig({
     target: 'electron-main',
     entry: {
@@ -28,7 +33,7 @@ module.exports = createConfig({
                         loader: 'babel-loader',
                         options: {
                             plugins: [
-                                ["@babel/plugin-proposal-decorators", { "legacy": true }],
+                                ['@babel/plugin-proposal-decorators', {'legacy': true}],
                                 ['@babel/plugin-proposal-class-properties'],
                                 'babel-plugin-parameter-decorator',
                                 '@babel/plugin-proposal-export-default-from',
@@ -37,9 +42,16 @@ module.exports = createConfig({
                             ],
                             presets: [
                                 require.resolve('@babel/preset-env'),
-                                [require.resolve('@babel/preset-typescript'), {allExtensions: true, onlyRemoveTypeImports: true}]
+                                [
+                                    require.resolve('@babel/preset-typescript'),
+                                    {allExtensions: true, onlyRemoveTypeImports: true}
+                                ]
                             ]
                         }
+                    },
+                    {
+                        loader: 'ifdef-loader',
+                        options: opts
                     }
                 ].filter(Boolean)
             }