perf: 钉图优化

027xiguapi · Jan 18, 2024 · 3342426 · 3342426
1 parent a60029f
commit 3342426
Show file tree

Hide file tree

Showing 11 changed files with 363 additions and 243 deletions.
diff --git a/packages/desktop/electron/main/ipcMain.ts b/packages/desktop/electron/main/ipcMain.ts
@@ -346,11 +346,14 @@ function initIpcMain() {
     pinImageWin.closePinImageWin();
   });
   ipcMain.on('pi:minimize-win', () => {
-    pinImageWin.maximizePinImageWin();
+    pinImageWin.minimizePinImageWin();
   });
   ipcMain.on('pi:maximize-win', () => {
     pinImageWin.maximizePinImageWin();
   });
+  ipcMain.on('pi:unmaximize-win', () => {
+    pinImageWin.unmaximizePinImageWin();
+  });
 
   // 录全屏
   ipcMain.on('rfs:open-win', () => {

diff --git a/packages/desktop/electron/preload/electronAPI.ts b/packages/desktop/electron/preload/electronAPI.ts
@@ -111,6 +111,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   sendPiCloseWin: () => ipcRenderer.send('pi:close-win'),
   sendPiMinimizeWin: () => ipcRenderer.send('pi:minimize-win'),
   sendPiMaximizeWin: () => ipcRenderer.send('pi:maximize-win'),
+  sendPiUnmaximizeWin: () => ipcRenderer.send('pi:unmaximize-win'),
 
   // rfs 全屏录屏
   sendRfsOpenWin: () => ipcRenderer.send('rfs:open-win'),

diff --git a/packages/desktop/electron/win/pinImageWin.ts b/packages/desktop/electron/win/pinImageWin.ts
@@ -62,6 +62,10 @@ function maximizePinImageWin() {
   pinImageWin?.maximize();
 }
 
+function unmaximizePinImageWin() {
+  pinImageWin?.unmaximize();
+}
+
 export {
   closePinImageWin,
   createPinImageWin,
@@ -70,4 +74,5 @@ export {
   minimizePinImageWin,
   openPinImageWin,
   showPinImageWin,
+  unmaximizePinImageWin,
 };
diff --git a/packages/web/src/components/card/viewImageCard.tsx b/packages/web/src/components/card/viewImageCard.tsx
@@ -1,15 +1,12 @@
-import React, { useImperativeHandle, forwardRef, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PictureOutlined, DownOutlined } from '@ant-design/icons';
+import { DownOutlined, PictureOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Space, Card, Dropdown, Modal } from 'antd';
+import { Card, Dropdown, Modal, Space } from 'antd';
+import { forwardRef, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const ViewImageCard = forwardRef((props: any, ref: any) => {
-  useImperativeHandle(ref, () => ({
-    // handleViewImage,
-  }));
-
   const { t } = useTranslation();
+  const pinRef = useRef(null);
   const fileRef = useRef(null);
   const imgRef = useRef(null);
   const directoryRef = useRef(null);
@@ -20,14 +17,20 @@ const ViewImageCard = forwardRef((props: any, ref: any) => {
   // }
 
   const onClick: MenuProps['onClick'] = ({ key }) => {
-    if (key == 'file') {
+    if (key == 'pin') {
+      pinRef.current.click();
+    } else if (key == 'file') {
       fileRef.current.click();
     } else {
       directoryRef.current.click();
     }
   };
 
   const items: MenuProps['items'] = [
+    {
+      label: '钉图',
+      key: 'pin',
+    },
     {
       label: '打开图片',
       key: 'file',
@@ -85,6 +88,25 @@ const ViewImageCard = forwardRef((props: any, ref: any) => {
     event.target.value = '';
   }
 
+  function handlePinImg(event) {
+    const file = event.target.files[0];
+    if (window.electronAPI) {
+      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 = '';
+  }
+
   return (
     <Card hoverable bordered={false} style={{ maxWidth: 300, minWidth: 140, height: 130 }}>
       <span className="extra" onClick={() => imgRef.current.click()}>
@@ -99,6 +121,13 @@ const ViewImageCard = forwardRef((props: any, ref: any) => {
         </Dropdown>
         <div className="cardTitle">{t('home.viewImage')}</div>
       </div>
+      <input
+        type="file"
+        ref={pinRef}
+        accept="image/png,image/jpeg,.webp"
+        className="fileRef"
+        onChange={handlePinImg}
+      />
       <input
         type="file"
         ref={fileRef}

diff --git a/packages/web/src/components/common/header/index.module.scss b/packages/web/src/components/common/header/index.module.scss
@@ -29,13 +29,17 @@
     .center {
       flex: auto;
       text-align: center;
-      // -webkit-app-region: drag;
+      -webkit-app-region: drag;
       .icon {
         vertical-align: bottom;
+        -webkit-app-region: no-drag;
       }
     }
     .right {
       width: 100px;
+      .icon {
+        -webkit-app-region: no-drag;
+      }
     }
   }
 }