feat: 新增拼接图片页面

packages/desktop/electron/main/ipcMain.ts

@@ -22,6 +22,7 @@ import * as recorderVideoWin from '../win/recorderVideoWin';
 import * as recordsWin from '../win/recordsWin';
 import * as settingWin from '../win/settingWin';
 import * as shotScreenWin from '../win/shotScreenWin';
+import * as spliceImageWin from '../win/spliceImageWin';
 import * as viewAudioWin from '../win/viewAudioWin';
 import * as viewImageWin from '../win/viewImageWin';
 import * as viewVideoWin from '../win/viewVideoWin';
@@ -229,6 +230,14 @@ function initIpcMain() {
     editImageWin.downloadImg(imgUrl);
   });
 
+  // 图片拼接
+  ipcMain.on('si:close-win', () => {
+    spliceImageWin.closeSpliceImageWin();
+  });
+  ipcMain.on('si:open-win', () => {
+    spliceImageWin.openSpliceImageWin();
+  });
+
   // 动图编辑
   ipcMain.on('eg:close-win', () => {
     editGifWin.closeEditGifWin();

packages/desktop/electron/preload/electronAPI.ts

@@ -86,6 +86,10 @@ contextBridge.exposeInMainWorld('electronAPI', {
   sendEgCloseWin: () => ipcRenderer.send('eg:close-win'),
   sendEgOpenWin: (search?: string) => ipcRenderer.send('eg:open-win', search),
 
+  //siWin
+  sendSiCloseWin: () => ipcRenderer.send('si:close-win'),
+  sendSiOpenWin: () => ipcRenderer.send('si:open-win'),
+
   //vvWin
   sendVvOpenWin: (search?: string) => ipcRenderer.send('vv:open-win', search),
   sendVvCloseWin: () => ipcRenderer.send('vv:close-win'),

packages/desktop/electron/win/spliceImageWin.ts

@@ -0,0 +1,45 @@
+import { BrowserWindow } from 'electron';
+import { join } from 'node:path';
+import { DIST, ICON, WEB_URL, preload, url } from '../main/contract';
+
+const spliceImageHtml = join(DIST, './spliceImage.html');
+let spliceImageWin: BrowserWindow | null = null;
+
+function createSpliceImageWin(): BrowserWindow {
+  spliceImageWin = new BrowserWindow({
+    title: 'pear-rec 凭借图片',
+    icon: ICON,
+    height: 768,
+    width: 1024,
+    autoHideMenuBar: true, // 自动隐藏菜单栏
+    webPreferences: {
+      preload,
+    },
+  });
+
+  // spliceImageWin.webContents.openDevTools();
+  if (url) {
+    spliceImageWin.loadURL(WEB_URL + `spliceImage.html`);
+  } else {
+    spliceImageWin.loadFile(spliceImageHtml);
+  }
+
+  spliceImageWin.once('ready-to-show', async () => {
+    spliceImageWin?.show();
+  });
+
+  return spliceImageWin;
+}
+
+function openSpliceImageWin() {
+  if (!spliceImageWin || spliceImageWin?.isDestroyed()) {
+    spliceImageWin = createSpliceImageWin();
+  }
+  spliceImageWin.show();
+}
+
+function closeSpliceImageWin() {
+  spliceImageWin?.close();
+}
+
+export { closeSpliceImageWin, createSpliceImageWin, openSpliceImageWin };

packages/web/src/components/card/viewImageCard.tsx

@@ -11,13 +11,14 @@ const ViewImageCard = forwardRef((props: any, ref: any) => {
   const imgRef = useRef(null);
   const directoryRef = useRef(null);
 
-  // function handleViewImage(e: any) {
-  //   window.electronAPI ? window.electronAPI.sendViOpenWin() : (location.href = '/viewImage.html');
-  //   e.stopPropagation();
-  // }
-
   const onClick: MenuProps['onClick'] = ({ key }) => {
-    if (key == 'pin') {
+    if (key == 'edit') {
+      imgRef.current.click();
+    } else if (key == 'splice') {
+      if (window.isElectron) {
+        window.electronAPI.sendSiOpenWin();
+      }
+    } else if (key == 'pin') {
       pinRef.current.click();
     } else if (key == 'file') {
       fileRef.current.click();
@@ -27,10 +28,6 @@ const ViewImageCard = forwardRef((props: any, ref: any) => {
   };
 
   const items: MenuProps['items'] = [
-    {
-      label: '钉图',
-      key: 'pin',
-    },
     {
       label: '打开图片',
       key: 'file',
@@ -40,6 +37,19 @@ const ViewImageCard = forwardRef((props: any, ref: any) => {
       key: 'directory',
       disabled: !window.electronAPI,
     },
+    {
+      label: '钉图',
+      key: 'pin',
+      disabled: !window.electronAPI,
+    },
+    {
+      label: '编辑图片',
+      key: 'edit',
+    },
+    {
+      label: '拼接图片',
+      key: 'splice',
+    },
   ];
 
   function handleUploadFile(event) {
@@ -63,7 +73,7 @@ const ViewImageCard = forwardRef((props: any, ref: any) => {
 
   function handleUploadImg(event) {
     const file = event.target.files[0];
-    if (window.electronAPI) {
+    if (window.isElectron) {
       window.electronAPI.sendEiOpenWin({ imgUrl: file.path });
     } else {
       const imgUrl = window.URL.createObjectURL(file);
@@ -82,27 +92,16 @@ const ViewImageCard = forwardRef((props: any, ref: any) => {
 
   function handleUploadDirectory(event) {
     const file = event.target.files[0];
-    if (window.electronAPI) {
+    if (window.isElectron) {
       window.electronAPI.sendViOpenWin({ imgUrl: file.path });
     }
     event.target.value = '';
   }
 
   function handlePinImg(event) {
     const file = event.target.files[0];
-    if (window.electronAPI) {
+    if (window.isElectron) {
       window.electronAPI.sendPiOpenWin({ imgUrl: file.path });
-    } else {
-      const imgUrl = window.URL.createObjectURL(file);
-      Modal.confirm({
-        title: '提示',
-        content: `是否钉图${file.name}`,
-        okText: t('modal.ok'),
-        cancelText: t('modal.cancel'),
-        onOk() {
-          window.open(`/pinImage.html?imgUrl=${encodeURIComponent(imgUrl)}`);
-        },
-      });
     }
     event.target.value = '';
   }

packages/web/src/components/editGif/tool/Setting.tsx

@@ -86,6 +86,7 @@ const Setting = (props) => {
         width={'90%'}
         style={{ top: 10 }}
         open={isModalOpen}
+        destroyOnClose
         // onOk={() => setIsModalOpen(false)}
         onCancel={() => setIsModalOpen(false)}
         footer={[]}

packages/web/src/components/editGif/tool/Splice.tsx

@@ -1,6 +1,6 @@
 import { AlignHorizontally, AlignVertically } from '@icon-park/react';
 import { Modal } from 'antd';
-import { useContext, useState } from 'react';
+import { useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useApi } from '../../../api';
 import { GifContext } from '../../context/GifContext';
@@ -15,23 +15,40 @@ const Splice = (props) => {
   const { user, setUser } = useContext(UserContext);
   const { historyState, historyDispatch } = useContext(HistoryContext);
   const { gifState, gifDispatch } = useContext(GifContext);
+  const fileListRef = useRef([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isVertical, setIsVertical] = useState(true);
 
   function handleVerticalSpliceFrames() {
-    // const newVideoFrames = [...gifState.videoFrames];
-    // const videoFrame = newVideoFrames[gifState.index];
-    setIsModalOpen(true);
+    const newVideoFrames = [...gifState.videoFrames];
+    const videoFrame = newVideoFrames[gifState.index];
     setIsVertical(true);
-    // console.log(videoFrame);
+    const _fileList = [
+      {
+        uid: videoFrame.index + '-' + new Date(),
+        name: videoFrame.index + '.png',
+        url: videoFrame.url,
+        thumbUrl: videoFrame.url,
+      },
+    ];
+    fileListRef.current = _fileList;
+    setIsModalOpen(true);
   }
 
   function handleHorizontalSpliceFrames() {
     const newVideoFrames = [...gifState.videoFrames];
     const videoFrame = newVideoFrames[gifState.index];
-    setIsModalOpen(true);
     setIsVertical(false);
-    console.log(videoFrame);
+    const _fileList = [
+      {
+        uid: videoFrame.index + '-' + new Date(),
+        name: videoFrame.index + '.png',
+        url: videoFrame.url,
+        thumbUrl: videoFrame.url,
+      },
+    ];
+    fileListRef.current = _fileList;
+    setIsModalOpen(true);
   }
 
   function handleSave(blob) {
@@ -61,13 +78,15 @@ const Splice = (props) => {
       <div className="subTitle">拼接</div>
       <Modal
         title="拼接图片"
-        style={{ top: 20 }}
+        width={'90%'}
+        style={{ top: 10 }}
         open={isModalOpen}
+        destroyOnClose
         // onOk={() => setIsModalOpen(false)}
         onCancel={() => setIsModalOpen(false)}
         footer={[]}
       >
-        <SpliceImg onSave={handleSave} isVertical={isVertical} />
+        <SpliceImg onSave={handleSave} isVertical={isVertical} fileList={fileListRef.current} />
       </Modal>
     </div>
   );