From 8feb30adbf60fd728145a27b9e674501175af6c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=8C=E8=90=8C=E5=93=92=E8=B5=AB=E8=90=9D?=
 <ma_shiqing@163.com>
Date: Thu, 16 Mar 2023 17:58:34 +0800
Subject: [PATCH] :sparkles: Feature: users can customize mini window icon now

---
 public/i18n/en.yml                  |  4 ++
 public/i18n/zh-CN.yml               |  4 ++
 public/i18n/zh-TW.yml               |  4 ++
 src/main/manage/events/ipcList.ts   |  5 +++
 src/renderer/pages/MiniPage.vue     | 27 ++++++++++---
 src/renderer/pages/PicGoSetting.vue | 62 +++++++++++++++++++++++++----
 src/renderer/pages/Upload.vue       | 14 +++----
 src/universal/types/i18n.d.ts       |  4 ++
 src/universal/types/view.d.ts       |  4 +-
 9 files changed, 108 insertions(+), 20 deletions(-)

diff --git a/public/i18n/en.yml b/public/i18n/en.yml
index d211d45..17240ca 100644
--- a/public/i18n/en.yml
+++ b/public/i18n/en.yml
@@ -115,6 +115,10 @@ SETTINGS_CHOOSE_LANGUAGE: Choose Language
 UPLOADER_CONFIG_NAME: Configuration Name
 UPLOADER_CONFIG_PLACEHOLDER: Please Enter Configuration Name
 SELECTED_SETTING_HINT: Selected
+SETTINGS_CUSTOM_MINI_ICON_PATH: Custom Mini Window Icon Path
+SETTINGS_CUSTOM_MINI_ICON: Custom Mini Window Icon
+SETTINGS_COMPRESS_AND_WATERMARK: Compress and Watermark
+SETTINGS_SYNC_DELETE_CLOUD: Sync delete from cloud storage of gallery
 
 # shortcut-page
 
diff --git a/public/i18n/zh-CN.yml b/public/i18n/zh-CN.yml
index 58b26ca..cca0660 100644
--- a/public/i18n/zh-CN.yml
+++ b/public/i18n/zh-CN.yml
@@ -116,6 +116,10 @@ BUILTIN_CLIPBOARD_TIPS: 使用内置剪贴板函数而不是调用脚本获取
 UPLOADER_CONFIG_NAME: 图床配置名
 UPLOADER_CONFIG_PLACEHOLDER: 请输入配置名称
 SELECTED_SETTING_HINT: 已选中
+SETTINGS_CUSTOM_MINI_ICON_PATH: 自定义Mini窗口图标路径
+SETTINGS_CUSTOM_MINI_ICON: 是否自定义Mini窗口图标
+SETTINGS_COMPRESS_AND_WATERMARK: 设置图片水印和压缩-格式转换等参数
+SETTINGS_SYNC_DELETE_CLOUD: 相册内删除时同步删除云端文件
 
 # shortcut-page
 
diff --git a/public/i18n/zh-TW.yml b/public/i18n/zh-TW.yml
index cd9881f..9bd926d 100644
--- a/public/i18n/zh-TW.yml
+++ b/public/i18n/zh-TW.yml
@@ -116,6 +116,10 @@ BUILTIN_CLIPBOARD_TIPS: 使用內建剪貼簿函數而不是調用腳本取得
 UPLOADER_CONFIG_NAME: 圖床配置名
 UPLOADER_CONFIG_PLACEHOLDER: 請輸入配置名稱
 SELECTED_SETTING_HINT: 已選中
+SETTINGS_CUSTOM_MINI_ICON_PATH: 自訂Mini視窗圖示路徑
+SETTINGS_CUSTOM_MINI_ICON: 自訂Mini視窗圖示
+SETTINGS_COMPRESS_AND_WATERMARK: 設置圖片浮水印和壓縮-格式轉換等參數
+SETTINGS_SYNC_DELETE_CLOUD: 從相簿中刪除並同步從雲端刪除
 
 # shortcut-page
 
diff --git a/src/main/manage/events/ipcList.ts b/src/main/manage/events/ipcList.ts
index eddaa85..e630264 100644
--- a/src/main/manage/events/ipcList.ts
+++ b/src/main/manage/events/ipcList.ts
@@ -61,6 +61,11 @@ export const manageIpcList = {
       return manage.getBucketListRecursively(param)
     })
 
