feat: 预览图片打印

027xiguapi · Apr 12, 2024 · a98d3ec · a98d3ec
1 parent a7b209a
commit a98d3ec
Show file tree

Hide file tree

Showing 8 changed files with 321 additions and 272 deletions.
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -19,7 +19,9 @@
 
 ## 📖 简介
 
-> pear-rec(梨子 rec) 是一个跨平台的截图、录屏、录音、录像、录制(动图)gif、查看图片、查看视频、查看音频和修改图片的软件。
+> pear-rec 是一款功能强大的截屏、录屏和录音软件，适用于多个平台和各种使用场景。它提供了简单易用的界面和丰富的功能，使用户能够轻松记录屏幕活动、录制音频和截取屏幕截图。无论是在教育、工作还是娱乐中，pear-rec都能为用户提供便捷和高效的录制工具。
+>
+> pear-rec(梨子 rec) 是一个跨平台的截图、录屏、录音、录像、录制(动图)gif、查看图片、查看视频、查看音频和修改图片的软件，目前提供了 Windows 、Linux 和 macOS [免费下载](https://github.com/027xiguapi/pear-rec/releases)。
 >
 > 更多功能和 api 可以查看[官网(https://027xiguapi.github.io/pear-rec)](https://027xiguapi.github.io/pear-rec) 或 [https://xiguapi027.gitee.io/pear-rec](https://xiguapi027.gitee.io/pear-rec)
 
@@ -152,8 +154,6 @@ pnpm run clear
 | --- | --- | --- | --- |
 | 链接 | [下载](https://github.com/027xiguapi/pear-rec/releases) | [下载](https://github.com/027xiguapi/pear-rec/releases) | [下载](https://github.com/027xiguapi/pear-rec/releases) |
 
-国内可以用 [GitHub Proxy](https://ghproxy.com/) 加速下载
-
 ## 👨‍👨‍👦‍👦 反馈和交流
 
 我们推荐使用 [issue](https://github.com/027xiguapi/pear-rec/issues) 列表进行最直接有效的反馈，也可以下面的方式

diff --git a/packages/desktop/electron/win/viewImageWin.ts b/packages/desktop/electron/win/viewImageWin.ts
@@ -9,7 +9,7 @@ function createViewImageWin(search?: any): BrowserWindow {
   viewImageWin = new BrowserWindow({
     title: 'pear-rec 图片',
     icon: ICON,
-    frame: WIN_CONFIG.viewImage.frame,
+    // frame: WIN_CONFIG.viewImage.frame,
     autoHideMenuBar: WIN_CONFIG.viewImage.autoHideMenuBar, // 自动隐藏菜单栏
     webPreferences: {
       preload,

diff --git a/packages/docs/desktop/examples.md b/packages/docs/desktop/examples.md
@@ -6,6 +6,18 @@
 
 <center>本页展示 pear-rec 的一些功能例子</center>
 
+这款软件具备卓越的屏幕录制能力，能够实现以下功能:
+
+- **全高清截图**：捕捉每一刻，让每一次分享变得简单高效。
+- **实时屏幕录制**：记录你的操作步骤或展示内容。
+- **高质量音视频同步捕获**：录制音频和视频，保持同步。
+- **动态 GIF 生成**：制作有趣的动画图像。
+- **图片浏览**：方便地查看和管理你的图片文件。
+- **视频播放**：播放视频文件，无需切换到其他应用程序。
+- **音频回放**：听取录制的音频。
+- **图像编辑**：编辑图片，添加标注、滤镜等。
+- **视频转 GIF**：将视频文件转换为 GIF 格式，方便分享和使用。
+
 ## 架构
 
 <center>

diff --git a/packages/web/src/components/common/header/index.module.scss b/packages/web/src/components/common/header/index.module.scss
@@ -5,41 +5,26 @@
   display: flex;
   width: 100%;
   height: 32px;
-  background-color: #fff;
+  background-color: transparent;
+  justify-content: center;
   :global {
-    .left {
-      width: 100px;
-      height: 100%;
-      line-height: 32px;
-      white-space: nowrap;
-      text-align: left;
-      span {
-        display: inline-block;
-        height: 32px;
-        padding-left: 10px;
-        color: rgba(0, 0, 0, 0.88);
-        font-size: 18px;
-        line-height: 32px;
-      }
-      .logo {
-        width: 30px;
-        margin-left: 5px;
-        vertical-align: middle;
-      }
-    }
     .center {
-      flex: auto;
       white-space: nowrap;
       text-align: center;
+      display: flex;
+      align-items: center;
       .icon {
-        vertical-align: bottom;
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+      }
+      .icon:hover {
+        cursor: pointer;
+        background-color: #ccc;
       }
-    }
-    .right {
-      width: 100px;
-      min-width: 100px;
-      white-space: nowrap;
-      display: flex;
     }
   }
 }
diff --git a/packages/web/src/components/common/header/index.tsx b/packages/web/src/components/common/header/index.tsx
@@ -6,7 +6,7 @@ import {
   EditOutlined,
   FolderOpenOutlined,
   LeftOutlined,
-  MinusOutlined,
+  PrinterOutlined,
   OneToOneOutlined,
   PictureOutlined,
   PushpinOutlined,
@@ -50,188 +50,83 @@ const Header = (props) => {
   }
 
   return (
-    <div
-      className={`${props.className} ${styles.header} ${props.type == 'pin' ? 'no-drag' : 'drag'}`}
-    >
-      <div className="left" title="pear-rec">
-        <img className="logo" src={logo} alt="logo" />
-        <span>REC</span>
-      </div>
-      {props.type == 'pin' ? (
-        <div className="center">
-          <Button
-            className="zoomIn icon"
-            type="text"
-            icon={<ZoomInOutlined />}
-            title={t('nav.zoomIn')}
-            onClick={() => props.onZoomIn()}
-          />
-          <Button
-            className="zoomOut icon"
-            type="text"
-            icon={<ZoomOutOutlined />}
-            title={t('nav.zoomOut')}
-            onClick={() => props.onZoomOut()}
-          />
-          <Button
-            className="oneToOne icon"
-            type="text"
-            icon={<OneToOneOutlined />}
-            title={t('nav.oneToOne')}
-            onClick={() => props.onOneToOne()}
-          />
-          <Button
-            className="rotateRight icon"
-            type="text"
-            icon={<RotateRightOutlined />}
-            title={t('nav.rotateRight')}
-            onClick={() => props.onRotateRight()}
-          />
-        </div>
-      ) : (
-        <div className="center">
-          <Button
-            className="download icon  no-drag"
-            type="text"
-            icon={<DownloadOutlined />}
-            title={t('nav.download')}
-            onClick={() => props.onDownload()}
-          />
-          <Button
-            className="alwaysOnTopWin icon no-drag"
-            type="text"
-            icon={<PushpinOutlined style={{ color: isTop ? '#08c' : '' }} />}
-            title={t('nav.alwaysOnTopWin')}
-            onClick={() => handleAlwaysOnTopWin()}
-          />
-          <Button
-            className="openFile icon no-drag"
-            type="text"
-            icon={<FolderOpenOutlined />}
-            title={t('nav.openFile')}
-            onClick={() => props.onOpenFile()}
-          />
-          <Button
-            className="uploadFile icon no-drag"
-            type="text"
-            icon={<PictureOutlined />}
-            title={t('nav.uploadFile')}
-            onClick={() => props.onUploadFile()}
-          />
-          <Button
-            className="scan icon no-drag"
-            type="text"
-            icon={<ScanOutlined />}
-            title={t('nav.scan')}
-            onClick={() => props.onScan()}
-          />
-          <Button
-            className="search icon no-drag"
-            type="text"
-            icon={<SearchOutlined />}
-            title={t('nav.search')}
-            onClick={() => props.onSearch()}
-          />
-          <Button
-            className="zoomIn icon no-drag"
-            type="text"
-            icon={<ZoomInOutlined />}
-            title={t('nav.zoomIn')}
-            onClick={() => props.onZoomIn()}
-          />
-          <Button
-            className="zoomOut icon no-drag"
-            type="text"
-            icon={<ZoomOutOutlined />}
-            title={t('nav.zoomOut')}
-            onClick={() => props.onZoomOut()}
-          />
-          <Button
-            className="oneToOne icon no-drag"
-            type="text"
-            icon={<OneToOneOutlined />}
-            title={t('nav.oneToOne')}
-            onClick={() => props.onOneToOne()}
-          />
-          <Button
-            className="prev icon no-drag"
-            type="text"
-            icon={<LeftOutlined />}
-            title={t('nav.prev')}
-            onClick={() => props.onPrev()}
-          />
-          <Button
-            className="next icon no-drag"
-            type="text"
-            icon={<RightOutlined />}
-            title={t('nav.next')}
-            onClick={() => props.onNext()}
-          />
-          <Button
-            className="rotateLeft icon no-drag"
-            type="text"
-            icon={<RotateLeftOutlined />}
-            title={t('nav.rotateLeft')}
-            onClick={() => props.onRotateLeft()}
-          />
-          <Button
-            className="rotateRight icon no-drag"
-            type="text"
-            icon={<RotateRightOutlined />}
-            title={t('nav.rotateRight')}
-            onClick={() => props.onRotateRight()}
-          />
-          <Button
-            className="flipHorizontal icon no-drags"
-            type="text"
-            icon={<FlipHorizontally theme="outline" size="20" strokeWidth={3} />}
-            title={t('nav.flipHorizontal')}
-            onClick={() => props.onFlipHorizontal()}
-          />
-          <Button
-            className="flipVertical icon no-drag"
-            type="text"
-            icon={<FlipVertically theme="outline" size="20" strokeWidth={3} />}
-            title={t('nav.flipVertical')}
-            onClick={() => props.onFlipVertical()}
-          />
-          <Button
-            className="edit icon no-drag"
-            type="text"
-            icon={<EditOutlined />}
-            title={t('nav.edit')}
-            onClick={() => props.onEdit()}
-          />
-        </div>
-      )}
-
-      <div className={`right ${window.isElectron ? '' : 'hide'}`}>
-        <Button
-          className="minimize icon no-drag"
-          type="text"
-          icon={<Minus theme="outline" size="20" fill="#333" strokeWidth={3} />}
-          title={t('nav.minimize')}
-          onClick={handleMinimizeWin}
+    <div className={`${props.className} ${styles.header}`}>
+      <div className="center">
+        <DownloadOutlined
+          className="download icon "
+          title={t('nav.download')}
+          onClick={() => props.onDownload()}
+        />
+        <PushpinOutlined
+          style={{ color: isTop ? '#08c' : '' }}
+          className="alwaysOnTopWin icon"
+          title={t('nav.alwaysOnTopWin')}
+          onClick={() => handleAlwaysOnTopWin()}
+        />
+        <FolderOpenOutlined
+          className="openFile icon"
+          title={t('nav.openFile')}
+          onClick={() => props.onOpenFile()}
+        />
+        <PictureOutlined
+          className="uploadFile icon"
+          title={t('nav.uploadFile')}
+          onClick={() => props.onUploadFile()}
+        />
+        <ScanOutlined className="scan icon" title={t('nav.scan')} onClick={() => props.onScan()} />
+        <SearchOutlined
+          className="search icon"
+          title={t('nav.search')}
+          onClick={() => props.onSearch()}
+        />
+        <ZoomInOutlined
+          className="zoomIn icon"
+          title={t('nav.zoomIn')}
+          onClick={() => props.onZoomIn()}
+        />
+        <ZoomOutOutlined
+          className="zoomOut icon"
+          title={t('nav.zoomOut')}
+          onClick={() => props.onZoomOut()}
+        />
+        <OneToOneOutlined
+          className="oneToOne icon"
+          title={t('nav.oneToOne')}
+          onClick={() => props.onOneToOne()}
+        />
+        <LeftOutlined className="prev icon" title={t('nav.prev')} onClick={() => props.onPrev()} />
+        <RightOutlined className="next icon" title={t('nav.next')} onClick={() => props.onNext()} />
+        <RotateLeftOutlined
+          className="rotateLeft icon"
+          title={t('nav.rotateLeft')}
+          onClick={() => props.onRotateLeft()}
+        />
+        <RotateRightOutlined
+          className="rotateRight icon"
+          title={t('nav.rotateRight')}
+          onClick={() => props.onRotateRight()}
+        />
+        <FlipHorizontally
+          theme="outline"
+          size="24"
+          strokeWidth={3}
+          className="flipHorizontal icon"
+          title={t('nav.flipHorizontal')}
+          onClick={() => props.onFlipHorizontal()}
         />
-        <Button
-          className="toggleMaximize icon no-drag"
-          type="text"
-          icon={
-            isMaximize ? (
-              <MinusTheTop theme="outline" size="20" fill="#333" strokeWidth={3} />
-            ) : (
-              <BorderOutlined />
-            )
-          }
-          title={isMaximize ? '向下还原' : '最大化'}
-          onClick={() => handleToggleMaximizeWin()}
+        <FlipVertically
+          theme="outline"
+          size="24"
+          strokeWidth={3}
+          className="flipVertical icon"
+          title={t('nav.flipVertical')}
+          onClick={() => props.onFlipVertical()}
         />
-        <Button
-          className="close icon no-drag"
-          type="text"
-          icon={<Close theme="outline" size="20" fill="#333" strokeWidth={3} />}
-          title={t('nav.close')}
-          onClick={handleCloseWin}
+        <EditOutlined className="edit icon" title={t('nav.edit')} onClick={() => props.onEdit()} />
+        <PrinterOutlined
+          className="printer icon"
+          title={t('nav.edit')}
+          onClick={() => window.print()}
         />
       </div>
     </div>