feat: 截图钉图

packages/desktop/electron/main/contract.ts

@@ -7,6 +7,9 @@ process.env.DIST = path.join(process.env.DIST_ELECTRON, '../dist');
 export const url = import.meta.env.VITE_DEV_SERVER_URL;
 export const WEB_URL = import.meta.env.VITE_WEB_URL;
 export const VITE_API_URL = import.meta.env.VITE_API_URL;
+// export const url = 'http://127.0.0.1:7777/';
+// export const WEB_URL = 'http://127.0.0.1:9191/';
+// export const VITE_API_URL = 'http://127.0.0.1:9190/';
 export const preload = path.join(__dirname, '../preload/index.js');
 
 export const DIST_ELECTRON = path.join(__dirname, '../');

packages/desktop/electron/main/index.ts

@@ -2,15 +2,14 @@ import { app, BrowserWindow, shell, ipcMain } from 'electron';
 import { release } from 'node:os';
 import * as mainWin from '../win/mainWin';
 import { initTray } from './tray';
-import './ipcMain';
 import { update } from './update';
 import { registerFileProtocol } from './protocol';
 import { registerGlobalShortcut, unregisterAllGlobalShortcut } from './globalShortcut';
-import { initConfig } from './config';
-import initApp from '@pear-rec/server/src';
+import { initConfig, getConfig } from '@pear-rec/server/src/config';
+import './ipcMain';
+import '@pear-rec/server/src';
 
-initApp();
-const config = initConfig();
+initConfig();
 
 // The built directory structure
 //
@@ -44,11 +43,11 @@ async function createWindow() {
 }
 
 app.whenReady().then(() => {
+  const config = getConfig();
   registerFileProtocol();
   createWindow();
   initTray(config.language);
   registerGlobalShortcut();
-  // Apply electron-updater
   update();
 });
 

packages/desktop/electron/main/ipcMain.ts

@@ -14,7 +14,7 @@ import * as recordsWin from '../win/recordsWin';
 import * as pinImageWin from '../win/pinImageWin';
 import * as recorderFullScreenWin from '../win/recorderFullScreenWin';
 import * as utils from './utils';
