Feature: users can customize mini window icon now

This commit is contained in:
萌萌哒赫萝 2023-03-16 17:58:34 +08:00
parent 7fe5f123d8
commit 48c23d4ec3
9 changed files with 108 additions and 20 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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']

View File

@ -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

View File

@ -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

View File

@ -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"

View File

@ -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

View File

@ -12,7 +12,9 @@ interface ISettingForm {
useBuiltinClipboard: boolean
language: string
logFileSizeLimit: number,
deleteCloudFile: boolean
deleteCloudFile: boolean,
isCustomMiniIcon: boolean,
customMiniIcon: string
}
interface IShortKeyMap {