From 10e0584c96b4ef23b874c04dc3bd2880fee92f68 Mon Sep 17 00:00:00 2001 From: PiEgg Date: Mon, 26 Jun 2023 09:27:50 +0800 Subject: [PATCH] :hammer: Refactor: setting page --- package.json | 19 +- postcss.config.js | 3 +- src/main.ts | 1 + src/main/apis/app/shortKey/builtin.ts | 6 + src/main/apis/app/shortKey/shortKeyHandler.ts | 22 +- src/main/apis/app/uploader/apis.ts | 3 +- src/main/apis/app/window/windowList.ts | 8 +- src/main/apis/core/bus/constants.ts | 4 + src/main/events/busEventList.ts | 1 - src/main/events/ipcList.ts | 2 +- src/main/i18n/index.ts | 8 +- src/main/lifeCycle/index.ts | 5 +- src/main/migrate/index.ts | 3 +- src/main/utils/beforeOpen.ts | 2 +- src/renderer/assets/css/tailwind.css | 3 + .../components/settings/ButtonFormItem.vue | 37 + .../components/settings/SelectFormItem.vue | 56 ++ ...heckboxFormItem.vue => SwitchFormItem.vue} | 32 +- src/renderer/hooks/useVModel.ts | 16 + src/renderer/hooks/useVModelValues.ts | 29 + src/renderer/pages/PicGoSetting.vue | 900 +----------------- src/renderer/pages/ShortKey.vue | 1 + src/renderer/pages/Upload.vue | 2 +- src/renderer/pages/UploaderConfigPage.vue | 4 +- .../buttonArea/ButtonAreaSettings.vue | 113 +++ .../settings/buttonArea/CheckUpdateDialog.vue | 105 ++ .../settings/buttonArea/CustomLinkDialog.vue | 118 +++ .../settings/buttonArea/LogSettingDialog.vue | 156 +++ .../buttonArea/ProxySettingDialog.vue | 103 ++ .../buttonArea/ServerSettingsDialog.vue | 108 +++ .../settings/customArea/ChoosePicBed.vue | 71 ++ .../customArea/CustomAreaSettings.vue | 22 + .../selectArea/SelectAreaSettings.vue | 44 + .../switchArea/SwitchAreaSettings.vue | 101 ++ src/renderer/utils/common.ts | 19 + src/universal/types/types.d.ts | 5 +- src/universal/types/view.d.ts | 12 +- tailwind.config.js | 18 + yarn.lock | 592 +++++++++--- 39 files changed, 1736 insertions(+), 1018 deletions(-) create mode 100644 src/main/apis/app/shortKey/builtin.ts create mode 100644 src/renderer/assets/css/tailwind.css create mode 100644 src/renderer/components/settings/ButtonFormItem.vue create mode 100644 src/renderer/components/settings/SelectFormItem.vue rename src/renderer/components/settings/{CheckboxFormItem.vue => SwitchFormItem.vue} (60%) create mode 100644 src/renderer/hooks/useVModel.ts create mode 100644 src/renderer/hooks/useVModelValues.ts create mode 100644 src/renderer/pages/components/settings/buttonArea/ButtonAreaSettings.vue create mode 100644 src/renderer/pages/components/settings/buttonArea/CheckUpdateDialog.vue create mode 100644 src/renderer/pages/components/settings/buttonArea/CustomLinkDialog.vue create mode 100644 src/renderer/pages/components/settings/buttonArea/LogSettingDialog.vue create mode 100644 src/renderer/pages/components/settings/buttonArea/ProxySettingDialog.vue create mode 100644 src/renderer/pages/components/settings/buttonArea/ServerSettingsDialog.vue create mode 100644 src/renderer/pages/components/settings/customArea/ChoosePicBed.vue create mode 100644 src/renderer/pages/components/settings/customArea/CustomAreaSettings.vue create mode 100644 src/renderer/pages/components/settings/selectArea/SelectAreaSettings.vue create mode 100644 src/renderer/pages/components/settings/switchArea/SwitchAreaSettings.vue create mode 100644 tailwind.config.js diff --git a/package.json b/package.json index 1a356c0..3d35dcc 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps", "release": "vue-cli-service electron:build --publish always", - "upload-dist": "node ./scripts/upload-dist.js" + "upload-dist": "node ./scripts/upload-dist.js", + "lint:dpdm": "dpdm -T --no-tree --no-warning --exit-code circular:1 src/background.ts;" }, "dependencies": { "@element-plus/icons-vue": "^2.0.10", @@ -24,7 +25,7 @@ "axios": "^0.19.0", "compare-versions": "^4.1.3", "core-js": "^3.27.1", - "element-plus": "^2.2.28", + "element-plus": "^2.3.7", "epipebomb": "^1.0.0", "fs-extra": "^10.0.0", "js-yaml": "^4.1.0", @@ -32,14 +33,14 @@ "lodash-id": "^0.14.0", "lowdb": "^1.0.0", "mitt": "^3.0.0", - "picgo": "^1.5.3", + "picgo": "^1.5.4", "qrcode.vue": "^3.3.3", "shell-path": "2.1.0", "uuidv4": "^6.2.11", - "vue": "^3.2.45", - "vue-router": "^4.1.6", + "vue": "^3.3.4", + "vue-router": "^4.2.2", "vue3-lazyload": "^0.3.6", - "vue3-photo-preview": "^0.2.9", + "vue3-photo-preview": "^0.3.0", "write-file-atomic": "^4.0.1" }, "devDependencies": { @@ -67,9 +68,11 @@ "@vue/eslint-config-standard": "^8.0.1", "@vue/eslint-config-typescript": "^11.0.2", "@vue/runtime-dom": "^3.2.45", + "autoprefixer": "^10.4.14", "conventional-changelog": "^3.1.18", "cz-customizable": "^6.2.0", "dotenv": "^16.0.1", + "dpdm": "^3.13.1", "electron": "^16.0.6", "electron-devtools-installer": "^3.2.0", "eslint": "^8.31.0", @@ -79,8 +82,10 @@ "eslint-plugin-promise": "^5.1.0", "eslint-plugin-vue": "^9.8.0", "husky": "^3.1.0", + "postcss": "^8.4.23", "stylus": "^0.54.7", "stylus-loader": "^3.0.2", + "tailwindcss": "^3.3.2", "typescript": "^4.4.3", "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4" }, @@ -99,7 +104,7 @@ }, "husky": { "hooks": { - "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" + "commit-msg": "npm run lint:dpdm && commitlint -E HUSKY_GIT_PARAMS" } }, "resolutions": { diff --git a/postcss.config.js b/postcss.config.js index 961986e..e62d868 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,6 @@ module.exports = { plugins: { - autoprefixer: {} + autoprefixer: {}, + tailwindcss: {} } } diff --git a/src/main.ts b/src/main.ts index 3b99a1c..445e0e7 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,4 @@ +import './renderer/assets/css/tailwind.css' import { createApp } from 'vue' import App from './renderer/App.vue' import router from './renderer/router' diff --git a/src/main/apis/app/shortKey/builtin.ts b/src/main/apis/app/shortKey/builtin.ts new file mode 100644 index 0000000..85d333c --- /dev/null +++ b/src/main/apis/app/shortKey/builtin.ts @@ -0,0 +1,6 @@ +import { SHORTKEY_COMMAND_UPLOAD } from '../../core/bus/constants' +import { uploadClipboardFiles } from '../uploader/apis' + +export const BuiltinShortKeyMap: Record = { + [SHORTKEY_COMMAND_UPLOAD]: uploadClipboardFiles +} diff --git a/src/main/apis/app/shortKey/shortKeyHandler.ts b/src/main/apis/app/shortKey/shortKeyHandler.ts index 2dd7f64..f114b1f 100644 --- a/src/main/apis/app/shortKey/shortKeyHandler.ts +++ b/src/main/apis/app/shortKey/shortKeyHandler.ts @@ -8,6 +8,8 @@ import db from '~/main/apis/core/datastore' import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants' import shortKeyService from './shortKeyService' import picgo from '@core/picgo' +import { BuiltinShortKeyMap } from './builtin' +import { SHORTKEY_BUILTIN_PREFIX } from '../../core/bus/constants' class ShortKeyHandler { private isInModifiedMode: boolean = false @@ -29,10 +31,14 @@ class ShortKeyHandler { .forEach(command => { const config = commands[command] // if disabled, don't register #534 + logger.info(`register builtin shortKey command: [${command}] - [${config.key}]`) if (config.enable) { + logger.info(`register builtin shortKey command: [${command}] - [${config.key}] successfully`) globalShortcut.register(config.key, () => { this.handler(command) }) + } else { + logger.warn(`builtin shortKey command: [${command}] - [${config.key}] register failed, it's disabled`) } }) } @@ -76,7 +82,7 @@ class ShortKeyHandler { } else { logger.warn(`${command} do not provide a key to bind`) } - // if the configfile already had this command + // if the config file already had this command // then writeFlag -> false if (writeFlag) { picgo.saveConfig({ @@ -130,17 +136,25 @@ class ShortKeyHandler { private async handler (command: string) { if (this.isInModifiedMode) { + logger.warn(`in modified mode, ignore shortKey command: [${command}]`) return } - if (command.includes('picgo:')) { - bus.emit(command) + if (command.includes(SHORTKEY_BUILTIN_PREFIX)) { + const handler = BuiltinShortKeyMap[command] + if (handler) { + logger.info(`get builtin shortKey handler for command: [${command}]`) + return handler() + } else { + logger.warn(`can't find builtin shortKey handler for command: [${command}]`) + } } else if (command.includes('picgo-plugin-')) { const handler = shortKeyService.getShortKeyHandler(command) if (handler) { + logger.info(`get plugin shortKey handler for command: [${command}]`) return handler(picgo, GuiApi.getInstance()) } } else { - logger.warn(`can not find command: ${command}`) + logger.warn(`can not find command: [${command}]`) } } diff --git a/src/main/apis/app/uploader/apis.ts b/src/main/apis/app/uploader/apis.ts index 982188a..6c96ff4 100644 --- a/src/main/apis/app/uploader/apis.ts +++ b/src/main/apis/app/uploader/apis.ts @@ -9,6 +9,7 @@ import pasteTemplate from '~/main/utils/pasteTemplate' import db, { GalleryDB } from '~/main/apis/core/datastore' import { handleCopyUrl, handleUrlEncodeWithSetting } from '~/main/utils/common' import { T } from '~/main/i18n/index' +import logger from '@core/picgo/logger' // import dayjs from 'dayjs' const handleClipboardUploading = async (): Promise => { @@ -21,8 +22,8 @@ const handleClipboardUploading = async (): Promise => { } export const uploadClipboardFiles = async (): Promise => { + logger.info('upload clipboard file') const img = await handleClipboardUploading() - console.log(img) if (img !== false) { if (img.length > 0) { const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW) diff --git a/src/main/apis/app/window/windowList.ts b/src/main/apis/app/window/windowList.ts index 16a09b5..a6e2ecc 100644 --- a/src/main/apis/app/window/windowList.ts +++ b/src/main/apis/app/window/windowList.ts @@ -5,13 +5,12 @@ import { RENAME_WINDOW_URL, TOOLBOX_WINDOW_URL } from './constants' -import { IRemoteNoticeTriggerHook, IWindowList } from '#/types/enum' +import { IWindowList } from '#/types/enum' import bus from '@core/bus' import { CREATE_APP_MENU } from '@core/bus/constants' import db from '~/main/apis/core/datastore' import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants' import { app } from 'electron' -import { remoteNoticeHandler } from '../remoteNotice' import { T } from '~/main/i18n' // import { URLSearchParams } from 'url' @@ -93,9 +92,6 @@ windowList.set(IWindowList.SETTING_WINDOW, { return options }, callback (window, windowManager) { - window.once('show', () => { - remoteNoticeHandler.triggerHook(IRemoteNoticeTriggerHook.SETTING_WINDOW_OPEN) - }) window.loadURL(handleWindowParams(SETTING_WINDOW_URL)) window.on('closed', () => { bus.emit(TOGGLE_SHORTKEY_MODIFIED_MODE, false) @@ -132,7 +128,7 @@ windowList.set(IWindowList.MINI_WINDOW, { } } - if (db.get('settings.miniWindowOntop')) { + if (db.get('settings.miniWindowOnTop')) { obj.alwaysOnTop = true } return obj diff --git a/src/main/apis/core/bus/constants.ts b/src/main/apis/core/bus/constants.ts index d22c742..076c299 100644 --- a/src/main/apis/core/bus/constants.ts +++ b/src/main/apis/core/bus/constants.ts @@ -7,3 +7,7 @@ export const UPLOAD_WITH_FILES_RESPONSE = 'UPLOAD_WITH_FILES_RESPONSE' export const UPLOAD_WITH_CLIPBOARD_FILES = 'UPLOAD_WITH_CLIPBOARD_FILES' export const UPLOAD_WITH_CLIPBOARD_FILES_RESPONSE = 'UPLOAD_WITH_CLIPBOARD_FILES_RESPONSE' export const CREATE_APP_MENU = 'CREATE_APP_MENU' + +// shortkey command +export const SHORTKEY_BUILTIN_PREFIX = 'picgo:' +export const SHORTKEY_COMMAND_UPLOAD = `${SHORTKEY_BUILTIN_PREFIX}upload` diff --git a/src/main/events/busEventList.ts b/src/main/events/busEventList.ts index 5eccd63..cb25eb1 100644 --- a/src/main/events/busEventList.ts +++ b/src/main/events/busEventList.ts @@ -21,7 +21,6 @@ import { } from '@core/bus/constants' function initEventCenter () { const eventList: any = { - 'picgo:upload': uploadClipboardFiles, [UPLOAD_WITH_CLIPBOARD_FILES]: busCallUploadClipboardFiles, [UPLOAD_WITH_FILES]: busCallUploadFiles, [GET_WINDOW_ID]: busCallGetWindowId, diff --git a/src/main/events/ipcList.ts b/src/main/events/ipcList.ts index af3c3cb..54d3db0 100644 --- a/src/main/events/ipcList.ts +++ b/src/main/events/ipcList.ts @@ -137,7 +137,7 @@ export default { const miniWindow = windowManager.get(IWindowList.MINI_WINDOW)! const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)! - if (db.get('settings.miniWindowOntop')) { + if (db.get('settings.miniWindowOnTop')) { miniWindow.setAlwaysOnTop(true) } diff --git a/src/main/i18n/index.ts b/src/main/i18n/index.ts index 9096be4..fbb4823 100644 --- a/src/main/i18n/index.ts +++ b/src/main/i18n/index.ts @@ -7,14 +7,14 @@ import { builtinI18nList } from '#/i18n' class I18nManager { private i18n: I18n | null = null private builtinI18nFolder = path.join(__static, 'i18n') - private outterI18nFolder = '' + private outerI18nFolder = '' private localesMap: Map = new Map() private currentLanguage: string = 'zh-CN' readonly defaultLanguage: string = 'zh-CN' private i18nFileList: II18nItem[] = builtinI18nList - setOutterI18nFolder (folder: string) { - this.outterI18nFolder = folder + setOuterI18nFolder (folder: string) { + this.outerI18nFolder = folder } addI18nFile (file: string, label: string) { @@ -30,7 +30,7 @@ class I18nManager { } let localesPath = path.join(this.builtinI18nFolder, `${lang}.yml`) if (!fs.existsSync(localesPath)) { - localesPath = path.join(this.outterI18nFolder, `${lang}.yml`) + localesPath = path.join(this.outerI18nFolder, `${lang}.yml`) if (!fs.existsSync(localesPath)) { localesPath = path.join(this.builtinI18nFolder, `${this.defaultLanguage}.yml`) } diff --git a/src/main/lifeCycle/index.ts b/src/main/lifeCycle/index.ts index fb18d86..d8727a1 100644 --- a/src/main/lifeCycle/index.ts +++ b/src/main/lifeCycle/index.ts @@ -83,7 +83,10 @@ class LifeCycle { } } windowManager.create(IWindowList.TRAY_WINDOW) - windowManager.create(IWindowList.SETTING_WINDOW) + const settingWindow = windowManager.create(IWindowList.SETTING_WINDOW) + settingWindow?.once('show', () => { + remoteNoticeHandler.triggerHook(IRemoteNoticeTriggerHook.SETTING_WINDOW_OPEN) + }) createTray() handleDockIcon() db.set('needReload', false) diff --git a/src/main/migrate/index.ts b/src/main/migrate/index.ts index 97ad47f..e8d304f 100644 --- a/src/main/migrate/index.ts +++ b/src/main/migrate/index.ts @@ -4,6 +4,7 @@ import path from 'path' import fse from 'fs-extra' import { PicGo as PicGoCore } from 'picgo' import { T } from '~/main/i18n' +import { SHORTKEY_COMMAND_UPLOAD } from 'apis/core/bus/constants' // from v2.1.2 const updateShortKeyFromVersion212 = (db: typeof ConfigStore, shortKeyConfig: IShortKeyConfigs | IOldShortKeyConfigs) => { // #557 极端情况可能会出现配置不存在，需要重新写入 @@ -19,7 +20,7 @@ const updateShortKeyFromVersion212 = (db: typeof ConfigStore, shortKeyConfig: IS } if (shortKeyConfig.upload) { // @ts-ignore - shortKeyConfig['picgo:upload'] = { + shortKeyConfig[SHORTKEY_COMMAND_UPLOAD] = { enable: true, key: shortKeyConfig.upload, name: 'upload', diff --git a/src/main/utils/beforeOpen.ts b/src/main/utils/beforeOpen.ts index fd1a807..9f18589 100644 --- a/src/main/utils/beforeOpen.ts +++ b/src/main/utils/beforeOpen.ts @@ -88,7 +88,7 @@ function resolveOtherI18nFiles () { if (!fs.pathExistsSync(i18nFolder)) { fs.mkdirSync(i18nFolder) } - i18nManager.setOutterI18nFolder(i18nFolder) + i18nManager.setOuterI18nFolder(i18nFolder) const i18nFiles = fs.readdirSync(path.join(CONFIG_DIR, 'i18n'), { withFileTypes: true }) diff --git a/src/renderer/assets/css/tailwind.css b/src/renderer/assets/css/tailwind.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/src/renderer/assets/css/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/src/renderer/components/settings/ButtonFormItem.vue b/src/renderer/components/settings/ButtonFormItem.vue new file mode 100644 index 0000000..20454d6 --- /dev/null +++ b/src/renderer/components/settings/ButtonFormItem.vue @@ -0,0 +1,37 @@ + + + + diff --git a/src/renderer/components/settings/SelectFormItem.vue b/src/renderer/components/settings/SelectFormItem.vue new file mode 100644 index 0000000..e37cb6f --- /dev/null +++ b/src/renderer/components/settings/SelectFormItem.vue @@ -0,0 +1,56 @@ + + + + diff --git a/src/renderer/components/settings/CheckboxFormItem.vue b/src/renderer/components/settings/SwitchFormItem.vue similarity index 60% rename from src/renderer/components/settings/CheckboxFormItem.vue rename to src/renderer/components/settings/SwitchFormItem.vue index 3fd1da1..4b3e1cb 100644 --- a/src/renderer/components/settings/CheckboxFormItem.vue +++ b/src/renderer/components/settings/SwitchFormItem.vue @@ -2,7 +2,7 @@