+    ipcMain.handle('convertPathToBase64', async (_evt: IpcMainInvokeEvent, filePath: string) => {
+      const res = fs.readFileSync(filePath, 'base64')
+      return res
+    })
+
     ipcMain.handle('openFileSelectDialog', async () => {
       const res = await dialog.showOpenDialog({
         properties: ['openFile', 'multiSelections']
diff --git a/src/renderer/pages/MiniPage.vue b/src/renderer/pages/MiniPage.vue
index 7a2403e..10de295 100644
--- a/src/renderer/pages/MiniPage.vue
+++ b/src/renderer/pages/MiniPage.vue
@@ -1,9 +1,12 @@
 <template>
   <div
     id="mini-page"
-    :style="{ backgroundImage: 'url(' + logo + ')' }"
     :class="{ linux: os === 'linux' }"
   >
+   <img
+    :src="logoPath.value ? logoPath.value : require('../assets/squareLogo.png')"
+    style="width: 100%; height: 100%;border-radius: 50%;"
+    >
     <div
       id="upload-area"
       :class="{ 'is-dragover': dragover, uploading: showProgress, linux: os === 'linux' }"
@@ -34,13 +37,17 @@ import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
-import { onBeforeUnmount, onBeforeMount, ref, watch } from 'vue'
+import { onBeforeUnmount, onBeforeMount, ref, watch, reactive } from 'vue'
 import { SHOW_MINI_PAGE_MENU, SET_MINI_WINDOW_POS } from '~/universal/events/constants'
 import {
   isUrl
 } from '~/universal/utils/common'
-import { sendToMain } from '@/utils/dataSender'
-const logo = require('../assets/squareLogo.png')
+import { getConfig, sendToMain } from '@/utils/dataSender'
+import { IConfig } from 'piclist'
+import { invokeToMain } from '@/manage/utils/dataSender'
+const logoPath = reactive({
+  value: ''
+})
 const dragover = ref(false)
 const progress = ref(0)
 const showProgress = ref(false)
@@ -52,8 +59,18 @@ const screenX = ref(-1)
 const screenY = ref(-1)
 const os = ref('')
 
-onBeforeMount(() => {
+async function initLogoPath () {
+  const config = (await getConfig<IConfig>())!
+  if (config !== undefined) {
+    if (config.settings?.isCustomMiniIcon && config.settings?.customMiniIcon) {
+      logoPath.value = 'data:image/jpg;base64,' + await invokeToMain('convertPathToBase64', config.settings.customMiniIcon)
+    }
+  }
+}
+
+onBeforeMount(async () => {
   os.value = process.platform
+  await initLogoPath()
   ipcRenderer.on('uploadProgress', (event: IpcRendererEvent, _progress: number) => {
     if (_progress !== -1) {
       showProgress.value = true
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index c442570..135b1af 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -91,7 +91,7 @@
               </el-button>
             </el-form-item>
             <el-form-item
-              label="设置图片水印和压缩-格式转换等参数"
+              :label="$T('SETTINGS_COMPRESS_AND_WATERMARK')"
             >
               <el-button
                 type="primary"
@@ -159,7 +159,7 @@
               />
             </el-form-item>
             <el-form-item
-              label="相册内删除时同步删除云端文件"
+              :label="$T('SETTINGS_SYNC_DELETE_CLOUD')"
             >
               <el-switch
                 v-model="form.deleteCloudFile"
@@ -209,6 +209,31 @@
                 @change="handleMiniWindowOntop"
               />
             </el-form-item>
+            <el-form-item
+              v-if="os !== 'darwin' && form.isCustomMiniIcon"
+              :label="$T('SETTINGS_CUSTOM_MINI_ICON_PATH')"
+            >
+              <el-button
+                type="primary"
+                round
+                size="small"
+                @click="handleMiniIconPath"
+              >
+                {{ $T('SETTINGS_CLICK_TO_SET') }}
+              </el-button>
+            </el-form-item>
+            <el-form-item
+              v-if="os !== 'darwin'"
+              :label="$T('SETTINGS_CUSTOM_MINI_ICON')"
+            >
+              <el-switch
+                v-model="form.isCustomMiniIcon"
+                :active-text="$T('SETTINGS_OPEN')"
+                :inactive-text="$T('SETTINGS_CLOSE')"
+                @change="handleIsCustomMiniIcon"
+              />
+            </el-form-item>
+
             <el-form-item
               :label="$T('SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD')"
             >
@@ -269,6 +294,7 @@
       v-model="customLinkVisible"
       :title="$T('SETTINGS_CUSTOM_LINK_FORMAT')"
       :modal-append-to-body="false"
+      center
     >
       <el-form
         ref="$customLink"
@@ -282,11 +308,9 @@
         >
           <div class="custom-title">
             {{ $T('SETTINGS_TIPS_PLACEHOLDER_URL') }}
-          </div>
-          <div class="custom-title">
+            <br>
             {{ $T('SETTINGS_TIPS_PLACEHOLDER_FILENAME') }}
-          </div>
-          <div class="custom-title">
+            <br>
             {{ $T('SETTINGS_TIPS_PLACEHOLDER_EXTNAME') }}
           </div>
           <el-input
@@ -320,6 +344,7 @@
       :title="$T('SETTINGS_SET_PROXY_AND_MIRROR')"
       :modal-append-to-body="false"
       width="70%"
+      center
     >
       <el-form
         label-position="right"
@@ -374,6 +399,7 @@
       v-model="checkUpdateVisible"
       :title="$T('SETTINGS_CHECK_UPDATE')"
       :modal-append-to-body="false"
+      center
     >
       <div>
         {{ $T('SETTINGS_CURRENT_VERSION') }}: {{ version }}
@@ -405,6 +431,7 @@
       :title="$T('SETTINGS_SET_LOG_FILE')"
       :modal-append-to-body="false"
       width="500px"
+      center
     >
       <el-form
         label-position="right"
@@ -474,6 +501,7 @@
       width="60%"
       :title="$T('SETTINGS_SET_PICGO_SERVER')"
       :modal-append-to-body="false"
+      center
     >
       <div class="notice-text">
         {{ $T('SETTINGS_TIPS_SERVER_NOTICE') }}
@@ -764,6 +792,7 @@ import { getConfig, saveConfig, sendToMain } from '@/utils/dataSender'
 import { useRouter } from 'vue-router'
 import { SHORTKEY_PAGE } from '@/router/config'
 import { IConfig, IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
+import { invokeToMain } from '@/manage/utils/dataSender'
 
 const imageProcessDialogVisible = ref(false)
 
@@ -872,7 +901,9 @@ const form = reactive<ISettingForm>({
   useBuiltinClipboard: false,
   language: 'zh-CN',
   logFileSizeLimit: 10,
-  deleteCloudFile: false
+  deleteCloudFile: false,
+  isCustomMiniIcon: false,
+  customMiniIcon: ''
 })
 
 const languageList = i18nManager.languageList.map(item => ({
@@ -959,6 +990,8 @@ async function initData () {
     form.useBuiltinClipboard = settings.useBuiltinClipboard === undefined ? false : settings.useBuiltinClipboard
     form.language = settings.language ?? 'zh-CN'
     form.deleteCloudFile = settings.deleteCloudFile || false
+    form.isCustomMiniIcon = settings.isCustomMiniIcon || false
+    form.customMiniIcon = settings.customMiniIcon || ''
     currentLanguage.value = settings.language ?? 'zh-CN'
     customLink.value = settings.customLink || '$url'
     shortKey.upload = settings.shortKey.upload
@@ -1122,6 +1155,20 @@ function handleMiniWindowOntop (val: ICheckBoxValueType) {
   $message.info($T('TIPS_NEED_RELOAD'))
 }
 
+async function handleMiniIconPath (evt: Event) {
+  const result = await invokeToMain('openFileSelectDialog')
+  if (result && result[0]) {
+    form.customMiniIcon = result[0]
+  }
+  saveConfig('settings.customMiniIcon', form.customMiniIcon)
+  $message.info($T('TIPS_NEED_RELOAD'))
+}
+
+function handleIsCustomMiniIcon (val: ICheckBoxValueType) {
+  saveConfig('settings.isCustomMiniIcon', val)
+  $message.info($T('TIPS_NEED_RELOAD'))
+}
+
 function handleAutoCopyUrl (val: ICheckBoxValueType) {
   saveConfig('settings.autoCopy', val)
   const successNotification = new Notification($T('SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD'), {
@@ -1317,6 +1364,7 @@ export default {
         width 100%
   .server-dialog
     .notice-text
+      text-align center
       color: #49B1F5
     .el-dialog__body
       padding-top: 0
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 129e6d6..035dc9a 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -12,14 +12,14 @@
             placement="top"
             effect="light"
             :content="$T('UPLOAD_VIEW_HINT')"
-            >
-          <span
-            id = "upload-view-title"
-            @click="handlePicBedNameClick(picBedName, picBedConfigName)"
           >
-          {{ $T('PICTURE_UPLOAD') }} - {{ picBedName }} - {{ picBedConfigName }}
-        </span>
-      </el-tooltip>
+            <span
+              id="upload-view-title"
+              @click="handlePicBedNameClick(picBedName, picBedConfigName)"
+            >
+              {{ $T('PICTURE_UPLOAD') }} - {{ picBedName }} - {{ picBedConfigName }}
+            </span>
+          </el-tooltip>
           <el-icon
             style="cursor: pointer; margin-left: 4px;"
             @click="handleChangePicBed"
diff --git a/src/universal/types/i18n.d.ts b/src/universal/types/i18n.d.ts
index cced578..63767a5 100644
--- a/src/universal/types/i18n.d.ts
+++ b/src/universal/types/i18n.d.ts
@@ -111,6 +111,10 @@ interface ILocales {
   UPLOADER_CONFIG_NAME: string
   UPLOADER_CONFIG_PLACEHOLDER: string
   SELECTED_SETTING_HINT: string
+  SETTINGS_CUSTOM_MINI_ICON_PATH: string
+  SETTINGS_CUSTOM_MINI_ICON: string
+  SETTINGS_COMPRESS_AND_WATERMARK: string
+  SETTINGS_SYNC_DELETE_CLOUD: string
   SHORTCUT_NAME: string
   SHORTCUT_BIND: string
   SHORTCUT_STATUS: string
diff --git a/src/universal/types/view.d.ts b/src/universal/types/view.d.ts
index 8131259..d64b31d 100644
--- a/src/universal/types/view.d.ts
+++ b/src/universal/types/view.d.ts
@@ -12,7 +12,9 @@ interface ISettingForm {
   useBuiltinClipboard: boolean
   language: string
   logFileSizeLimit: number,
-  deleteCloudFile: boolean
+  deleteCloudFile: boolean,
+  isCustomMiniIcon: boolean,
+  customMiniIcon: string
 }
 
 interface IShortKeyMap {