Merge pull request #77 from ggchivalrous/feat/v1.5

Feat v1.5.6

electron/main/app.ts

@@ -142,8 +142,8 @@ export default class Application {
 
   private async createDefWin() {
     const opts: BrowserWindowConstructorOptions = {
-      width: 800 + (isDev ? 500 : 0),
-      height: 610,
+      width: 900 + (isDev ? 500 : 0),
+      height: 690,
       title: '壹印',
       frame: false,
       webPreferences: {

electron/main/index.ts

@@ -5,7 +5,7 @@ import { format } from 'util';
 
 import { setLoggerConfig, closeAllLogger } from '@modules/logger';
 import paths from '@src/path';
-import { formatDate } from '@utils';
+import { formatDate, tryCatch } from '@utils';
 import { app } from 'electron';
 
 const isDev = import.meta.env.DEV;
@@ -44,7 +44,10 @@ process.on('uncaughtExceptionMonitor', (e) => {
 });
 
 function onError(type: string, e: Error) {
-  const logPath = path.join(app.getPath('userData'), 'logs');
+  const appPath = app.getAppPath();
+  const userDataPath = tryCatch(() => app.getPath('userData'), appPath);
+  const logPath = path.join(userDataPath, 'logs');
+
   if (!fs.existsSync(logPath)) {
     fs.mkdirSync(logPath);
   }

electron/src/config.ts

@@ -2,7 +2,8 @@ import fs from 'node:fs';
 import path from 'node:path';
 
 import type { IFieldInfoItem, IConfig } from '@src/interface';
-import { app } from 'electron';
+
+import { userDataPath, getPath } from './path';
 
 import { exifFields, defTemps, getDefTemp } from '@/common/const';
 import { arrToObj, normalize, tryCatch } from '@/common/utils';
@@ -11,14 +12,14 @@ const needResetVer = ['1.5.0'];
 
 export const DefaultConfig: IConfig = {
   version: import.meta.env.VITE_VERSION,
-  dir: path.join(app.getPath('userData'), 'config.json'),
-  output: path.join(app.getPath('pictures'), 'watermark'),
-  cacheDir: path.join(app.getPath('temp'), 'yiyin'),
-  staticDir: path.join(app.getPath('userData'), 'static'),
+  dir: path.join(userDataPath, 'config.json'),
+  output: path.join(getPath('pictures'), 'watermark'),
+  cacheDir: path.join(getPath('temp'), 'yiyin'),
+  staticDir: path.join(userDataPath, 'static'),
 
   font: {
-    path: path.join(app.getPath('userData'), 'font.json'),
-    dir: path.join(app.getPath('userData'), 'font'),
+    path: path.join(userDataPath, 'font.json'),
+    dir: path.join(userDataPath, 'font'),
     map: {},
   },
 
@@ -40,6 +41,8 @@ export const DefaultConfig: IConfig = {
     font: 'PingFang SC',
     main_img_w_rate: 90,
     text_margin: 0.4,
+    quality: 100,
+    mini_top_bottom_margin: 0,
   },
 
   tempFields: [getDefOptionItem('')],

electron/src/modules/image-tool/index.ts

@@ -292,7 +292,7 @@ export class ImageTool extends Event {
     })
       .withMetadata({ density: this.meta.density })
       .composite(composite)
-      .toFormat('jpeg', { quality: 100 })
+      .toFormat('jpeg', { quality: this.outputOpt.quality || 100 })
       .toFile(this.outputFileNames.composite);
 
     log.info('【%s】图片合成完毕，输出到文件: ', this.id, this.outputFileNames.composite);
@@ -436,7 +436,7 @@ export class ImageTool extends Event {
   calcContentHeight() {
     const opt = this.outputOpt;
     const bgHeight = this.material.bg.h;
-    const mainImgTopOffset = bgHeight * 0.036;
+    const mainImgTopOffset = bgHeight * (opt.mini_top_bottom_margin / 100);
     const textButtomOffset = bgHeight * 0.027;
 
     // 主图上下间隔最小间隔
@@ -446,7 +446,7 @@ export class ImageTool extends Event {
     // 阴影宽度
     if (opt.shadow_show) {
       const shadowHeight = Math.ceil(this.material.main[0].h * ((opt.shadow || 0) / 100));
-      contentTop = Math.ceil(shadowHeight);
+      contentTop = Math.max(contentTop, Math.ceil(shadowHeight));
       mainImgOffset = contentTop * 2;
     }
 

electron/src/modules/image-tool/interface.ts

@@ -70,6 +70,16 @@ export interface OutputOption {
    * 文字上下间隔
    */
   text_margin: number
+
+  /**
+   * 输出质量
+   */
+  quality: number
+
+  /**
+   * 最小上下边距
+   */
+  mini_top_bottom_margin: number
 }
 
 export interface OutputFilePaths {

electron/src/path.ts

@@ -1,16 +1,24 @@
 import { join } from 'node:path';
 import os from 'os';
 
+import { tryCatch } from '@utils';
 import { app } from 'electron';
 
 const env = import.meta.env;
 const isDev = env.DEV;
 
+export const appPath = app.getAppPath();
+export const userDataPath = tryCatch(() => app.getPath('userData'), appPath);
+export const desktopPath = tryCatch(() => app.getPath('desktop'), userDataPath);
+export function getPath(name: Parameters<typeof app.getPath>[0]) {
+  return tryCatch(() => app.getPath(name), desktopPath, () => {});
+}
+
 const paths = {
   preload: join(isDev ? env.VITE_DIST_ELECTRON : app.getAppPath(), 'preload/index.js'),
   web: join(isDev ? env.VITE_WEB : app.getAppPath(), 'web'),
   public: env.VITE_PUBLIC,
-  logger: join(app.getPath('userData'), 'logs'),
+  logger: join(userDataPath, 'logs'),
   logo: '',
   exiftool: join(isDev ? env.VITE_DIST_ELECTRON : app.getAppPath(), 'exiftool', os.platform() === 'win32' ? 'exiftool.exe' : 'exiftool'),
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yiyin",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "license": "MIT",
   "type": "module",
   "main": "dist-electron/main/index.js",

web/main/components/actions/index.scss

@@ -42,6 +42,7 @@
     width: 350px;
     flex-basis: 350px;
     flex-grow: 0;
+    overflow: hidden;
 
     .output-setting {
       padding: 0 4px;

web/main/components/actions/index.svelte

@@ -1,5 +1,5 @@
 <script lang='ts'>
-  import { arrToObj } from '@common/utils';
+  import { arrToObj, roundDecimalPlaces } from '@common/utils';
   import { ActionItem } from '@components';
   import { Message, Switch, ColorPicker } from '@ggchivalrous/db-ui';
   import { config } from '@web/store/config';
@@ -9,7 +9,7 @@
 
   import './index.scss';
 
-  export let labelWidth = '80px';
+  export let labelWidth = '90px';
   export let fileInfoList: IFileInfo[] = [];
 
   let handleCount = 0;
@@ -103,7 +103,7 @@
   }
 
   const numReg = /-{0,1}\d+\.{0,1}\d{0,3}/;
-  function onNumInputChange(v: TInputEvent, key: keyof IConfig['options'], max: number, min: number) {
+  function onNumInputChange(v: TInputEvent, key: keyof IConfig['options'], max: number, min: number, decimal?: number) {
     let _v = v.currentTarget.value;
     const match = _v.match(numReg);
 
@@ -116,6 +116,7 @@
     else if (num < min) num = min;
     else if (num > max) num = max;
 
+    num = typeof decimal === 'number' ? roundDecimalPlaces(num, decimal) : num;
     ($config.options[key] as number) = num;
     v.currentTarget.value = `${num}`;
   }
@@ -181,7 +182,7 @@
         type="text"
         value={$config.options.main_img_w_rate}
         style="width: 103px;"
-        on:change={(v) => onNumInputChange(v, 'main_img_w_rate', 100, 1)}
+        on:change={(v) => onNumInputChange(v, 'main_img_w_rate', 100, 1, 0)}
       />
     </ActionItem>
 
@@ -196,7 +197,26 @@
         type="text"
         value={$config.options.text_margin}
         style="width: 103px;"
-        on:change={(v) => onNumInputChange(v, 'text_margin', 10000, 0)}
+        on:change={(v) => onNumInputChange(v, 'text_margin', 10000, 0, 2)}
+      />
+    </ActionItem>
+
+    <ActionItem {labelWidth} title="最小上下边距">
+      <svelte:fragment slot="popup">
+        指定水印上下边距的最小值，默认情况使用阴影宽度作为上下边距
+        <br>
+        设置最小上下边距，将会从它和阴影之间取最大值
+        <br>
+        按照背景高度比例换算，值为 0-100
+        <br>
+        默认：0
+      </svelte:fragment>
+      <input
+        class="input"
+        type="text"
+        value={$config.options.mini_top_bottom_margin}
+        style="width: 103px;"
+        on:change={(v) => onNumInputChange(v, 'mini_top_bottom_margin', 100, 0, 2)}
       />
     </ActionItem>
 
@@ -214,7 +234,7 @@
         type="text"
         value={$config.options.radius}
         style="width: 103px;"
-        on:change={(v) => onNumInputChange(v, 'radius', 50, 0)}
+        on:change={(v) => onNumInputChange(v, 'radius', 50, 0, 1)}
       />
     </ActionItem>
 
@@ -232,7 +252,22 @@
         type="text"
         value={$config.options.shadow}
         style="width: 103px;"
-        on:change={(v) => onNumInputChange(v, 'shadow', 50, 0)}
+        on:change={(v) => onNumInputChange(v, 'shadow', 50, 0, 1)}
+      />
+    </ActionItem>
+
+    <ActionItem {labelWidth} title="输出质量">
+      <svelte:fragment slot="popup">
+        指定输出质量，只允许整数
+        <br>
+        默认值：100
+      </svelte:fragment>
+      <input
+        class="input"
+        type="text"
+        value={$config.options.quality}
+        style="width: 103px;"
+        on:change={(v) => onNumInputChange(v, 'quality', 100, 1, 0)}
       />
     </ActionItem>
 

web/main/index.scss

@@ -24,7 +24,7 @@
   }
 
   .content {
-    height: 340px;
+    height: 420px;
     display: flex;
   }
 
@@ -74,7 +74,7 @@
 .desc {
   position: fixed;
   top: 60px;
-  left: 106px;
+  left: 115px;
   font-weight: bold;
   color: #8f9094;
 

web/modules/text-tool/index.ts

@@ -197,7 +197,7 @@ export class TextTool {
         if (opts.verticalAlign === 'center') {
           _textInfo.y = roundDecimalPlaces((can.height - _textInfo.h) / 2, 2);
         } else {
-          _textInfo.y = roundDecimalPlaces((can.height - baseline) / 2 + _textInfo.h * 0.03, 2);
+          _textInfo.y = roundDecimalPlaces(baseline - _textInfo.h + _textInfo.h * 0.03 + (can.height - baseline) / 2, 2);
         }
       } else {
         _textInfo.type = 'text';