feat: 状态

electron/index.js

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, Menu } from 'electron';
 import log from 'electron-log';
 import CONFIG from './const';
 import { checkUpdate } from './utils';
@@ -8,7 +8,7 @@ import { installCert } from './cert';
 app.commandLine.appendSwitch('--no-proxy-server');
 
 function createWindow() {
-  // electron.Menu.setApplicationMenu(null);
+  Menu.setApplicationMenu(null);
   checkUpdate(
     'https://cdn.jsdelivr.net/gh/lecepin/electron-react-tpl/package.json',
     'https://github.com/lecepin/electron-react-tpl/releases',
@@ -26,15 +26,8 @@ function createWindow() {
     },
   });
 
-  mainWindow.loadURL('https://baidu.com' ?? CONFIG.APP_START_URL);
+  mainWindow.loadURL(CONFIG.APP_START_URL);
   CONFIG.IS_DEV && mainWindow.webContents.openDevTools();
-  installCert()
-    .then(data => {
-      console.log('install cert success', data);
-    })
-    .catch(err => {
-      log.error('err', err);
-    });
 }
 
 app.whenReady().then(() => {

package.json

@@ -47,6 +47,7 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
+    "@xstate/react": "^3.0.0",
     "axios": "^0.27.2",
     "electron-is-dev": "^2.0.0",
     "electron-log": "^4.4.7",
@@ -57,7 +58,8 @@
     "react-dom": "^18.1.0",
     "regedit": "^5.1.1",
     "semver": "^7.3.7",
-    "sudo-prompt": "^9.2.1"
+    "sudo-prompt": "^9.2.1",
+    "xstate": "^4.32.1"
   },
   "author": "lecepin",
   "license": "ISC",

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.jsx

@@ -1,30 +1,13 @@
-import logo from './logo.png';
+import { useMachine } from '@xstate/react';
-import { shell } from 'electron';
+import fsm from './fsm';
-import './App.css';
+
+import './App.less';
 
 function App() {
-  return (
+  const [state, send] = useMachine(fsm);
-    <div className="App">
+  const {} = state.context;
-      <header className="App-header">
+
-        <img src={logo} className="App-logo" alt="logo" />
+  return <div className="App">App</div>;
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          onClick={e => {
-            e.preventDefault();
-            shell.openExternal('https://github.com/lecepin/electron-react-tpl');
-          }}
-          className="App-link"
-          href="#"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Open Github
-        </a>
-      </header>
-    </div>
-  );
 }
 
 export default App;

src/App.less

@@ -0,0 +1,2 @@
+.App {
+}

src/fsm.js

@@ -0,0 +1,126 @@
+import { createMachine } from 'xstate';
+import { ipcRenderer } from 'electron';
+
+export default createMachine(
+  {
+    id: '微信视频号下载工具',
+    context: {},
+    initial: '检测初始化',
+    states: {
+      检测初始化: {
+        id: '检测初始化',
+        invoke: {
+          src: 'invoke_初始化信息',
+        },
+        on: {
+          e_初始化完成: {
+            target: '初始化完成',
+          },
+          e_未初始化: {
+            target: '未初始化',
+          },
+        },
+      },
+      未初始化: {
+        initial: '空闲',
+        on: {
+          e_重新检测: {
+            target: '检测初始化',
+          },
+        },
+        states: {
+          空闲: {
+            on: {
+              e_开始初始化: {
+                target: '开始初始化',
+              },
+            },
+          },
+          开始初始化: {
+            invoke: {
+              src: 'invoke_开始初始化',
+            },
+          },
+        },
+      },
+
+      初始化完成: {
+        initial: '空闲',
+        id: '初始化完成',
+        on: {
+          e_视频捕获: {
+            actions: 'action_视频捕获',
+          },
+        },
+        states: {
+          空闲: {
+            on: {
+              e_下载: {
+                target: '下载',
+              },
+              e_预览: {
+                target: '预览',
+              },
+              e_改变规则: {
+                actions: 'action_改变规则',
+              },
+            },
+          },
+          下载: {
+            initial: '选择位置',
+            states: {
+              选择位置: {
+                on: {
+                  e_确认位置: { target: '下载中' },
+                  e_取消: { target: '#初始化完成.空闲' },
+                },
+              },
+              下载中: {
+                on: {
+                  e_进度变化: {
+                    actions: 'action_进度变化',
+                  },
+                  e_下载完成: {
+                    target: '下载完成',
+                  },
+                  e_下载失败: {
+                    target: '#初始化完成.空闲',
+                    actions: 'action_下载失败',
+                  },
+                },
+              },
+              下载完成: {
+                on: {
+                  e_取消: { target: '#初始化完成.空闲' },
+                  e_打开文件位置: {
+                    actions: 'action_打开文件位置',
+                  },
+                },
+              },
+            },
+          },
+          预览: {
+            on: {
+              e_关闭: {
+                target: '空闲',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  {
+    services: {
+      invoke_初始化信息: (context, event) => send => {},
+      invoke_开始初始化: (context, event) => send => {},
+    },
+    actions: {
+      action_视频捕获: (context, event) => {},
+      action_改变规则: (context, event) => {},
+      action_进度变化: (context, event) => {},
+      action_下载失败: (context, event) => {},
+      action_打开文件位置: (context, event) => {},
+    },
+  },
+);

src/index.css

@@ -1,11 +0,0 @@
-body {
-  margin: 0;
-  font-family: -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;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}

src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));