-import { editConfig } from './config';
+import { editConfig } from '@pear-rec/server/src/config';
 
 const selfWindws = async () =>
   await Promise.all(
@@ -159,6 +159,9 @@ function initIpcMain() {
   ipcMain.handle('ss:get-desktop-capturer-source', async () => {
     return [...(await desktopCapturer.getSources({ types: ['screen'] })), ...(await selfWindws())];
   });
+  ipcMain.on('ss:copy-img', (e, imgUrl) => {
+    shotScreenWin.copyImg(imgUrl);
+  });
   // 图片展示
   ipcMain.on('vi:open-win', (e, search) => {
     viewImageWin.openViewImageWin(search);

packages/desktop/electron/preload/electronAPI.ts

@@ -59,6 +59,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   sendSsDownloadImg: (imgUrl: string) => ipcRenderer.send('ss:download-img', imgUrl),
   sendSsSaveImg: (imgUrl: string) => ipcRenderer.send('ss:save-img', imgUrl),
   sendSsOpenExternal: (tabUrl: string) => ipcRenderer.send('ss:open-external', tabUrl),
+  sendSsCopyImg: (imgUrl: string) => ipcRenderer.send('ss:copy-img', imgUrl),
 
   //viWin
   sendViCloseWin: () => ipcRenderer.send('vi:close-win'),

packages/desktop/electron/win/pinImageWin.ts

@@ -42,9 +42,7 @@ function closePinImageWin() {
 }
 
 function openPinImageWin(search?: any) {
-  if (!pinImageWin || pinImageWin?.isDestroyed()) {
-    pinImageWin = createPinImageWin(search);
-  }
+  pinImageWin = createPinImageWin(search);
   pinImageWin?.show();
 }
 

packages/desktop/electron/win/shotScreenWin.ts

@@ -137,4 +137,5 @@ export {
   maximizeShotScreenWin,
   unmaximizeShotScreenWin,
   downloadURLShotScreenWin,
+  copyImg,
 };

packages/desktop/package.json

@@ -43,4 +43,4 @@
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
   }
-}
+}

packages/screenshot/src/Screenshots/icons/iconfont.scss

@@ -1,78 +1,88 @@
 @font-face {
-	font-family: "screenshots-icon"; /* Project id 572327 */
-	src: url("iconfont.woff2") format("woff2"),
-		url("iconfont.woff") format("woff"), url("iconfont.ttf") format("truetype");
+  font-family: 'screenshots-icon'; /* Project id 572327 */
+  src: url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'),
+    url('iconfont.ttf') format('truetype');
 }
 
-[class^="icon-"],
-[class*=" icon-"] {
-	font-family: "screenshots-icon" !important;
-	font-style: normal;
-	line-height: 1;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+[class^='icon-'],
+[class*=' icon-'] {
+  font-family: 'screenshots-icon' !important;
+  font-style: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-ok:before {
-	content: "\e001";
+  content: '\e001';
 }
 
 .icon-cancel:before {
-	content: "\e002";
+  content: '\e002';
 }
 
 .icon-save:before {
-	content: "\e003";
+  content: '\e003';
 }
 
 .icon-redo:before {
-	content: "\e004";
+  content: '\e004';
 }
 
 .icon-undo:before {
-	content: "\e005";
+  content: '\e005';
 }
 
 .icon-mosaic:before {
-	content: "\e006";
+  content: '\e006';
 }
 
 .icon-text:before {
-	content: "\e007";
+  content: '\e007';
 }
 
 .icon-brush:before {
-	content: "\e008";
+  content: '\e008';
 }
 
 .icon-arrow:before {
-	content: "\e009";
+  content: '\e009';
 }
 
 .icon-ellipse:before {
-	content: "\e00a";
+  content: '\e00a';
 }
 
 .icon-rectangle:before {
-	content: "\e00b";
+  content: '\e00b';
 }
 
 .icon-scan:before {
-	content: "";
-	background: transparent url(/imgs/svg/scan.svg) no-repeat 0px 0px;
-	background-size: 22px;
-	background-position: center;
-	width: 35px;
-	height: 35px;
-	display: inline-block;
+  content: '';
+  background: transparent url(/imgs/svg/scan.svg) no-repeat 0px 0px;
+  background-size: 22px;
+  background-position: center;
+  width: 35px;
+  height: 35px;
+  display: inline-block;
 }
 
 .icon-search:before {
-	content: "";
-	background: transparent url(/imgs/svg/search.svg) no-repeat 0px 0px;
-	background-size: 22px;
-	background-position: center;
-	width: 35px;
-	height: 35px;
-	display: inline-block;
+  content: '';
+  background: transparent url(/imgs/svg/search.svg) no-repeat 0px 0px;
+  background-size: 22px;
+  background-position: center;
+  width: 35px;
+  height: 35px;
+  display: inline-block;
+}
+
+.icon-pin:before {
+  content: '';
+  background: transparent url(/imgs/svg/pin.svg) no-repeat 0px 0px;
+  background-size: 22px;
+  background-position: center;
+  width: 35px;
+  height: 35px;
+  display: inline-block;
 }

packages/screenshot/src/Screenshots/operations/Pin/index.tsx

@@ -0,0 +1,37 @@
+import React, { ReactElement, useCallback } from 'react';
+import useStore from '../../hooks/useStore';
+import useCall from '../../hooks/useCall';
+import useCanvasContextRef from '../../hooks/useCanvasContextRef';
+import useHistory from '../../hooks/useHistory';
+import useReset from '../../hooks/useReset';
+import ScreenshotsButton from '../../ScreenshotsButton';
+import composeImage from '../../composeImage';
+
+export default function Pin(): ReactElement {
+  const { image, width, height, history, bounds, lang } = useStore();
+  const canvasContextRef = useCanvasContextRef();
+  const [, historyDispatcher] = useHistory();
+  const call = useCall();
+  const reset = useReset();
+
+  const onClick = useCallback(() => {
+    historyDispatcher.clearSelect();
+    setTimeout(() => {
+      if (!canvasContextRef.current || !image || !bounds) {
+        return;
+      }
+      composeImage({
+        image,
+        width,
+        height,
+        history,
+        bounds,
+      }).then((blob) => {
+        call('onPin', blob, bounds);
+        reset();
+      });
+    });
+  }, [canvasContextRef, historyDispatcher, image, width, height, history, bounds, call, reset]);
+
+  return <ScreenshotsButton title={lang.operation_scan_title} icon="icon-pin" onClick={onClick} />;
+}