-
- 
- REC
-
- {props.type == 'pin' ? (
-
- }
- title={t('nav.zoomIn')}
- onClick={() => props.onZoomIn()}
- />
- }
- title={t('nav.zoomOut')}
- onClick={() => props.onZoomOut()}
- />
- }
- title={t('nav.oneToOne')}
- onClick={() => props.onOneToOne()}
- />
- }
- title={t('nav.rotateRight')}
- onClick={() => props.onRotateRight()}
- />
-
- ) : (
-
- }
- title={t('nav.download')}
- onClick={() => props.onDownload()}
- />
- }
- title={t('nav.alwaysOnTopWin')}
- onClick={() => handleAlwaysOnTopWin()}
- />
- }
- title={t('nav.openFile')}
- onClick={() => props.onOpenFile()}
- />
- }
- title={t('nav.uploadFile')}
- onClick={() => props.onUploadFile()}
- />
- }
- title={t('nav.scan')}
- onClick={() => props.onScan()}
- />
- }
- title={t('nav.search')}
- onClick={() => props.onSearch()}
- />
- }
- title={t('nav.zoomIn')}
- onClick={() => props.onZoomIn()}
- />
- }
- title={t('nav.zoomOut')}
- onClick={() => props.onZoomOut()}
- />
- }
- title={t('nav.oneToOne')}
- onClick={() => props.onOneToOne()}
- />
- }
- title={t('nav.prev')}
- onClick={() => props.onPrev()}
- />
- }
- title={t('nav.next')}
- onClick={() => props.onNext()}
- />
- }
- title={t('nav.rotateLeft')}
- onClick={() => props.onRotateLeft()}
- />
- }
- title={t('nav.rotateRight')}
- onClick={() => props.onRotateRight()}
- />
- }
- title={t('nav.flipHorizontal')}
- onClick={() => props.onFlipHorizontal()}
- />
- }
- title={t('nav.flipVertical')}
- onClick={() => props.onFlipVertical()}
- />
- }
- title={t('nav.edit')}
- onClick={() => props.onEdit()}
- />
-
- )}
-
-
- }
- title={t('nav.minimize')}
- onClick={handleMinimizeWin}
+
+
diff --git a/packages/web/src/components/common/winBar/index.tsx b/packages/web/src/components/common/winBar/index.tsx
index c73c3d2c..54630b40 100644
--- a/packages/web/src/components/common/winBar/index.tsx
+++ b/packages/web/src/components/common/winBar/index.tsx
@@ -2,82 +2,240 @@ import {
BlockOutlined,
BorderOutlined,
CloseOutlined,
+ DownloadOutlined,
+ EditOutlined,
+ FolderOpenOutlined,
+ LeftOutlined,
MinusOutlined,
+ OneToOneOutlined,
+ PictureOutlined,
PushpinOutlined,
+ RightOutlined,
+ RotateLeftOutlined,
+ RotateRightOutlined,
+ ScanOutlined,
+ SearchOutlined,
+ ZoomInOutlined,
+ ZoomOutOutlined,
} from '@ant-design/icons';
+import { FlipHorizontally, FlipVertically, Close, Minus, MinusTheTop } from '@icon-park/react';
import { Button } from 'antd';
-import { ipcRenderer } from 'electron';
import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import styles from './index.module.scss';
-const WinBar = () => {
+const logo = './imgs/icons/png/512x512.png';
+const Header = (props) => {
+ const { t } = useTranslation();
const [isMaximize, setIsMaximize] = useState(false);
- const [isAlwaysOnTop, setIsAlwaysOnTop] = useState(false);
+ const [isTop, setIsTop] = useState(false);
- async function handleCloseWin() {
- ipcRenderer.send('vi:close-win');
+ async function handleMinimizeWin() {
+ props.onMinimizeWin();
}
- async function handleHideWin() {
- ipcRenderer.send('vi:hide-win');
- }
-
- function handleMinimizeWin() {
- ipcRenderer.send('vi:minimize-win');
- }
-
- function handleMaximizeWin() {
- ipcRenderer.send('vi:maximize-win');
- setIsMaximize(true);
- }
-
- function handleUnmaximizeWin() {
- ipcRenderer.send('vi:unmaximize-win');
- setIsMaximize(false);
+ function handleCloseWin() {
+ props.onCloseWin();
}
function handleToggleMaximizeWin() {
- isMaximize ? handleUnmaximizeWin() : handleMaximizeWin();
+ props.onToggleMaximizeWin(isMaximize);
+ setIsMaximize(!isMaximize);
}
- function handleToggleAlwaysOnTopWin() {
- const _isAlwaysOnTop = !isAlwaysOnTop;
- setIsAlwaysOnTop(_isAlwaysOnTop);
- ipcRenderer.send('vi:set-always-on-top', _isAlwaysOnTop);
+ function handleAlwaysOnTopWin() {
+ let _isTop = !isTop;
+ props.onAlwaysOnTopWin(_isTop);
+ setIsTop(_isTop);
}
return (
-
+ props.onDownload()}
+ />
+ handleAlwaysOnTopWin()}
+ />
+ props.onOpenFile()}
+ />
+ props.onUploadFile()}
+ />
+ props.onScan()} />
+ props.onSearch()}
+ />
+ props.onZoomIn()}
+ />
+ props.onZoomOut()}
+ />
+ props.onOneToOne()}
+ />
+ props.onPrev()} />
+ props.onNext()} />
+ props.onRotateLeft()}
+ />
+ props.onRotateRight()}
+ />
+ props.onFlipHorizontal()}
/>
-
- ) : (
- props.onFlipVertical()}
/>
- }
- title={t('nav.close')}
- onClick={handleCloseWin}
+ props.onEdit()} />
+ window.print()}
/>
- }
- className={`toolbarIcon ${isAlwaysOnTop ? 'active' : ''}`}
- title="置顶"
- onClick={() => handleToggleAlwaysOnTopWin()}
- />
- }
- className="toolbarIcon"
- title="最小化"
- onClick={() => handleMinimizeWin()}
- />
- :
+
);
};
-export default WinBar;
+export default Header;
diff --git a/packages/web/src/pages/pinImage/index.tsx b/packages/web/src/pages/pinImage/index.tsx
index 1362dee9..5ba63146 100644
--- a/packages/web/src/pages/pinImage/index.tsx
+++ b/packages/web/src/pages/pinImage/index.tsx
@@ -3,7 +3,7 @@ import type { MenuProps } from 'antd';
import { Dropdown } from 'antd';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import Header from '../../components/common/header';
+import Header from '../../components/common/winBar';
import { db } from '../../db';
import ininitApp from '../../pages/main';
import styles from './index.module.scss';
diff --git a/packages/web/src/pages/pinVideo/index.tsx b/packages/web/src/pages/pinVideo/index.tsx
index 0cb0e4b4..0fdfdfb1 100644
--- a/packages/web/src/pages/pinVideo/index.tsx
+++ b/packages/web/src/pages/pinVideo/index.tsx
@@ -8,7 +8,6 @@ import type { MenuProps } from 'antd';
import { Dropdown, Modal } from 'antd';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
-// import Header from '../../components/common/header';
import { db, defaultUser } from '../../db';
import ininitApp from '../main';
import styles from './index.module.scss';
+
+ REC
+
+ {props.type == 'pin' ? (
+
+ }
+ title={t('nav.zoomIn')}
+ onClick={() => props.onZoomIn()}
+ />
+ }
+ title={t('nav.zoomOut')}
+ onClick={() => props.onZoomOut()}
+ />
+ }
+ title={t('nav.oneToOne')}
+ onClick={() => props.onOneToOne()}
+ />
+ }
+ title={t('nav.rotateRight')}
+ onClick={() => props.onRotateRight()}
+ />
+
+ ) : (
+
+ }
+ title={t('nav.download')}
+ onClick={() => props.onDownload()}
+ />
+ }
+ title={t('nav.alwaysOnTopWin')}
+ onClick={() => handleAlwaysOnTopWin()}
+ />
+ }
+ title={t('nav.openFile')}
+ onClick={() => props.onOpenFile()}
+ />
+ }
+ title={t('nav.uploadFile')}
+ onClick={() => props.onUploadFile()}
+ />
+ }
+ title={t('nav.scan')}
+ onClick={() => props.onScan()}
+ />
+ }
+ title={t('nav.search')}
+ onClick={() => props.onSearch()}
+ />
+ }
+ title={t('nav.zoomIn')}
+ onClick={() => props.onZoomIn()}
+ />
+ }
+ title={t('nav.zoomOut')}
+ onClick={() => props.onZoomOut()}
+ />
+ }
+ title={t('nav.oneToOne')}
+ onClick={() => props.onOneToOne()}
+ />
+ }
+ title={t('nav.prev')}
+ onClick={() => props.onPrev()}
+ />
+ }
+ title={t('nav.next')}
+ onClick={() => props.onNext()}
+ />
+ }
+ title={t('nav.rotateLeft')}
+ onClick={() => props.onRotateLeft()}
+ />
+ }
+ title={t('nav.rotateRight')}
+ onClick={() => props.onRotateRight()}
+ />
+ }
+ title={t('nav.flipHorizontal')}
+ onClick={() => props.onFlipHorizontal()}
+ />
+ }
+ title={t('nav.flipVertical')}
+ onClick={() => props.onFlipVertical()}
+ />
+ }
+ title={t('nav.edit')}
+ onClick={() => props.onEdit()}
+ />
+
+ )}
+
+
+ }
+ title={t('nav.minimize')}
+ onClick={handleMinimizeWin}
+ />
+
+ ) : (
+