feat: 全部完成

electron/index.js

@@ -1,9 +1,11 @@
 import { app, BrowserWindow, Menu } from 'electron';
 import CONFIG from './const';
 import { checkUpdate } from './utils';
-import initIPC from './ipc';
+import initIPC, { setWin } from './ipc';
 
 app.commandLine.appendSwitch('--no-proxy-server');
+process.on('uncaughtException', () => {});
+process.on('unhandledRejection', () => {});
 
 function createWindow() {
   Menu.setApplicationMenu(null);
@@ -24,6 +26,7 @@ function createWindow() {
     },
   });
 
+  setWin(mainWindow);
   mainWindow.loadURL(CONFIG.APP_START_URL);
   CONFIG.IS_DEV && mainWindow.webContents.openDevTools();
 }

electron/ipc.js

@@ -1,7 +1,11 @@
-import { ipcMain } from 'electron';
+import { ipcMain, dialog } from 'electron';
 import log from 'electron-log';
+import { throttle } from 'lodash';
 import { startServer } from './proxyServer';
 import { installCert, checkCertInstalled } from './cert';
+import { downloadFile } from './utils';
+
+let win;
 
 export default function initIPC() {
   ipcMain.handle('invoke_初始化信息', async (event, arg) => {
@@ -13,14 +17,42 @@ export default function initIPC() {
   });
 
   ipcMain.handle('invoke_启动服务', async (event, arg) => {
-    console.log('invoke_启动服务');
     return startServer({
-      interceptCallback: async req => {
+      interceptCallback: phase => async (req, res) => {
-        console.log('=========> intercept', req.url);
+        if (phase === 'response' && res?._data?.headers?.['content-type'] == 'video/mp4') {
+          win?.webContents?.send?.('VIDEO_CAPTURE', {
+            url: req.fullUrl(),
+            size: res?._data?.headers?.['content-length'] ?? 0,
+          });
+        }
       },
       setProxyErrorCallback: err => {
-        console.log({ err });
+        console.log('开启代理失败', err);
       },
     });
   });
+
+  ipcMain.handle('invoke_选择下载位置', async (event, arg) => {
+    const result = dialog.showOpenDialogSync({ title: '保存', properties: ['openDirectory'] });
+
+    if (!result?.[0]) {
+      throw '取消';
+    }
+
+    return result?.[0];
+  });
+
+  ipcMain.handle('invoke_下载视频', async (event, { url, savePath }) => {
+    return downloadFile(
+      url,
+      `${savePath}/${Date.now()}.mp4`,
+      throttle(value => win?.webContents?.send?.('e_进度变化', value), 1000),
+    ).catch(err => {
+      console;
+    });
+  });
+}
+
+export function setWin(w) {
+  win = w;
 }

electron/proxyServer.js

@@ -5,34 +5,50 @@ import { app } from 'electron';
 import CONFIG from './const';
 import { setProxy, closeProxy } from './setProxy';
 
-export async function startServer({ interceptCallback = f => f, setProxyErrorCallback = f => f }) {
+export async function startServer({
+  interceptCallback = f => f => f,
+  setProxyErrorCallback = f => f,
+}) {
   const port = await getPort();
-  const proxy = hoxy
-    .createServer({
-      certAuthority: {
-        key: fs.readFileSync(CONFIG.CERT_PRIVATE_PATH),
-        cert: fs.readFileSync(CONFIG.CERT_PUBLIC_PATH),
-      },
-    })
-    .listen(port, () => {
-      setProxy('127.0.0.1', port).catch(setProxyErrorCallback);
-    })
-    .on('error', e => {
-      console.log('proxy lib error', e);
-    });
 
-  proxy.intercept(
+  return new Promise(async (resolve, reject) => {
-    {
+    const proxy = hoxy
-      phase: 'request',
+      .createServer({
-    },
+        certAuthority: {
-    interceptCallback,
+          key: fs.readFileSync(CONFIG.CERT_PRIVATE_PATH),
-  );
+          cert: fs.readFileSync(CONFIG.CERT_PUBLIC_PATH),
+        },
+      })
+      .listen(port, () => {
+        setProxy('127.0.0.1', port)
+          .then(() => resolve())
+          .catch(() => {
+            setProxyErrorCallback(data);
+            reject('设置代理失败');
+          });
+      });
+
+    proxy.intercept(
+      {
+        phase: 'request',
+      },
+      interceptCallback('request'),
+    );
+
+    proxy.intercept(
+      {
+        phase: 'response',
+      },
+      interceptCallback('response'),
+    );
+  });
 }
 
 app.on('before-quit', async e => {
   e.preventDefault();
   try {
     await closeProxy();
+    console.log('close proxy success');
   } catch (error) {}
 
   app.exit();

electron/utils.js

@@ -1,6 +1,7 @@
 import { get } from 'axios';
-const { app, dialog, shell } = require('electron');
+import { app, dialog, shell } from 'electron';
 import semver from 'semver';
+import fs from 'fs';
 
 // packageUrl 需要包含 { "version": "1.0.0" } 结构
 function checkUpdate(
@@ -27,4 +28,35 @@ function checkUpdate(
     .catch(err => {});
 }
 
-export { checkUpdate };
+function downloadFile(url, fullFileName, progressCallback) {
+  return get(url, {
+    responseType: 'stream',
+    headers: {
+      'User-Agent':
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36',
+    },
+  }).then(({ data, headers }) => {
+    let currentLen = 0;
+    const totalLen = headers['content-length'];
+
+    return new Promise((resolve, reject) => {
+      data.on('data', ({ length }) => {
+        currentLen += length;
+        progressCallback?.(currentLen / totalLen);
+      });
+
+      data.on('error', err => reject(err));
+
+      data.pipe(
+        fs.createWriteStream(fullFileName).on('finish', () => {
+          resolve({
+            fullFileName,
+            totalLen,
+          });
+        }),
+      );
+    });
+  });
+}
+
+export { checkUpdate, downloadFile };

package.json

@@ -48,13 +48,17 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@xstate/react": "^3.0.0",
+    "antd": "^4.20.5",
     "axios": "^0.27.2",
     "electron-is-dev": "^2.0.0",
     "electron-log": "^4.4.7",
     "get-port": "^6.1.2",
     "hoxy": "^3.3.1",
+    "lodash": "^4.17.21",
     "mkdirp": "^1.0.4",
+    "pretty-bytes": "^6.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "regedit": "5.0.0",

src/App.jsx

@@ -1,20 +1,142 @@
 import { useMachine } from '@xstate/react';
+import { Table, Button, Progress, Alert } from 'antd';
+import { shell } from 'electron';
+import {
+  DownloadOutlined,
+  PlaySquareOutlined,
+  ClearOutlined,
+  GithubOutlined,
+  EyeOutlined,
+  FormatPainterOutlined,
+  RedoOutlined,
+} from '@ant-design/icons';
 import fsm from './fsm';
 
 import './App.less';
 function App() {
   const [state, send] = useMachine(fsm);
-  const {} = state.context;
+  const { captureList, currentUrl, downloadProgress } = state.context;
 
   return (
     <div className="App">
       {state.matches('检测初始化') ? <div>检测中……</div> : null}
-      {state.matches('初始化完成') ? <div>初始化完成</div> : null}
+      {state.matches('初始化完成') ? (
+        <div className="App-inited">
+          <Button
+            className="App-inited-clear"
+            icon={<ClearOutlined />}
+            onClick={() => send('e_清空捕获记录')}
+          >
+            清空
+          </Button>
+          <Button
+            className="App-inited-github"
+            icon={<GithubOutlined />}
+            onClick={() => shell.openExternal('https://github.com/lecepin/WeChatVideoDownloader')}
+            type="primary"
+            ghost
+          >
+            Star
+          </Button>
+          <Table
+            sticky
+            dataSource={captureList}
+            columns={[
+              {
+                title: '视频地址（捕获中……）',
+                dataIndex: 'url',
+                key: 'url',
+                render: value => value,
+                ellipsis: true,
+              },
+              {
+                title: '大小',
+                dataIndex: 'prettySize',
+                key: 'prettySize',
+                width: '100px',
+                render: value => value,
+              },
+              {
+                title: '操作',
+                dataIndex: 'action',
+                key: 'action',
+                width: '200px',
+                render: (_, { url, fullFileName }) => (
+                  <div>
+                    {fullFileName ? (
+                      <Button
+                        icon={<EyeOutlined />}
+                        type="primary"
+                        onClick={() => {
+                          shell.openPath(fullFileName);
+                        }}
+                        size="small"
+                        ghost
+                      >
+                        查看
+                      </Button>
+                    ) : (
+                      <Button
+                        icon={<DownloadOutlined />}
+                        type="primary"
+                        onClick={() => {
+                          send({ type: 'e_下载', url });
+                        }}
+                        size="small"
+                      >
+                        下载
+                      </Button>
+                    )}
+                    &nbsp; &nbsp;
+                    <Button
+                      icon={<PlaySquareOutlined />}
+                      onClick={() => {
+                        send({ type: 'e_预览', url });
+                      }}
+                      size="small"
+                    >
+                      预览
+                    </Button>
+                  </div>
+                ),
+              },
+            ]}
+            pagination={{ position: ['none', 'none'] }}
+          ></Table>
+
+          {state.matches('初始化完成.预览') ? (
+            <div
+              className="App-inited-preview"
+              onClick={e => {
+                e.target == e.currentTarget && send('e_关闭');
+              }}
+            >
+              <video src={currentUrl} controls autoPlay></video>
+            </div>
+          ) : null}
+
+          {state.matches('初始化完成.下载.下载中') ? (
+            <div className="App-inited-download">
+              <Progress type="circle" percent={downloadProgress} />
+            </div>
+          ) : null}
+        </div>
+      ) : null}
       {state.matches('未初始化') ? (
-        <div>
+        <div className="App-uninit">
-          <p>未初始化</p>
+          <Alert message="首次进入，请先初始化~" type="warning" showIcon closable={false} />
-          <button onClick={() => send('e_开始初始化')}>初始化</button>
+          <Button
-          <button onClick={() => send('e_重新检测')}>重新检测</button>
+            size="large"
+            onClick={() => send('e_开始初始化')}
+            type="primary"
+            icon={<FormatPainterOutlined />}
+          >
+            初始化
+          </Button>
+          &nbsp;&nbsp;
+          <Button size="large" onClick={() => send('e_重新检测')} icon={<RedoOutlined />}>
+            重新检测
+          </Button>
         </div>
       ) : null}
     </div>

src/App.less

@@ -1,2 +1,52 @@
 .App {
+  padding: 10px;
+
+  &-uninit{
+      text-align: center;
+      padding: 10px;
+
+      & button{
+          margin-top: 50px;
+      }
+  }
+
+  &-inited {
+    &-clear {
+      margin-bottom: 10px;
+    }
+
+    &-github {
+      float: right;
+    }
+
+    &-preview {
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999999999;
+
+      & > video {
+        max-width: 90%;
+        max-height: 90%;
+      }
+    }
+    &-download {
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999999999;
+    }
+  }
 }

src/fsm.js

@@ -1,10 +1,18 @@
-import { createMachine } from 'xstate';
+import { createMachine, actions } from 'xstate';
 import { ipcRenderer } from 'electron';
+import prettyBytes from 'pretty-bytes';
+import { uniqBy } from 'lodash';
+import { message } from 'antd';
 
 export default createMachine(
   {
     id: '微信视频号下载工具',
-    context: {},
+    context: {
+      captureList: [],
+      currentUrl: '',
+      savePath: '',
+      downloadProgress: 0,
+    },
     initial: '检测初始化',
     states: {
       检测初始化: {
@@ -54,14 +62,22 @@ export default createMachine(
           e_视频捕获: {
             actions: 'action_视频捕获',
           },
+          e_开启服务失败: {
+            target: '开启服务失败',
+          },
+          e_清空捕获记录: {
+            actions: 'action_清空捕获记录',
+          },
         },
         states: {
           空闲: {
             on: {
               e_下载: {
+                actions: 'action_设置当前地址',
                 target: '下载',
               },
               e_预览: {
+                actions: 'action_设置当前地址',
                 target: '预览',
               },
               e_改变规则: {
@@ -74,9 +90,12 @@ export default createMachine(
             states: {
               选择位置: {
                 on: {
-                  e_确认位置: { target: '下载中' },
+                  e_确认位置: { actions: 'action_存储下载位置', target: '下载中' },
                   e_取消: { target: '#初始化完成.空闲' },
                 },
+                invoke: {
+                  src: 'invoke_选择下载位置',
+                },
               },
               下载中: {
                 on: {
@@ -84,13 +103,17 @@ export default createMachine(
                     actions: 'action_进度变化',
                   },
                   e_下载完成: {
-                    target: '下载完成',
+                    target: '#初始化完成.空闲',
+                    actions: 'action_下载完成',
                   },
                   e_下载失败: {
                     target: '#初始化完成.空闲',
                     actions: 'action_下载失败',
                   },
                 },
+                invoke: {
+                  src: 'invoke_下载视频',
+                },
               },
               下载完成: {
                 on: {
@@ -111,6 +134,13 @@ export default createMachine(
           },
         },
       },
+      开启服务失败: {
+        on: {
+          e_重试: {
+            target: '初始化完成',
+          },
+        },
+      },
     },
   },
   {
@@ -131,17 +161,102 @@ export default createMachine(
           .finally(() => send('e_重新检测'));
       },
       invoke_启动服务: (context, event) => send => {
-        ipcRenderer.invoke('invoke_启动服务');
+        const fnDealVideoCapture = (eName, { url, size }) => {
-        // .then(data => {})
+          send({ type: 'e_视频捕获', url, size });
-        // .catch(data => {});
+        };
+
+        ipcRenderer
+          .invoke('invoke_启动服务')
+          .then(() => {
+            ipcRenderer.on('VIDEO_CAPTURE', fnDealVideoCapture);
+          })
+          .catch(() => {
+            send('e_开启服务失败');
+          });
+
+        return () => {
+          ipcRenderer.removeListener('VIDEO_CAPTURE', fnDealVideoCapture);
+        };
       },
+      invoke_选择下载位置: (context, event) => send => {
+        ipcRenderer
+          .invoke('invoke_选择下载位置')
+          .then(data => {
+            send({
+              type: 'e_确认位置',
+              data,
+            });
+          })
+          .catch(() => send('e_取消'));
+      },
+      invoke_下载视频:
+        ({ currentUrl, savePath }) =>
+        send => {
+          ipcRenderer
+            .invoke('invoke_下载视频', {
+              url: currentUrl,
+              savePath,
+            })
+            .then(({ fullFileName }) => {
+              send({ type: 'e_下载完成', fullFileName, currentUrl });
+            })
+            .catch(() => {
+              send('e_下载失败');
+            });
+
+          ipcRenderer.on('e_进度变化', (event, arg) => {
+            send({
+              type: 'e_进度变化',
+              data: arg,
+            });
+          });
+
+          return () => {
+            ipcRenderer.removeAllListeners('e_进度变化');
+          };
+        },
     },
     actions: {
-      action_视频捕获: (context, event) => {},
+      action_视频捕获: actions.assign(({ captureList }, { size, url }) => {
-      action_改变规则: (context, event) => {},
+        captureList.push({ size, url, prettySize: prettyBytes(+size) });
-      action_进度变化: (context, event) => {},
+
-      action_下载失败: (context, event) => {},
+        return {
-      action_打开文件位置: (context, event) => {},
+          captureList: uniqBy(captureList, 'url'),
+        };
+      }),
+      action_清空捕获记录: actions.assign(() => {
+        return {
+          captureList: [],
+        };
+      }),
+      action_设置当前地址: actions.assign((_, { url }) => {
+        return {
+          currentUrl: url,
+        };
+      }),
+      action_存储下载位置: actions.assign((_, { data }) => {
+        return {
+          savePath: data,
+        };
+      }),
+      action_进度变化: actions.assign((_, { data }) => {
+        return {
+          downloadProgress: ~~(data * 100),
+        };
+      }),
+      action_下载完成: actions.assign(({ captureList }, { fullFileName, currentUrl }) => {
+        return {
+          captureList: captureList.map(item => {
+            if (item.url === currentUrl) {
+              item.fullFileName = fullFileName;
+            }
+            return item;
+          }),
+        };
+      }),
+      action_下载失败: actions.log(() => {
+        message.error('网络错误，请重试');
+      }),
     },
   },
 );

src/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
+import 'antd/dist/antd.css';
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>