Skip to content

Commit

Permalink
feat: 增加钉图功能
Browse files Browse the repository at this point in the history
  • Loading branch information
027xiguapi committed Dec 4, 2023
1 parent b56215f commit cc5129c
Show file tree
Hide file tree
Showing 16 changed files with 252 additions and 19 deletions.
10 changes: 8 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,16 @@ git clone https://github.com/027xiguapi/pear-rec.git
cd pear-rec
# Install dependencies
pnpm install
# Rebuild electron
pnpm run rebuild:desktop
# Run the web
pnpm run dev:web
# Run the server
pnpm run dev:server
# Run the desktop
pnpm run dev:desktop
# Run the web
pnpm run start:web
# Run the desktop
pnpm run start:desktop
# Build the web
pnpm run build:web
# Build the desktop
Expand Down
14 changes: 6 additions & 8 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,19 +62,17 @@ git clone https://gitee.com/xiguapi027/pear-rec.git
cd pear-rec
# 安装依赖
pnpm install
# 重新打包 electron
pnpm run rebuild:desktop
# 调试页面
pnpm run dev:web
# 编译页面
pnpm run build:web
# 查看页面
pnpm run preview:web
# 调试服务
pnpm run dev:server
# 调试
# 调试软件
pnpm run dev:desktop
# 编译
# 运行页面
pnpm run start:web
# 运行软件
pnpm run start:desktop
# 编译软件
pnpm run build:desktop
```

Expand Down
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
"version": "1.1.0",
"description": "pear-rec is a cross platform screenshot, screen recording, audio recording, and video recording software.",
"scripts": {
"dev:desktop": "concurrently --names \"WEB,DESKTOP\" -c \"red,blue\" \"pnpm run -C packages/web dev\" \"wait-on tcp:9191 && pnpm run -C packages/desktop dev\"",
"start:desktop": "concurrently --names \"WEB,DESKTOP\" -c \"red,blue\" \"npm run dev:web\" \"wait-on tcp:9191 && pnpm run dev:desktop\"",
"dev:desktop": "pnpm run -C packages/desktop dev",
"build:desktop": "pnpm run -C packages/desktop build && pnpm run project:desktop && pnpm run -C packages/desktop build:win",
"project:desktop": "pnpm run -C packages/web build && node tools/copy-files-web2desktop.js",
"rebuild:server": "pnpm run -C packages/server rebuild && pnpm run -C packages/desktop rebuild",
"dev:web": "concurrently --names \"SERVER,WEB\" -c \"red,auto\" \"pnpm run dev:server\" \"wait-on tcp:9190 && pnpm run -C packages/web dev\"",
"start:web": "concurrently --names \"SERVER,WEB\" -c \"red,auto\" \"npm run dev:server\" \"wait-on tcp:9190 && npm run dev:web\"",
"dev:web": "pnpm run -C packages/web dev",
"build:web": "concurrently -s \"pnpm run -C packages/server dev\" \"pnpm run project:web\"",
"only-build:web": "pnpm run -C packages/web build",
"watch:web": "pnpm run -C packages/web watch",
Expand Down Expand Up @@ -63,4 +65,4 @@
"url": "https://github.com/027xiguapi/pear-rec/issues"
},
"license": "Apache-2.0"
}
}
4 changes: 4 additions & 0 deletions packages/desktop/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# @pear-rec/desktop

## 1.3.0

feat: 增加钉图功能

## 1.2.11

feat: 打包发布到 git
Expand Down
16 changes: 16 additions & 0 deletions packages/desktop/electron/main/ipcMain.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import * as viewVideoWin from '../win/viewVideoWin';
import * as viewAudioWin from '../win/viewAudioWin';
import * as settingWin from '../win/settingWin';
import * as recordsWin from '../win/recordsWin';
import * as pinImageWin from '../win/pinImageWin';
import * as utils from './utils';
import { editConfig } from './config';

Expand Down Expand Up @@ -367,6 +368,21 @@ function initIpcMain() {
recordsWin.closeRecordsWin();
recordsWin.openRecordsWin();
});

// 钉图
ipcMain.on('pi:open-win', (e, search) => {
console.log(111, search);
pinImageWin.openPinImageWin(search);
});
ipcMain.on('pi:close-win', () => {
pinImageWin.closePinImageWin();
});
ipcMain.on('pi:minimize-win', () => {
pinImageWin.maximizePinImageWin();
});
ipcMain.on('pi:maximize-win', () => {
pinImageWin.maximizePinImageWin();
});
}

initIpcMain();
6 changes: 6 additions & 0 deletions packages/desktop/electron/preload/electronAPI.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,4 +97,10 @@ contextBridge.exposeInMainWorld('electronAPI', {

//re
sendReOpenWin: () => ipcRenderer.send('re:open-win'),

//pi
sendPiOpenWin: (search?: any) => ipcRenderer.send('pi:open-win', search),
sendPiCloseWin: () => ipcRenderer.send('pi:close-win'),
sendPiMinimizeWin: () => ipcRenderer.send('pi:minimize-win'),
sendPiMaximizeWin: () => ipcRenderer.send('pi:maximize-win'),
});
75 changes: 75 additions & 0 deletions packages/desktop/electron/win/pinImageWin.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import { app, BrowserWindow, shell } from 'electron';
import { join } from 'node:path';
import { ICON, preload, url, DIST, WEB_URL } from '../main/contract';

const pinImageHtml = join(DIST, './pinImage.html');
let pinImageWin: BrowserWindow | null = null;

function createPinImageWin(search?: any): BrowserWindow {
pinImageWin = new BrowserWindow({
title: 'pear-rec 图片',
icon: ICON,
height: 450,
width: 600,
frame: false, // 无边框窗口
resizable: true, // 窗口大小是否可调整
transparent: true, // 使窗口透明
fullscreenable: false, // 窗口是否可以进入全屏状态
alwaysOnTop: true, // 窗口是否永远在别的窗口的上面
autoHideMenuBar: true, // 自动隐藏菜单栏
webPreferences: {
preload,
},
});

const imgUrl = search?.imgUrl || '';
// pinImageWin.webContents.openDevTools();
if (url) {
pinImageWin.loadURL(WEB_URL + `pinImage.html?imgUrl=${imgUrl}`);
} else {
pinImageWin.loadFile(pinImageHtml, {
search: `?imgUrl=${imgUrl}`,
});
}

return pinImageWin;
}

// 打开关闭录屏窗口
function closePinImageWin() {
pinImageWin?.isDestroyed() || pinImageWin?.close();
pinImageWin = null;
}

function openPinImageWin(search?: any) {
if (!pinImageWin || pinImageWin?.isDestroyed()) {
pinImageWin = createPinImageWin(search);
}
pinImageWin?.show();
}

function showPinImageWin() {
pinImageWin?.show();
}

function hidePinImageWin() {
pinImageWin?.hide();
}

function minimizePinImageWin() {
pinImageWin?.minimize();
}

function maximizePinImageWin() {
pinImageWin?.maximize();
}

export {
createPinImageWin,
closePinImageWin,
openPinImageWin,
showPinImageWin,
hidePinImageWin,
minimizePinImageWin,
maximizePinImageWin,
};
4 changes: 2 additions & 2 deletions packages/desktop/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@pear-rec/desktop",
"version": "1.2.11",
"version": "1.3.0",
"main": "dist-electron/main/index.js",
"description": "pear-rec",
"author": {
Expand Down Expand Up @@ -47,4 +47,4 @@
"engines": {
"node": "^14.18.0 || >=16.0.0"
}
}
}
4 changes: 4 additions & 0 deletions packages/server/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ export default function initApp() {
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(function (err, req, res, next) {
console.error('server:', err.stack);
res.status(500).send('服务器内部错误');
});

initConfig();
initApi(app);
Expand Down
4 changes: 4 additions & 0 deletions packages/web/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# @pear-rec/web

## 1.3.0

feat: 增加钉图功能

## 1.2.14

fix: 录音选择格式
Expand Down
2 changes: 1 addition & 1 deletion packages/web/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@pear-rec/web",
"private": true,
"version": "1.2.13",
"version": "1.3.0",
"scripts": {
"dev": "vite",
"build": "rimraf dist && tsc && vite build",
Expand Down
16 changes: 16 additions & 0 deletions packages/web/src/pages/pinImage.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/imgs/logo/favicon.ico" />
<title>pear-rec | 图片</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="./pinImage/index.tsx"></script>
</body>

</html>
9 changes: 9 additions & 0 deletions packages/web/src/pages/pinImage/index.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.pinImage {
width: 100%;
height: 100vh;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-app-region: drag;
}
86 changes: 86 additions & 0 deletions packages/web/src/pages/pinImage/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import type { MenuProps } from 'antd';
import ininitApp from '../../pages/main';
import { Dropdown, theme } from 'antd';
import { MinusOutlined, BorderOutlined, CloseOutlined } from '@ant-design/icons';
import { useApi } from '../../api';
import { useUserApi } from '../../api/user';
import styles from './index.module.scss';
const defaultImg = './imgs/th.webp';

const items: MenuProps['items'] = [
{
label: '关闭',
key: '1',
icon: <CloseOutlined />,
},
{
label: '最小化',
key: '2',
icon: <MinusOutlined />,
},
{
label: '最大化',
key: '3',
icon: <BorderOutlined />,
},
];

const PinImage: React.FC = () => {
const { t } = useTranslation();
const userApi = useUserApi();
const userRef = useRef({} as any);
const [imgUrl, setImgUrl] = useState<any>('');

useEffect(() => {
init();
userRef.current.id || getCurrentUser();
}, []);

async function getCurrentUser() {
try {
const res = (await userApi.getCurrentUser()) as any;
if (res.code == 0) {
userRef.current = res.data;
}
} catch (err) {
console.log(err);
}
}

async function init() {
const paramsString = location.search;
const searchParams = new URLSearchParams(paramsString);
let _imgUrl = searchParams.get('imgUrl') || defaultImg;
fetch(_imgUrl)
.then((response) => response.blob()) // 将获取到的图片转为 Blob
.then((blob) => {
setImgUrl(`url(${URL.createObjectURL(blob)})`);
});
}

const onClick: MenuProps['onClick'] = ({ key }) => {
if (key == '1') {
window.electronAPI.sendPiCloseWin();
} else if (key == '2') {
window.electronAPI.sendPiMinimizeWin();
} else {
window.electronAPI.sendPiMaximizeWin();
}
};

return (
<Dropdown menu={{ items, onClick }} trigger={['contextMenu']}>
<div
className={styles.pinImage}
style={{
backgroundImage: imgUrl,
}}
></div>
</Dropdown>
);
};

ininitApp(PinImage);
export default PinImage;
12 changes: 9 additions & 3 deletions packages/web/src/pages/viewImage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -201,9 +201,15 @@ const ViewImage = () => {
}

async function handleToggleAlwaysOnTopWin() {
const isAlwaysOnTop = await window.electronAPI?.invokeViSetIsAlwaysOnTop();
const icon = document.querySelector('.viewer-always-on-top-win');
isAlwaysOnTop ? icon.classList.add('current') : icon.classList.remove('current');
const imgUrl = imgs[initialViewIndex]?.url;
if (window.isElectron) {
window.electronAPI.sendPiOpenWin({ imgUrl });
} else {
window.open(`/pinImage.html?imgUrl=${imgUrl}`);
}
// const isAlwaysOnTop = await window.electronAPI?.invokeViSetIsAlwaysOnTop();
// const icon = document.querySelector('.viewer-always-on-top-win');
// isAlwaysOnTop ? icon.classList.add('current') : icon.classList.remove('current');
}

async function initImgs() {
Expand Down
1 change: 1 addition & 0 deletions packages/web/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const buildOptionsProject = {
recorderVideo: resolve(__dirname, 'src/pages/recorderVideo.html'),
recorderAudio: resolve(__dirname, 'src/pages/recorderAudio.html'),
viewImage: resolve(__dirname, 'src/pages/viewImage.html'),
pinImage: resolve(__dirname, 'src/pages/pinImage.html'),
viewVideo: resolve(__dirname, 'src/pages/viewVideo.html'),
setting: resolve(__dirname, 'src/pages/setting.html'),
clipScreen: resolve(__dirname, 'src/pages/clipScreen.html'),
Expand Down

0 comments on commit cc5129c

Please sign in to comment.