🎉 Release: v2.3.1-beta.4

#873,#806

.eslintrc.js

@@ -6,18 +6,32 @@ module.exports = {
   env: {
     node: true
   },
-  parser: "vue-eslint-parser",
-  'extends': [
+  parser: 'vue-eslint-parser',
+  extends: [
     'plugin:vue/essential',
     '@vue/standard',
     '@vue/typescript'
   ],
-  'plugins': ['@typescript-eslint'],
+  plugins: ['@typescript-eslint'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    indent: 'off',
+    'no-async-promise-executor': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/indent': ['error', 2]
   },
   parserOptions: {
     parser: '@typescript-eslint/parser'
-  }
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.vue'],
+      rules: {
+        'no-undef': 'off' // https://typescript-eslint.io/docs/linting/troubleshooting/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+      }
+    }
+  ],
+  ignorePatterns: ['src/**/*.d.ts']
 }

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ["https://paypal.me/Molunerfinn"]

.github/ISSUE_TEMPLATE.md

@@ -1,30 +0,0 @@
-<!--
-PicGo Issue 模板
-请依照该模板来提交，否则将会被关闭。
-**提问之前请注意你看过FAQ、配置手册以及那些被关闭的issues。否则同样的提问也会被关闭！**
--->
-
-## 问题类型
-
-<!-- 你要提交的是Bug Report还是Feature Request？-->
-
-## PicGo的相关信息
-
-<!-- 版本、所在平台（Mac或者Windows） -->
-
-## 问题重现
-
-<!-- 如果是Bug Report请填写本项 -->
-<!-- 请附上相关截图 -->
-
-## 功能请求
-
-<!-- 如果是Feature Request请填写本项 -->
-<!-- 详细描述你所预想的功能或者是现有功能的改进。 -->
-
----
-
-<!-- 
-  最后，喜欢PicGo的话不妨给它点个star~
-  如果可以的话，请我喝杯咖啡？首页有赞助二维码，谢谢你的支持！ 
- -->

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,67 @@
+name: "🐛 Bug Report"
+description: 提交一个问题 / Report a bug
+title: "[Bug]: "
+labels: ["bug"]
+assignees:
+  - molunerfinn
+body:
+  - type: markdown
+    attributes:
+      value: |+
+        ## PicGo Issue 模板
+
+        请依照该模板来提交，否则将会被关闭。
+        **提问之前请注意你看过 FAQ、文档以及那些被关闭的 issues。否则同样的提问也会被关闭！**
+
+        Please submit according to this template, otherwise it will be closed.
+        **Before asking a question, please note that you have read the FAQ, Doc, and those closed issues. Otherwise the same question will also be closed! **
+
+  - type: checkboxes
+    id: read
+    attributes:
+      label: 前置阅读 | Pre-reading
+      description: 我已经自行查找、阅读以下内容（阅读了请打勾） | I have searched and read the following on my own (Please tick after reading)
+      options:
+        - label: "[文档/Doc](https://picgo.github.io/PicGo-Doc/)"
+          required: true
+        - label: "[Issues](https://github.com/Molunerfinn/PicGo/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)"
+          required: true
+        - label: "[FAQ](https://github.com/Molunerfinn/PicGo/blob/dev/FAQ.md)"
+          required: true
+  - type: input
+    id: version
+    attributes:
+      label: PicGo的版本 | PicGo Version
+      placeholder: 例如 v2.3.0-beta.1
+    validations:
+      required: true
+  - type: dropdown
+    id: platform
+    attributes:
+      label: 系统信息 | System Information
+      options:
+        - Windows
+        - Mac
+        - Mac(arm64)
+        - Linux
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: 问题重现 | Bug reproduce
+      description: 请复述Bug重现流程，必要时附图 | Please tell me the bug reproduction process, attach pictures if necessary
+    validations:
+      required: true
+  - type: textarea
+    id: log
+    attributes:
+      label: 相关日志 | Logs
+      description: 请附上 PicGo 的相关报错日志（用文本的形式）。报错日志可以在 PicGo 设置 -> 设置日志文件 -> 点击打开 后找到 | Please attach PicGo's relevant error log (in text form). The error log can be found in PicGo Settings -> Set Log File -> Click to Open
+  - type: markdown
+    attributes:
+      value: |
+        最后，喜欢 PicGo 的话不妨给它点个 star~
+        如果可以的话，请我喝杯咖啡？首页有赞助二维码，谢谢你的支持！ 
+        Finally, if you like PicGo, give it a star~
+        Buy me a cup of coffee if you can? There is a sponsorship QR code on the homepage, thank you for your support!

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,62 @@
+name: "✨ Feature Request"
+description: 功能请求 / Feature request
+title: "[Feature]: "
+labels: ["feature request"]
+assignees:
+  - molunerfinn
+body:
+  - type: markdown
+    attributes:
+      value: |+
+        ## PicGo Issue 模板
+
+        请依照该模板来提交，否则将会被关闭。
+        **提问之前请注意你看过 FAQ、文档以及那些被关闭的 issues。否则同样的提问也会被关闭！**
+
+        Please submit according to this template, otherwise it will be closed.
+        **Before asking a question, please note that you have read the FAQ, Doc, and those closed issues. Otherwise the same question will also be closed! **
+
+  - type: checkboxes
+    id: read
+    attributes:
+      label: 前置阅读 | Pre-reading
+      description: 我已经自行查找、阅读以下内容（阅读了请打勾） | I have searched and read the following on my own (Please tick after reading)
+      options:
+        - label: "[文档/Doc](https://picgo.github.io/PicGo-Doc/)"
+          required: true
+        - label: "[Issues](https://github.com/Molunerfinn/PicGo/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)"
+          required: true
+        - label: "[FAQ](https://github.com/Molunerfinn/PicGo/blob/dev/FAQ.md)"
+          required: true
+  - type: input
+    id: version
+    attributes:
+      label: PicGo的版本 | PicGo Version
+      placeholder: 例如 v2.3.0-beta.1
+    validations:
+      required: true
+  - type: dropdown
+    id: platform
+    attributes:
+      label: 系统信息 | System Information
+      options:
+        - Windows
+        - Mac
+        - Mac(arm64)
+        - Linux
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: 功能请求 | Feature request
+      description: 详细描述你所预想的功能或者是现有功能的改进 | Describe in detail the features you envision or improvements to existing features
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        最后，喜欢 PicGo 的话不妨给它点个 star~
+        如果可以的话，请我喝杯咖啡？首页有赞助二维码，谢谢你的支持！ 
+        Finally, if you like PicGo, give it a star~
+        Buy me a cup of coffee if you can? There is a sponsorship QR code on the homepage, thank you for your support!

.github/workflows/main.yml

@@ -0,0 +1,55 @@
+# main.yml
+
+# Workflow's name
+name: Build
+
+# Workflow's trigger
+on:
+  push:
+    branches:
+      - master
+
+# Workflow's jobs
+jobs:
+  # job's id
+  release:
+    # job's name
+    name: build and release electron app
+
+    # the type of machine to run the job on
+    runs-on: ${{ matrix.os }}
+
+    # create a build matrix for jobs
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-11]
+
+    # create steps
+    steps:
+      # step1: check out repository
+      - name: Check out git repository
+        uses: actions/checkout@v2
+
+      # step2: install node env
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install system deps
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils
+
+      # step3: yarn
+      - name: Yarn install
+        run: |
+          yarn
+          yarn global add xvfb-maybe
+
+      - name: Build  & release app
+        run: |
+          yarn release
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}

.github/workflows/manually.yml

@@ -0,0 +1,52 @@
+# main.yml
+
+# Workflow's name
+name: Build
+
+# Workflow's trigger
+on: workflow_dispatch
+
+# Workflow's jobs
+jobs:
+  # job's id
+  release:
+    # job's name
+    name: build and release electron app
+
+    # the type of machine to run the job on
+    runs-on: ${{ matrix.os }}
+
+    # create a build matrix for jobs
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-11]
+
+    # create steps
+    steps:
+      # step1: check out repository
+      - name: Check out git repository
+        uses: actions/checkout@v2
+
+      # step2: install node env
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install system deps
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils
+
+      # step3: yarn
+      - name: Yarn install
+        run: |
+          yarn
+          yarn global add xvfb-maybe
+
+      - name: Build  & release app
+        run: |
+          yarn release
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}

.gitignore

@@ -16,3 +16,4 @@ docs/dist/
 .env.local
 .env.*.local
 dist_electron/
+test.js

.travis.deprecated.yml

@@ -22,9 +22,7 @@ addons:
     - icnsutils
     #- xvfb
 before_install:
-- mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
-  "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
-  | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
+- if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then brew install git-lfs; fi
 - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
 install:
 #- export DISPLAY=':99.0'
@@ -39,6 +37,8 @@ script:
 #- yarn run pack && xvfb-maybe node_modules/.bin/mocha test/e2e
 - npm run release
 # - yarn run build:docs
+before_script:
+- git lfs pull
 branches:
   only:
   - master

.vscode/launch.json

@@ -1,38 +1,36 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Launch",
+      "name": "Electron: Main",
       "type": "node",
       "request": "launch",
-      "program": "${workspaceRoot}/src/main/index.dev.js",
-      "env": {
-        "DEBUG_ENV": "debug"
-      },
-      "stopOnEntry": false,
-      "args": [],
-      "cwd": "${workspaceRoot}",
-                      // this points to the electron task runner
+      "protocol": "inspector",
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
-      "runtimeArgs": [
-        "--nolazy"
-      ],
-      "sourceMaps": true
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+      },
+      "preLaunchTask": "electron-debug",
+      "args": ["--remote-debugging-port=9223", "./dist_electron"],
+      "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
     },
     {
-      "name": "Attach",
-      "type": "node",
+      "name": "Electron: Renderer",
+      "type": "chrome",
       "request": "attach",
-      "port": 5858,
-      "sourceMaps": true,
-      "restart": true,
-      "outFiles": [],
-      "localRoot": "${workspaceRoot}",
-      "protocol": "inspector",
-      "remoteRoot": null
+      "port": 9223,
+      "urlFilter": "http://localhost:*",
+      "timeout": 30000,
+      "webRoot": "${workspaceFolder}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///./src/*": "${webRoot}/*"
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Electron: All",
+      "configurations": ["Electron: Main", "Electron: Renderer"]
     }
   ]
 }

.vscode/tasks.json

@@ -0,0 +1,27 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "electron-debug",
+      "type": "process",
+      "command": "./node_modules/.bin/vue-cli-service",
+      "windows": {
+        "command": "./node_modules/.bin/vue-cli-service.cmd"
+      },
+      "isBackground": true,
+      "args": ["electron:serve", "--debug"],
+      "problemMatcher": {
+        "owner": "custom",
+        "pattern": {
+          "regexp": ""
+        },
+        "background": {
+          "beginsPattern": "Starting development server\\.\\.\\.",
+          "endsPattern": "Not launching electron as debug argument was passed\\."
+        }
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -1,3 +1,302 @@
+## :tada: 2.3.1-beta.4 (2022-06-12)
+
+
+### :bug: Bug Fixes
+
+* **db:** fix some db bugs ([d3bb5ca](https://github.com/Molunerfinn/PicGo/commit/d3bb5ca)), closes [#873](https://github.com/Molunerfinn/PicGo/issues/873) [#806](https://github.com/Molunerfinn/PicGo/issues/806)
+* **gallery:** can't copy gallery pics link ([8d861be](https://github.com/Molunerfinn/PicGo/commit/8d861be)), closes [#901](https://github.com/Molunerfinn/PicGo/issues/901)
+
+
+### :pencil: Documentation
+
+* fix electron_mirror link error ([5d06469](https://github.com/Molunerfinn/PicGo/commit/5d06469)), closes [#849](https://github.com/Molunerfinn/PicGo/issues/849)
+* update FAQ ([a79efbf](https://github.com/Molunerfinn/PicGo/commit/a79efbf))
+* update readme & FAQ ([746635e](https://github.com/Molunerfinn/PicGo/commit/746635e))
+
+
+### :package: Chore
+
+* add issue template ([db6c5b8](https://github.com/Molunerfinn/PicGo/commit/db6c5b8))
+
+
+
+## :tada: 2.3.1-beta.3 (2022-04-04)
+
+
+### :sparkles: Features
+
+* add i18n for en ([1936ccf](https://github.com/Molunerfinn/PicGo/commit/1936ccf))
+* add tencent-cos options for url ([af291e4](https://github.com/Molunerfinn/PicGo/commit/af291e4)), closes [#862](https://github.com/Molunerfinn/PicGo/issues/862) [#863](https://github.com/Molunerfinn/PicGo/issues/863) [#865](https://github.com/Molunerfinn/PicGo/issues/865) [#524](https://github.com/Molunerfinn/PicGo/issues/524) [#845](https://github.com/Molunerfinn/PicGo/issues/845) [#732](https://github.com/Molunerfinn/PicGo/issues/732)
+* add upload-clipboard-image from electron' clipboard ([27628da](https://github.com/Molunerfinn/PicGo/commit/27628da)), closes [#822](https://github.com/Molunerfinn/PicGo/issues/822)
+* add wayland support for linux ([f1c8507](https://github.com/Molunerfinn/PicGo/commit/f1c8507))
+* click cancel in rename-window will use origin filename now ([04701d4](https://github.com/Molunerfinn/PicGo/commit/04701d4)), closes [#791](https://github.com/Molunerfinn/PicGo/issues/791)
+
+
+### :bug: Bug Fixes
+
+* fix mini-page can't upload image from dragging browser image ([6bcd019](https://github.com/Molunerfinn/PicGo/commit/6bcd019)), closes [#822](https://github.com/Molunerfinn/PicGo/issues/822)
+* mini window not always on top after reopen ([c79a286](https://github.com/Molunerfinn/PicGo/commit/c79a286))
+* notification freeze the main-process after uploading with clipboard ([3a50315](https://github.com/Molunerfinn/PicGo/commit/3a50315)), closes [#824](https://github.com/Molunerfinn/PicGo/issues/824)
+* picgo.log path error ([6b6ae27](https://github.com/Molunerfinn/PicGo/commit/6b6ae27)), closes [#819](https://github.com/Molunerfinn/PicGo/issues/819)
+
+
+### :pencil: Documentation
+
+* update readme ([6bcda9b](https://github.com/Molunerfinn/PicGo/commit/6bcda9b)), closes [#849](https://github.com/Molunerfinn/PicGo/issues/849) [#850](https://github.com/Molunerfinn/PicGo/issues/850)
+
+
+### :package: Chore
+
+* types change ([43d2a8e](https://github.com/Molunerfinn/PicGo/commit/43d2a8e))
+* update fix-path ([bcaf255](https://github.com/Molunerfinn/PicGo/commit/bcaf255)), closes [#774](https://github.com/Molunerfinn/PicGo/issues/774)
+
+
+
+## :tada: 2.3.1-beta.2 (2022-01-06)
+
+
+### :bug: Bug Fixes
+
+* electron builder actions bug ([5dd6e72](https://github.com/Molunerfinn/PicGo/commit/5dd6e72))
+* linux github actions workflow bug ([5cb8151](https://github.com/Molunerfinn/PicGo/commit/5cb8151))
+
+
+
+## :tada: 2.3.1-beta.1 (2022-01-05)
+
+
+### :package: Chore
+
+* update ci build scripts ([56e814a](https://github.com/Molunerfinn/PicGo/commit/56e814a))
+
+
+
+## :tada: 2.3.1-beta.0 (2022-01-05)
+
+
+### :bug: Bug Fixes
+
+* mini window drag bug ([34b3656](https://github.com/Molunerfinn/PicGo/commit/34b3656))
+
+
+### :package: Chore
+
+* add mac-arm64 build support ([f2a4197](https://github.com/Molunerfinn/PicGo/commit/f2a4197))
+* update electron from v6 -> v16 ([ea20d3b](https://github.com/Molunerfinn/PicGo/commit/ea20d3b))
+
+
+
+# :tada: 2.3.0 (2021-09-11)
+
+
+### :sparkles: Features
+
+* add open devtool option ([75e3edc](https://github.com/Molunerfinn/PicGo/commit/75e3edc))
+
+
+### :bug: Bug Fixes
+
+* shift key function in gallery page ([5895889](https://github.com/Molunerfinn/PicGo/commit/5895889))
+* some bugs ([a676c08](https://github.com/Molunerfinn/PicGo/commit/a676c08)), closes [#722](https://github.com/Molunerfinn/PicGo/issues/722)
+* urlEncode bug when copy ([6c6f847](https://github.com/Molunerfinn/PicGo/commit/6c6f847)), closes [#731](https://github.com/Molunerfinn/PicGo/issues/731)
+
+
+### :pencil: Documentation
+
+* update FAQ ([58420c8](https://github.com/Molunerfinn/PicGo/commit/58420c8))
+
+
+
+# :tada: 2.3.0-beta.8 (2021-08-13)
+
+
+### :bug: Bug Fixes
+
+* settings bug ([20d3cf9](https://github.com/Molunerfinn/PicGo/commit/20d3cf9)), closes [#710](https://github.com/Molunerfinn/PicGo/issues/710)
+* upload clipboard images via http should return list ([ae69263](https://github.com/Molunerfinn/PicGo/commit/ae69263)), closes [#721](https://github.com/Molunerfinn/PicGo/issues/721)
+
+
+
+# :tada: 2.3.0-beta.7 (2021-08-01)
+
+
+### :sparkles: Features
+
+* add gallery db ([6ddd660](https://github.com/Molunerfinn/PicGo/commit/6ddd660))
+* add win32 support ([1657542](https://github.com/Molunerfinn/PicGo/commit/1657542)), closes [#632](https://github.com/Molunerfinn/PicGo/issues/632)
+* finish custom config path ([7030f7a](https://github.com/Molunerfinn/PicGo/commit/7030f7a)), closes [#255](https://github.com/Molunerfinn/PicGo/issues/255)
+
+
+### :bug: Bug Fixes
+
+* bug of gallery db for plugin ([96a63ea](https://github.com/Molunerfinn/PicGo/commit/96a63ea))
+* enable plugin should reload ([49e5f34](https://github.com/Molunerfinn/PicGo/commit/49e5f34)), closes [#659](https://github.com/Molunerfinn/PicGo/issues/659)
+* gallery db bug ([f1eb7f4](https://github.com/Molunerfinn/PicGo/commit/f1eb7f4))
+* multiple uploading in the same time will cause output conflict ([06b67e5](https://github.com/Molunerfinn/PicGo/commit/06b67e5)), closes [#666](https://github.com/Molunerfinn/PicGo/issues/666)
+* multiple uploading in the same time will cause rename failed ([12cecc2](https://github.com/Molunerfinn/PicGo/commit/12cecc2))
+* uploader error in linux ([ab762ef](https://github.com/Molunerfinn/PicGo/commit/ab762ef)), closes [#627](https://github.com/Molunerfinn/PicGo/issues/627)
+* use uploader first ([92022a6](https://github.com/Molunerfinn/PicGo/commit/92022a6))
+* windows ia32 && x64 build options ([bdf523a](https://github.com/Molunerfinn/PicGo/commit/bdf523a))
+
+
+
+# :tada: 2.3.0-beta.6 (2021-04-24)
+
+
+### :sparkles: Features
+
+* add baidu tongji for analytics ([f536391](https://github.com/Molunerfinn/PicGo/commit/f536391))
+* add logs for picgo-server ([2d9e9c0](https://github.com/Molunerfinn/PicGo/commit/2d9e9c0)), closes [#627](https://github.com/Molunerfinn/PicGo/issues/627)
+* add privacy policy ([992ff35](https://github.com/Molunerfinn/PicGo/commit/992ff35))
+
+
+### :bug: Bug Fixes
+
+* add plugin install failed notice ([b05139f](https://github.com/Molunerfinn/PicGo/commit/b05139f))
+* default picBed using picBed.uploader instead of picBed.current ([0a986c8](https://github.com/Molunerfinn/PicGo/commit/0a986c8))
+* dev error with install vue-devtools ([a657c51](https://github.com/Molunerfinn/PicGo/commit/a657c51)), closes [#653](https://github.com/Molunerfinn/PicGo/issues/653) [#658](https://github.com/Molunerfinn/PicGo/issues/658)
+* disable plugin need reload app ([a1b70b4](https://github.com/Molunerfinn/PicGo/commit/a1b70b4))
+* fix analytics value ([06d40ef](https://github.com/Molunerfinn/PicGo/commit/06d40ef))
+* windows cli uploading bug ([321e339](https://github.com/Molunerfinn/PicGo/commit/321e339)), closes [#657](https://github.com/Molunerfinn/PicGo/issues/657)
+
+
+### :package: Chore
+
+* add main process hot reload ([3fd6e4e](https://github.com/Molunerfinn/PicGo/commit/3fd6e4e))
+* fix eslint error notice in indent ([69e1dc8](https://github.com/Molunerfinn/PicGo/commit/69e1dc8))
+
+
+
+# :tada: 2.3.0-beta.5 (2021-04-04)
+
+
+### :sparkles: Features
+
+* add local plugin support && npm registry/proxy support ([f0e1fa1](https://github.com/Molunerfinn/PicGo/commit/f0e1fa1))
+* 为Linux系统适配桌面图标栏（Tray） ([#603](https://github.com/Molunerfinn/PicGo/issues/603)) ([0fe3ade](https://github.com/Molunerfinn/PicGo/commit/0fe3ade))
+
+
+### :bug: Bug Fixes
+
+* default github placeholder ([51d80a6](https://github.com/Molunerfinn/PicGo/commit/51d80a6))
+
+
+### :package: Chore
+
+* change travis-ci -> GitHub Actions ([064f37d](https://github.com/Molunerfinn/PicGo/commit/064f37d))
+
+
+
+# :tada: 2.3.0-beta.4 (2020-12-19)
+
+
+### :sparkles: Features
+
+* add global value for PicGo get GUI_VERSION & CORE_VERSION ([eab014d](https://github.com/Molunerfinn/PicGo/commit/eab014d))
+* **config:** auto configuration backup & fallback to avoid main process crash ([32b8b97](https://github.com/Molunerfinn/PicGo/commit/32b8b97)), closes [#568](https://github.com/Molunerfinn/PicGo/issues/568)
+
+
+### :bug: Bug Fixes
+
+* disabled plugin won't be shown in plugin page ([33fdb16](https://github.com/Molunerfinn/PicGo/commit/33fdb16))
+* shortKeyConfig maybe undefined ([7b5e5ef](https://github.com/Molunerfinn/PicGo/commit/7b5e5ef)), closes [#557](https://github.com/Molunerfinn/PicGo/issues/557)
+* url encode before uploading by url ([ce2b5cd](https://github.com/Molunerfinn/PicGo/commit/ce2b5cd)), closes [#581](https://github.com/Molunerfinn/PicGo/issues/581)
+
+
+### :pencil: Documentation
+
+* add flutter-picgo ([92ff282](https://github.com/Molunerfinn/PicGo/commit/92ff282))
+* add gitads ([2d42381](https://github.com/Molunerfinn/PicGo/commit/2d42381))
+* rm gitads ([bb90e17](https://github.com/Molunerfinn/PicGo/commit/bb90e17))
+* update discussions in doc ([e793599](https://github.com/Molunerfinn/PicGo/commit/e793599))
+* update install command by Homebrew ([#599](https://github.com/Molunerfinn/PicGo/issues/599)) ([bd2311b](https://github.com/Molunerfinn/PicGo/commit/bd2311b))
+* update README.md ([#555](https://github.com/Molunerfinn/PicGo/issues/555)) ([2151857](https://github.com/Molunerfinn/PicGo/commit/2151857))
+
+
+
+# :tada: 2.3.0-beta.3 (2020-07-12)
+
+
+### :bug: Bug Fixes
+
+* choose default picBed failure ([21d3942](https://github.com/Molunerfinn/PicGo/commit/21d3942)), closes [#537](https://github.com/Molunerfinn/PicGo/issues/537)
+* shortkey disabled failure ([4f0809e](https://github.com/Molunerfinn/PicGo/commit/4f0809e)), closes [#534](https://github.com/Molunerfinn/PicGo/issues/534)
+
+
+
+# :tada: 2.3.0-beta.2 (2020-07-12)
+
+
+### :sparkles: Features
+
+* add qrcode for picbeds' config ([7fabc47](https://github.com/Molunerfinn/PicGo/commit/7fabc47))
+
+
+### :bug: Bug Fixes
+
+* encoding the result of picgo-server ([db71139](https://github.com/Molunerfinn/PicGo/commit/db71139))
+* initialize db bugs ([5f87018](https://github.com/Molunerfinn/PicGo/commit/5f87018))
+
+
+### :pencil: Documentation
+
+* update readme ([1c5880a](https://github.com/Molunerfinn/PicGo/commit/1c5880a))
+
+
+
+# :tada: 2.3.0-beta.1 (2020-06-28)
+
+
+### :bug: Bug Fixes
+
+* auto-copy option && copy style ([b6e3adb](https://github.com/Molunerfinn/PicGo/commit/b6e3adb))
+* beta version update bug ([18ad542](https://github.com/Molunerfinn/PicGo/commit/18ad542))
+* paste url encoding bug ([59d3eba](https://github.com/Molunerfinn/PicGo/commit/59d3eba)), closes [#454](https://github.com/Molunerfinn/PicGo/issues/454)
+
+
+### :pencil: Documentation
+
+* update FAQ && ISSUE_TEMPLATE ([2c57a27](https://github.com/Molunerfinn/PicGo/commit/2c57a27))
+* update readme ([2adff1e](https://github.com/Molunerfinn/PicGo/commit/2adff1e))
+
+
+
+# :tada: 2.3.0-beta.0 (2020-04-30)
+
+
+### :sparkles: Features
+
+* add autoCopy option for users to use or not ([67e526f](https://github.com/Molunerfinn/PicGo/commit/67e526f))
+* add beta-version update support ([ad6acd8](https://github.com/Molunerfinn/PicGo/commit/ad6acd8))
+* add smms-v2 support ([3f3ea69](https://github.com/Molunerfinn/PicGo/commit/3f3ea69))
+* add uploading image from URL support ([a28c678](https://github.com/Molunerfinn/PicGo/commit/a28c678))
+* finish all-select && shift multi-select ([2aeca50](https://github.com/Molunerfinn/PicGo/commit/2aeca50)), closes [#342](https://github.com/Molunerfinn/PicGo/issues/342)
+
+
+### :bug: Bug Fixes
+
+* confused port number auto increasing when opening a new PicGo app ([cd70a1a](https://github.com/Molunerfinn/PicGo/commit/cd70a1a))
+* correct inputbox value && remove listener ([32334e9](https://github.com/Molunerfinn/PicGo/commit/32334e9))
+* give a hint when node.js is not installed ([7e86618](https://github.com/Molunerfinn/PicGo/commit/7e86618))
+* right-click menu upload fails with PicGo open ([96cdfea](https://github.com/Molunerfinn/PicGo/commit/96cdfea)), closes [#415](https://github.com/Molunerfinn/PicGo/issues/415)
+* some win10 upload clipboard image crash ([cc182b0](https://github.com/Molunerfinn/PicGo/commit/cc182b0))
+* travis-ci bug ([b357dfb](https://github.com/Molunerfinn/PicGo/commit/b357dfb))
+* url uploader bug ([96544f5](https://github.com/Molunerfinn/PicGo/commit/96544f5))
+
+
+### :pencil: Documentation
+
+* update choco install picgo ([f357557](https://github.com/Molunerfinn/PicGo/commit/f357557))
+* update docs ([fd7673e](https://github.com/Molunerfinn/PicGo/commit/fd7673e))
+* update readme ([fb014dd](https://github.com/Molunerfinn/PicGo/commit/fb014dd))
+
+
+### :package: Chore
+
+* update funding url ([024d9cf](https://github.com/Molunerfinn/PicGo/commit/024d9cf))
+
+
+
 ## :tada: 2.2.2 (2020-01-20)
 
 

FAQ.md

@@ -1,58 +1,72 @@
 ## 常见问题
 
-> 在使用PicGo期间你会遇到很多问题，不过很多问题其实之前就有人提问过，也被解决，所以你可以先看看[使用文档](https://github.com/Molunerfinn/PicGo/wiki/%E8%AF%A6%E7%BB%86%E7%AA%97%E5%8F%A3%E7%9A%84%E4%BD%BF%E7%94%A8#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BF%AB%E6%8D%B7%E9%94%AE)，这份FAQ，以及那些被关闭的[issues](https://github.com/Molunerfinn/PicGo/issues?q=is%3Aissue+is%3Aclosed)，应该能找到答案。
+> 在使用 PicGo 期间你会遇到很多问题，不过很多问题其实之前就有人提问过，也被解决，所以你可以先看看 [使用文档](https://picgo.github.io/PicGo-Doc/zh/guide/getting-started.html#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)，这份 FAQ，以及那些被关闭的 [issues](https://github.com/Molunerfinn/PicGo/issues?q=is%3Aissue+is%3Aclosed)，应该能找到答案。
 
-## 1.七牛图床上传图片成功后无法显示或图片无`http://`前缀
+## 1. 七牛图床上传图片成功后，相册里无法显示或图片无`http://`前缀
 
 通常是你的七牛图床配置里的`设定访问网址`没有加上`http://`或者`https//`头。
 
 参考：[issue#79](https://github.com/Molunerfinn/PicGo/issues/79)
 
-## 2.能否支持图床远端同步删除
+## 2. 能否支持图床远端同步删除
 
-不能。有些图床（比如微博图床、SM.MS、Imgur等）不支持后台管理，为了架构统一不支持远端删除。
+不能。有些图床（比如微博图床、SM.MS、Imgur 等）不支持后台管理，为了架构统一不支持远端删除。
 
-## 3.能否支持上传视频文件
+## 3. 能否支持上传视频文件
 
-目前不能。2.0版本出来后将会支持插件系统，届时如果有人开发了相应的插件理论可以支持任意文件上传。
+目前不能。如果有人开发了相应的插件理论可以支持任意文件上传。
 
-## 4.微博图床上传之后无法显示预览图
+## 4. 微博图床上传之后无法显示预览图
 
 通常是挂了全局代理导致的。
 
 参考：[issue36](https://github.com/Molunerfinn/PicGo/issues/36)
 
-## 5.能否支持某某某图床
+## 5. 能否支持某某某图床
 
-截止v1.6，PicGo支持了如下图床：
+截止 v1.6，PicGo 支持了如下图床：
 
 - `微博图床` v1.0
 - `七牛图床` v1.0
-- `腾讯云COS v4\v5版本` v1.1 & v1.5.0
+- `腾讯云 COS v4\v5 版本` v1.1 & v1.5.0
 - `又拍云` v1.2.0
 - `GitHub` v1.5.0
 - `SM.MS` v1.5.1
-- `阿里云OSS` v1.6.0
+- `阿里云 OSS` v1.6.0
 - `Imgur` v1.6.0
 
-所以本体内将不会再支持其他图床。待2.0版本出来支持插件系统后可以由其他开发者开发相应的图床插件用以支持其他图床。
+所以本体内将不会再支持其他图床。需要其他图床支持可以参考目前已有的三方 [插件](https://github.com/PicGo/Awesome-PicGo)，如果还是没有你所需要的图床欢迎开发一个插件供大家使用。
 
-## 6.一个图床设置多个信息
+## 6. 一个图床设置多个信息
 
 不能。因为目前的架构只支持一个图床一份信息。
 
-## 7.v2.0版本有什么新功能
+## 7. GitHub 图床有时能上传，有时上传失败
 
-在不改变PicGo现有使用界面和使用习惯的基础上，将会重构整个底层`传输->转换->上传`的架构，使其能够支持插件系统，方便其他开发者基于PicGo的底层进行二次开发。
+1. GitHub 图床不支持上传同名文件，如果有同名文件上传，会报错。建议开启 `时间戳重命名` 避免同名文件。
+2. GitHub 服务器和国内 GFW 的问题会导致有时上传成功，有时上传失败，无解。想要稳定请使用付费云存储，如阿里云、腾讯云等，价格也不会贵。
 
-理论上有了插件系统之后，其他开发者能够支持如下功能：
+## 8. Mac 上无法打开 PicGo 的主窗口界面
 
-1. 能够实现上传前图片压缩
-2. 能够通过图片url实现上传图片 -> 更深入地可以批量地实现图床的迁移
-3. 能够支持其他图床甚至是自己的图床
+PicGo 在 Mac 上是一个顶部栏应用，在 dock 栏是不会有图标的。要打开主窗口，请右键或者双指点按顶部栏 PicGo 图标，选择「打开详细窗口」即可打开主窗口。
 
-等等。
+## 9. 上传失败，或者是服务器出错
 
-届时底层架构将会独立出来成为一个独立的npm包，能够直接在命令行里调用。
+1. PicGo 自带的图床都经过测试，上传出错一般都不是 PicGo 自身的原因。如果你用的是 GitHub 图床请参考上面的第 7 点。
+2. 检查 PicGo 的日志（报错日志可以在 PicGo 设置 -> 设置日志文件 -> 点击打开 后找到），看看 `[PicGo Error]` 的报错信息里有什么关键信息
+   1. 先自行搜索 error 里的报错信息，往往你能百度或者谷歌出问题原因，不必开 issue。
+   2. 如果有带有 `401` 、`403` 等 `40X` 状态码字样的，不用怀疑，就是你配置写错了，仔细检查配置，看看是否多了空格之类的。
+   3. 如果带有 `HttpError`、`RequestError` 、 `socket hang up` 等字样的说明这是网络问题，我无法帮你解决网络问题，请检查你自己的网络，是否有代理，DNS 设置是否正常等。
 
-目前开发进度可以参考[PicGo-Core](https://github.com/Molunerfinn/PicGo-Core)。
+## 10. macOS版本安装完之后没有主界面
+
+请找到PicGo在顶部栏的图标，然后右键（触摸板双指点按，或者鼠标右键），即可找到「打开详细窗口」的菜单。
+
+## 11. 相册突然无法显示图片或者上传后相册不更新
+
+这个原因可能是相册存储文件损坏导致的。可以找到 PicGo 配置文件所在路径下的 `picgo.db` ，将其删掉（删掉前建议备份一遍），再重启 PicGo 试试。
+注意同时看看日志文件里有没有什么error，必要时可以提issue。
+
+## 12. Gitee相关问题
+
+如果在使用 Gitee 图床的时候遇到上传的问题，由于 PicGo 并没有官方提供 Gitee 上传服务，无法帮你解决，请去你所使用的 Gitee 插件仓库发相关的issue。

README.md

@@ -2,11 +2,11 @@
   <img src="https://raw.githubusercontent.com/Molunerfinn/test/master/picgo/New%20LOGO-150.png" alt="">
   <h1>PicGo</h1>
   <blockquote>图片上传+管理新体验 </blockquote>
-  <a href="https://github.com/feross/standard">
+  <a href="https://github.com/Molunerfinn/PicGo/actions">
     <img src="https://img.shields.io/badge/code%20style-standard-green.svg?style=flat-square" alt="">
   </a>
-  <a href="https://travis-ci.org/Molunerfinn/PicGo/builds">
-    <img src="https://img.shields.io/travis/Molunerfinn/PicGo.svg?style=flat-square" alt="">
+  <a href="https://github.com/Molunerfinn/PicGo/actions">
+    <img src="https://github.com/Molunerfinn/PicGo/actions/workflows/main.yml/badge.svg" alt="">
   </a>
   <a href="https://github.com/Molunerfinn/PicGo/releases">
     <img src="https://img.shields.io/github/downloads/Molunerfinn/PicGo/total.svg?style=flat-square" alt="">
@@ -19,45 +19,64 @@
   </a>
 </div>
 
-## 应用说明
+## 应用概述
 
-**PicGo 在上传图片之后自动会将图片链接复制到你的剪贴板里，可选 5 种复制的链接格式。**
+**PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具**
 
-PicGo 目前支持了
+PicGo 本体支持如下图床：
 
-- ~~`微博图床` v1.0~~ **微博图床从 2019 年 4 月开始进行防盗链，不建议继续使用**
 - `七牛图床` v1.0
-- `腾讯云 COS v4\v5版本` v1.1 & v1.5.0
+- `腾讯云 COS v4\v5 版本` v1.1 & v1.5.0
 - `又拍云` v1.2.0
 - `GitHub` v1.5.0
-- `SM.MS` v1.5.1
+- `SM.MS V2` v2.3.0-beta.0
 - `阿里云 OSS` v1.6.0
 - `Imgur` v1.6.0
 
 **本体不再增加默认的图床支持。你可以自行开发第三方图床插件。详见 [PicGo-Core](https://picgo.github.io/PicGo-Core-Doc/)**。
 
-第三方插件以及使用了 PicGo 底层的应用可以在 [Awesome-PicGo](https://github.com/PicGo/Awesome-PicGo) 找到。欢迎贡献！
+## 特色功能
 
-PicGo 支持 macOS、Windows 64位（>= v1.3.1），Linux（>= v1.6.0）。
+- 支持拖拽图片上传
+- 支持快捷键上传剪贴板里第一张图片
+- Windows 和 macOS 支持右键图片文件通过菜单上传 (v2.1.0+)
+- 上传图片后自动复制链接到剪贴板
+- 支持自定义复制到剪贴板的链接格式
+- 支持修改快捷键，默认快速上传快捷键：`command+shift+p`（macOS）| `control+shift+p`（Windows\Linux)
+- 支持插件系统，已有插件支持 Gitee、青云等第三方图床
+  - 更多第三方插件以及使用了 PicGo 底层的应用可以在 [Awesome-PicGo](https://github.com/PicGo/Awesome-PicGo) 找到。欢迎贡献！
+- 支持通过发送 HTTP 请求调用 PicGo 上传（v2.2.0+)
+- 更多功能等你自己去发现，同时也会不断开发新功能
+  - 开发进度可以查看 [Projects](https://github.com/Molunerfinn/PicGo/projects)，会同步更新开发进度
+  - 欢迎加入 [官方讨论区](https://github.com/Molunerfinn/PicGo/discussions) 与我交流
 
-支持快捷键`command+shift+p`（macOS）或者`control+shift+p`（Windows\Linux）用以支持快捷上传剪贴板里的图片（第一张）。
-PicGo 支持自定义快捷键，使用方法见[配置手册](https://picgo.github.io/PicGo-Doc/zh/guide/config.html)。
-
-开发进度可以查看 [Projects](https://github.com/Molunerfinn/PicGo/projects)，会同步更新开发进度。
-
-**如果第一次使用，请参考应用使用[快速上手](https://picgo.github.io/PicGo-Doc/zh/guide/getting-started.html)。遇到问题了还可以看看 [FAQ](https://github.com/Molunerfinn/PicGo/blob/dev/FAQ.md) 以及被关闭的 [issues](https://github.com/Molunerfinn/PicGo/issues?q=is%3Aissue+is%3Aclosed)。**
+**如果第一次使用，请参考应用 [使用文档](https://picgo.github.io/PicGo-Doc/zh/guide/getting-started.html)。遇到问题了还可以看看 [FAQ](https://github.com/Molunerfinn/PicGo/blob/dev/FAQ.md) 以及被关闭的 [issues](https://github.com/Molunerfinn/PicGo/issues?q=is%3Aissue+is%3Aclosed)。**
 
 ## 下载安装
 
-点击此处下载[应用](https://github.com/Molunerfinn/PicGo/releases)。
+点击此处下载 [应用](https://github.com/Molunerfinn/PicGo/releases)。
 
-macOS 用户请下载最新版本的 `dmg` 文件，Windows 用户请下载最新版本的 `exe` 文件，Linux用户请下载 `AppImage` 文件。
+还可以通过山东大学镜像站提供的镜像地址下载 [应用](https://mirrors.sdu.edu.cn/github-release/Molunerfinn_PicGo)。感谢山东大学镜像站提供的镜像服务！
 
-**如果你是 Arch 类的 Linux 用户，可以直接通过 `aurman -S picgo-appimage` 来安装 PicGo。感谢 @houbaron 的贡献！**
+### Windows
 
-**如果你是 macOS 用户，可以使用 `brew cask` 来安装 PicGo: `brew cask install picgo`。感谢 @womeimingzi11 的贡献！**
+Windows 用户请下载最新版本的 `exe` 文件。
 
-**如果你是 Windows 用户，还可以使用 [Scoop](https://scoop.sh/) 来安装 PicGo: `scoop bucket add helbing https://github.com/helbing/scoop-bucket` & `scoop install picgo`。 感谢 @helbing 的贡献！**
+**还可以使用 [Scoop](https://scoop.sh/) 来安装 PicGo: `scoop bucket add helbing https://github.com/helbing/scoop-bucket` & `scoop install picgo`。 感谢 @helbing 的贡献！**
+
+**还可以使用 [Chocolatey](https://chocolatey.org/) 来安装 PicGo: `choco install picgo`。 感谢 @iYato 的贡献！**
+
+### macOS
+
+macOS 用户请下载最新版本的 `dmg` 文件。
+
+**还可以使用 [Homebrew](https://brew.sh/) 来安装 PicGo: `brew install picgo --cask`。感谢 @womeimingzi11 的贡献！**
+
+### Linux
+
+Linux 用户请下载 `AppImage` 文件。
+
+**如果你是 Arch 类的 Linux 用户，可以直接通过 `yay -S picgo-appimage` 来安装 PicGo （若是没有则先安装 yay ，是 aur 仓库助手）。感谢 @houbaron 的贡献！**
 
 ## 应用截图
 
@@ -73,9 +92,9 @@ macOS 用户请下载最新版本的 `dmg` 文件，Windows 用户请下载最
 
 > 如果想学习 Electron-vue 的开发，可以查看我写的系列教程——[Electron-vue 开发实战](https://molunerfinn.com/tags/Electron-vue/)
 
-1. 你需要有 Node、Git环境，了解 npm 的相关知识。
-2. `git clone https://github.com/Molunerfinn/PicGo.git` 并进入项目
-3. `npm install` 下载依赖
+1. 你需要有 Node、Git 环境，了解 npm 的相关知识。
+2. `git clone https://github.com/Molunerfinn/PicGo.git` 并进入项目。
+3. `yarn` 下载依赖。注意如果你没有 `yarn`，请去 [官网](https://classic.yarnpkg.com/en/docs/install) 下载安装后再使用。 **用 `npm install` 将导致未知错误！**
 4. Mac 需要有 Xcode 环境，Windows 需要有 VS 环境。
 
 ### 开发模式
@@ -84,26 +103,29 @@ macOS 用户请下载最新版本的 `dmg` 文件，Windows 用户请下载最
 
 ```bash
 ctrl+c # 退出开发模式
-npm run dev # 重新进入开发模式
+npm run electron:serve # 重新进入开发模式
 ```
 
+**注：Windows 开发模式运行之后会在底部任务栏的右下角应用区出现 PicGo 的应用图标。**
+
 ### 生产模式
 
 如果你需要自行构建，可以 `npm run electron:build` 开始进行构建。构建成功后，会在 `dist_electron` 目录里出现构建成功的相应安装文件。
 
-**注意**：如果你的网络环境不太好，可能会出现 `electron-builder` 下载 `electron` 二进制文件失败的情况。这个时候需要在 `npm run build` 之前指定一下 `electron` 的源为国内源：
+**注意**：如果你的网络环境不太好，可能会出现 `electron-builder` 下载 `electron` 二进制文件失败的情况。这个时候需要在 `npm run electron:build` 之前指定一下 `electron` 的源为国内源：
 
 ```bash
-export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
-# 在 Windows 上，则可以使用 set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ （无需引号）
-npm run build
+export ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
+# 在 Windows 上，则可以使用 set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ （无需引号）
+npm run electron:build
 ```
 
 只需第一次构建的时候指定一下国内源即可。后续构建不需要特地指定。二进制文件下载在 `~/.electron/` 目录下。如果想要更新 `electron` 构建版本，可以删除 `~/.electron/` 目录，然后重新运行上一步，让 `electron-builder `去下载最新的 `electron` 二进制文件。
 
 ## 其他相关
 
-- [vs-picgo](https://github.com/Spades-S/vs-picgo)：PicGo 的 VS Code 版。
+- [vs-picgo](https://github.com/PicGo/vs-picgo)：PicGo 的 VS Code 版。
+- [flutter-picgo](https://github.com/PicGo/flutter-picgo)：PicGo 的手机版（支持 Android 和 iOS ）。
 
 ## 赞助
 
@@ -121,4 +143,4 @@ npm run build
 
 [MIT](http://opensource.org/licenses/MIT)
 
-Copyright (c) 2017 - 2019 Molunerfinn
+Copyright (c) 2017 - 2019 Molunerfinn

appveyor.yml

@@ -19,13 +19,13 @@ init:
   - git config --global core.autocrlf input
 
 install:
-  - ps: Install-Product node 12 x64
+  - ps: Install-Product node 16 x64
   - git reset --hard HEAD
   - yarn
   - node --version
 
 build_script:
   #- yarn test
-  - npm run release
+  - yarn release
 
-test: off
+test: false

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
+  plugins: ['@babel/plugin-proposal-optional-chaining']
 }

docs/APP.vue

@@ -22,7 +22,7 @@
           .col-xs-10.col-xs-offset-1.col-md-7.col-md-offset-0
             img(:src="item.url")
           .col-xs-10.col-xs-offset-1.col-md-5.col-md-offset-0.display-list__content
-            .display-list__title {{ item.title }} 
+            .display-list__title {{ item.title }}
             .display-list__desc {{ item.desc }}
       .row.ex-width.info
         .col-xs-10.col-xs-offset-1
@@ -94,7 +94,7 @@ html,
 h1
   margin 0
   padding 0
-  font-family "Source Sans Pro","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif  
+  font-family "Source Sans Pro","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
 #app
   position relative
 .mask
@@ -213,4 +213,4 @@ h1
         font-size 25px
       &__desc
         margin-top 12px
-</style>
+</style>

package.json

@@ -1,11 +1,12 @@
 {
   "name": "picgo",
-  "version": "2.2.2",
+  "version": "2.3.1-beta.4",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "dev": "vue-cli-service electron:serve",
+    "build": "vue-cli-service electron:build",
     "lint": "vue-cli-service lint",
+    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx,.vue src/",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
@@ -14,7 +15,7 @@
     "bump": "bump-version",
     "release": "vue-cli-service electron:build --publish always"
   },
-  "main": "background.js",
+  "main": "index.js",
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
@@ -34,50 +35,61 @@
     ]
   },
   "dependencies": {
+    "@picgo/i18n": "^1.0.0",
+    "@picgo/store": "2.0.1",
     "axios": "^0.19.0",
     "core-js": "^3.3.2",
     "element-ui": "^2.13.0",
-    "fix-path": "^2.1.0",
-    "fs-extra": "^8.1.0",
+    "fs-extra": "^10.0.0",
     "keycode": "^2.2.0",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
-    "picgo": "^1.4.4",
+    "picgo": "^1.5.0-alpha.4",
+    "qrcode.vue": "^1.7.0",
+    "shell-path": "2.1.0",
+    "uuidv4": "^6.2.11",
     "vue": "^2.6.10",
     "vue-gallery": "^2.0.1",
     "vue-lazyload": "^1.2.6",
     "vue-router": "^3.1.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^8.2.0",
-    "@picgo/bump-version": "^1.0.3",
-    "@types/fs-extra": "^8.0.1",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@picgo/bump-version": "^1.1.2",
+    "@types/fs-extra": "^9.0.13",
     "@types/inquirer": "^6.5.0",
     "@types/lowdb": "^1.0.9",
-    "@types/node": "10.17.6",
+    "@types/node": "^16.10.2",
     "@types/request-promise-native": "^1.0.17",
+    "@types/semver": "^7.3.8",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "@vue/cli-plugin-babel": "^4.0.0",
     "@vue/cli-plugin-eslint": "^4.0.0",
     "@vue/cli-plugin-router": "^4.0.0",
-    "@vue/cli-plugin-typescript": "^4.0.0",
+    "@vue/cli-plugin-typescript": "^4.5.13",
     "@vue/cli-service": "^4.0.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/eslint-config-typescript": "^4.0.0",
-    "commitizen": "^4.0.3",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "conventional-changelog": "^3.1.18",
     "cz-customizable": "^6.2.0",
-    "electron": "^6.0.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "electron": "^16.0.6",
+    "electron-devtools-installer": "^3.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": ">=16.0.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "^7.0.0",
     "husky": "^3.1.0",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
-    "typescript": "~3.7.3",
-    "vue-cli-plugin-electron-builder": "^1.4.2",
+    "typescript": "^4.4.3",
+    "vue-cli-plugin-electron-builder": "^2.1.1",
     "vue-property-decorator": "^8.3.0",
     "vue-template-compiler": "^2.6.10"
   },
   "resolutions": {
-    "@types/node": "12.0.2"
+    "@types/node": "^16.10.2"
   }
 }

public/linux.sh

@@ -1,18 +1,34 @@
 #!/bin/sh
-# require xclip(see http://stackoverflow.com/questions/592620/check-if-a-program-exists-from-a-bash-script/677212#677212)
-command -v xclip >/dev/null 2>&1 || { echo >&1 "no xclip"; exit 1; }
-
-# write image in clipboard to file (see http://unix.stackexchange.com/questions/145131/copy-image-from-clipboard-to-file)
-filePath=`xclip -selection clipboard -o 2>/dev/null | grep ^file:// | cut -c8-`
-if [ ! -n "$filePath" ] ;then
-  if
-      xclip -selection clipboard -target image/png -o >/dev/null 2>&1
-  then
-      xclip -selection clipboard -target image/png -o >$1 2>/dev/null
-      echo $1
+if [ "$XDG_SESSION_TYPE" = "x11" ]; then
+  # require xclip(see http://stackoverflow.com/questions/592620/check-if-a-program-exists-from-a-bash-script/677212#677212)
+  command -v xclip >/dev/null 2>&1 || { echo >&1 "no xclip"; exit 1; }
+  # write image in clipboard to file (see http://unix.stackexchange.com/questions/145131/copy-image-from-clipboard-to-file)
+  filePath=`xclip -selection clipboard -o 2>/dev/null | grep ^file:// | cut -c8-`
+  if [ ! -n "$filePath" ] ;then
+    if
+        xclip -selection clipboard -target image/png -o >/dev/null 2>&1
+    then
+        xclip -selection clipboard -target image/png -o >$1 2>/dev/null
+        echo $1
+    else
+        echo "no image"
+    fi
   else
-      echo "no image"
+    echo $filePath
+  fi
+elif [ "$XDG_SESSION_TYPE" = "wayland" ]; then
+  command -v wl-copy >/dev/null 2>&1 || { echo >&1 "no wl-clipboard"; exit 1; }
+  filePath=`wl-copy -o 2>/dev/null | grep ^file:// | cut -c8-`
+  if [ ! -n "$filePath" ] ;then
+    if
+        wl-copy -t image/png -o >/dev/null 2>&1
+      then
+        wl-copy -t image/png image/png -o >$1 2>/dev/null
+        echo $1
+    else
+        echo "no image"
+    fi
+  else
+    echo $filePath
   fi
-else
-  echo $filePath
 fi

public/windows10.ps1

@@ -27,6 +27,7 @@ function main {
     $stream.Dispose() | out-null
 
     $imagePath
+    Exit 1
 }
 
 try {

public/wsl.sh

@@ -0,0 +1,18 @@
+#!/bin/sh
+# grab the paths
+scriptPath=$(echo $0 | awk '{ print substr( $0, 1, length($0)-6 ) }')"windows10.ps1"
+imagePath=$(echo $1 | awk '{ print substr( $0, 1, length($0)-18 ) }')
+imageName=$(echo $1 | awk '{ print substr( $0, length($0)-17, length($0) ) }')
+
+# run the powershell script
+res=$(powershell.exe -noprofile -noninteractive -nologo -sta -executionpolicy unrestricted -file $(wslpath -w $scriptPath) $(wslpath -w $imagePath)"\\"$imageName)
+
+# note that there is a return symbol in powershell result
+noImage=$(echo "no image\r")
+
+# check whether image exists
+if [ "$res" = "$noImage" ] ;then
+    echo "no image"
+else
+    echo $(wslpath -u $res)
+fi

src/background.ts

@@ -1,158 +1,6 @@
-import {
-  app,
-  globalShortcut,
-  protocol
-} from 'electron'
-import {
-  createProtocol,
-  installVueDevtools
-} from 'vue-cli-plugin-electron-builder/lib'
-import db from '#/datastore'
-import { IWindowList } from '~/main/apis/window/constants'
-import windowManager from '~/main/apis/window/windowManager'
-import {
-  uploadChoosedFiles,
-  uploadClipboardFiles
-} from '~/main/apis/uploader/api'
-import beforeOpen from '~/main/utils/beforeOpen'
-import updateChecker from '~/main/utils/updateChecker'
-import ipcList from '~/main/apis/eventCenter/ipcList'
-import busEventList from '~/main/apis/eventCenter/busEventList'
-import fixPath from 'fix-path'
-import { getUploadFiles } from '~/main/utils/handleArgv'
-import bus from '~/main/utils/eventBus'
-import {
-  updateShortKeyFromVersion212
-} from '~/main/migrate'
-import shortKeyHandler from '~/main/apis/shortKey/shortKeyHandler'
-import server from '~/main/server/index'
-import {
-  createTray
-} from '~/main/apis/app'
+import { bootstrap } from '~/main/lifeCycle'
 
-const isDevelopment = process.env.NODE_ENV !== 'production'
-protocol.registerSchemesAsPrivileged([{ scheme: 'picgo', privileges: { secure: true, standard: true } }])
-
-beforeOpen()
-
-// fix the $PATH in macOS
-fixPath()
-
-ipcList.listen()
-busEventList.listen()
-
-const gotTheLock = app.requestSingleInstanceLock()
-
-if (!gotTheLock) {
-  app.quit()
-} else {
-  app.on('second-instance', (event, commandLine, workingDirectory) => {
-    let files = getUploadFiles(commandLine, workingDirectory)
-    if (files === null || files.length > 0) { // 如果有文件列表作为参数，说明是命令行启动
-      if (files === null) {
-        uploadClipboardFiles()
-      } else {
-        const win = windowManager.getAvailableWindow()
-        uploadChoosedFiles(win.webContents, files)
-      }
-    } else {
-      if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-        const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)!
-        if (settingWindow.isMinimized()) {
-          settingWindow.restore()
-        }
-        settingWindow.focus()
-      }
-    }
-  })
-}
-
-if (process.platform === 'win32') {
-  app.setAppUserModelId('com.molunerfinn.picgo')
-}
-
-if (process.env.XDG_CURRENT_DESKTOP && process.env.XDG_CURRENT_DESKTOP.includes('Unity')) {
-  process.env.XDG_CURRENT_DESKTOP = 'Unity'
-}
-
-app.on('ready', async () => {
-  createProtocol('picgo')
-  if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
-    try {
-      await installVueDevtools()
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
-    }
-  }
-  windowManager.create(IWindowList.TRAY_WINDOW)
-  windowManager.create(IWindowList.SETTING_WINDOW)
-  if (process.platform === 'darwin' || process.platform === 'win32') {
-    createTray()
-  }
-  db.set('needReload', false)
-  updateChecker()
-  // 不需要阻塞
-  process.nextTick(() => {
-    updateShortKeyFromVersion212(db, db.get('settings.shortKey'))
-    shortKeyHandler.init()
-  })
-  server.startup()
-  if (process.env.NODE_ENV !== 'development') {
-    let files = getUploadFiles()
-    if (files === null || files.length > 0) { // 如果有文件列表作为参数，说明是命令行启动
-      if (files === null) {
-        uploadClipboardFiles()
-      } else {
-        const win = windowManager.getAvailableWindow()
-        uploadChoosedFiles(win.webContents, files)
-      }
-    }
-  }
-})
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', () => {
-  createProtocol('picgo')
-  if (!windowManager.has(IWindowList.TRAY_WINDOW)) {
-    windowManager.create(IWindowList.TRAY_WINDOW)
-  }
-  if (!windowManager.has(IWindowList.SETTING_WINDOW)) {
-    windowManager.create(IWindowList.SETTING_WINDOW)
-  }
-})
-
-app.on('will-quit', () => {
-  globalShortcut.unregisterAll()
-  bus.removeAllListeners()
-  server.shutdown()
-})
-
-app.setLoginItemSettings({
-  openAtLogin: db.get('settings.autoStart') || false
-})
-
-// Exit cleanly on request from parent process in development mode.
-if (isDevelopment) {
-  if (process.platform === 'win32') {
-    process.on('message', data => {
-      if (data === 'graceful-exit') {
-        app.quit()
-        server.shutdown()
-      }
-    })
-  } else {
-    process.on('SIGTERM', () => {
-      app.quit()
-      server.shutdown()
-    })
-  }
-}
+bootstrap.launchApp()
 
 /**
  * Auto Updater

src/main.ts

@@ -1,21 +1,26 @@
 import Vue from 'vue'
 import App from './renderer/App.vue'
 import router from './renderer/router'
-import db from '#/datastore/index'
 import ElementUI from 'element-ui'
 import { webFrame } from 'electron'
 import 'element-ui/lib/theme-chalk/index.css'
 import VueLazyLoad from 'vue-lazyload'
 import axios from 'axios'
 import mainMixin from './renderer/utils/mainMixin'
+import bus from '@/utils/bus'
+import { initTalkingData } from './renderer/utils/analytics'
+import db from './renderer/utils/db'
+import { T, i18n } from '#/i18n/index'
+import { handleURLParams } from '@/utils/beforeOpen'
 
 webFrame.setVisualZoomLevelLimits(1, 1)
-webFrame.setLayoutZoomLevelLimits(0, 0)
+
+// do here before vue init
+handleURLParams()
 
 Vue.config.productionTip = false
 Vue.prototype.$builtInPicBed = [
   'smms',
-  'weibo',
   'imgur',
   'qiniu',
   'tcyun',
@@ -23,8 +28,11 @@ Vue.prototype.$builtInPicBed = [
   'aliyun',
   'github'
 ]
-Vue.prototype.$db = db
+Vue.prototype.$$db = db
 Vue.prototype.$http = axios
+Vue.prototype.$bus = bus
+Vue.prototype.$T = T
+Vue.prototype.$i18n = i18n
 
 Vue.use(ElementUI)
 Vue.use(VueLazyLoad)
@@ -34,3 +42,5 @@ new Vue({
   router,
   render: h => h(App)
 }).$mount('#app')
+
+initTalkingData()

src/main/apis/README.md

@@ -0,0 +1,13 @@
+# apis folder
+
+## core
+
+The lowest level APIs that are not dependent on each other. The upper APIs depend on them.
+
+## app
+
+Provide key API interfaces for PicGo application, including uploader, window management, shortcut key system, remotes handler, etc
+
+## gui
+
+GuiApi for PicGo plugins.

src/main/apis/app/index.ts

@@ -1,206 +0,0 @@
-import {
-  app,
-  Menu,
-  Tray,
-  dialog,
-  clipboard,
-  systemPreferences,
-  Notification
-} from 'electron'
-import uploader from '~/main/apis/uploader'
-import getPicBeds from '~/main/utils/getPicBeds'
-import db from '#/datastore'
-import windowManager from '~/main/apis/window/windowManager'
-import { IWindowList } from '~/main/apis/window/constants'
-import picgo from '~/main/apis/picgo'
-import pasteTemplate from '#/utils/pasteTemplate'
-import pkg from 'root/package.json'
-let contextMenu: Menu | null
-let menu: Menu | null
-let tray: Tray | null
-export function createContextMenu () {
-  const picBeds = getPicBeds()
-  const submenu = picBeds.filter(item => item.visible).map(item => {
-    return {
-      label: item.name,
-      type: 'radio',
-      checked: db.get('picBed.current') === item.type,
-      click () {
-        picgo.saveConfig({
-          'picBed.current': item.type
-        })
-        if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-          windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
-        }
-      }
-    }
-  })
-  contextMenu = Menu.buildFromTemplate([
-    {
-      label: '关于',
-      click () {
-        dialog.showMessageBox({
-          title: 'PicGo',
-          message: 'PicGo',
-          detail: `Version: ${pkg.version}\nAuthor: Molunerfinn\nGithub: https://github.com/Molunerfinn/PicGo`
-        })
-      }
-    },
-    {
-      label: '打开详细窗口',
-      click () {
-        const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)
-        settingWindow!.show()
-        settingWindow!.focus()
-        if (windowManager.has(IWindowList.MINI_WINDOW)) {
-          windowManager.get(IWindowList.MINI_WINDOW)!.hide()
-        }
-      }
-    },
-    {
-      label: '选择默认图床',
-      type: 'submenu',
-      // @ts-ignore
-      submenu
-    },
-    // @ts-ignore
-    {
-      label: '打开更新助手',
-      type: 'checkbox',
-      checked: db.get('settings.showUpdateTip'),
-      click () {
-        const value = db.get('settings.showUpdateTip')
-        db.set('settings.showUpdateTip', !value)
-      }
-    },
-    {
-      label: '重启应用',
-      click () {
-        app.relaunch()
-        app.exit(0)
-      }
-    },
-    // @ts-ignore
-    {
-      role: 'quit',
-      label: '退出'
-    }
-  ])
-}
-
-export function createTray () {
-  const menubarPic = process.platform === 'darwin' ? `${__static}/menubar.png` : `${__static}/menubar-nodarwin.png`
-  tray = new Tray(menubarPic)
-  tray.on('right-click', () => {
-    if (windowManager.has(IWindowList.TRAY_WINDOW)) {
-      windowManager.get(IWindowList.TRAY_WINDOW)!.hide()
-    }
-    createContextMenu()
-    tray!.popUpContextMenu(contextMenu!)
-  })
-  tray.on('click', (event, bounds) => {
-    if (process.platform === 'darwin') {
-      toggleWindow(bounds)
-      setTimeout(() => {
-        let img = clipboard.readImage()
-        let obj: ImgInfo[] = []
-        if (!img.isEmpty()) {
-          // 从剪贴板来的图片默认转为png
-          // @ts-ignore
-          const imgUrl = 'data:image/png;base64,' + Buffer.from(img.toPNG(), 'binary').toString('base64')
-          obj.push({
-            width: img.getSize().width,
-            height: img.getSize().height,
-            imgUrl
-          })
-        }
-        windowManager.get(IWindowList.TRAY_WINDOW)!.webContents.send('clipboardFiles', obj)
-      }, 0)
-    } else {
-      if (windowManager.has(IWindowList.TRAY_WINDOW)) {
-        windowManager.get(IWindowList.TRAY_WINDOW)!.hide()
-      }
-      const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)
-      settingWindow!.show()
-      settingWindow!.focus()
-      if (windowManager.has(IWindowList.MINI_WINDOW)) {
-        windowManager.get(IWindowList.MINI_WINDOW)!.hide()
-      }
-    }
-  })
-
-  tray.on('drag-enter', () => {
-    if (systemPreferences.isDarkMode()) {
-      tray!.setImage(`${__static}/upload-dark.png`)
-    } else {
-      tray!.setImage(`${__static}/upload.png`)
-    }
-  })
-
-  tray.on('drag-end', () => {
-    tray!.setImage(`${__static}/menubar.png`)
-  })
-
-  tray.on('drop-files', async (event: Event, files: string[]) => {
-    const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
-    const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
-    const imgs = await uploader
-      .setWebContents(trayWindow.webContents)
-      .upload(files)
-    if (imgs !== false) {
-      for (let i = 0; i < imgs.length; i++) {
-        clipboard.writeText(pasteTemplate(pasteStyle, imgs[i]))
-        const notification = new Notification({
-          title: '上传成功',
-          body: imgs[i].imgUrl!,
-          icon: files[i]
-        })
-        setTimeout(() => {
-          notification.show()
-        }, i * 100)
-        db.insert('uploaded', imgs[i])
-      }
-      trayWindow.webContents.send('dragFiles', imgs)
-    }
-  })
-  // toggleWindow()
-}
-
-export function createMenu () {
-  if (process.env.NODE_ENV !== 'development') {
-    const template = [{
-      label: 'Edit',
-      submenu: [
-        { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
-        { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
-        { type: 'separator' },
-        { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
-        { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
-        { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
-        { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' },
-        {
-          label: 'Quit',
-          accelerator: 'CmdOrCtrl+Q',
-          click () {
-            app.quit()
-          }
-        }
-      ]
-    }]
-    // @ts-ignore
-    menu = Menu.buildFromTemplate(template)
-    Menu.setApplicationMenu(menu)
-  }
-}
-
-const toggleWindow = (bounds: IBounds) => {
-  const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
-  if (trayWindow.isVisible()) {
-    trayWindow.hide()
-  } else {
-    trayWindow.setPosition(bounds.x - 98 + 11, bounds.y, false)
-    trayWindow.webContents.send('updateFiles')
-    trayWindow.show()
-    trayWindow.focus()
-  }
-}

src/main/apis/app/shortKey/shortKeyHandler.ts

@@ -1,42 +1,46 @@
-import bus from '../../utils/eventBus'
-import PicGoCore from '~/universal/types/picgo'
-import path from 'path'
+import bus from '@core/bus'
 import {
-  app,
-  globalShortcut,
-  BrowserWindow
+  globalShortcut
 } from 'electron'
-import logger from '../../utils/logger'
-import GuiApi from '../gui'
-import db from '#/datastore'
+import logger from '@core/picgo/logger'
+import GuiApi from '../../gui'
+import db from '~/main/apis/core/datastore'
+import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
 import shortKeyService from './shortKeyService'
-import picgo from '../picgo'
+import picgo from '@core/picgo'
 
 class ShortKeyHandler {
   private isInModifiedMode: boolean = false
   constructor () {
-    bus.on('toggleShortKeyModifiedMode', flag => {
+    bus.on(TOGGLE_SHORTKEY_MODIFIED_MODE, flag => {
       this.isInModifiedMode = flag
     })
   }
+
   init () {
     this.initBuiltInShortKey()
     this.initPluginsShortKey()
   }
+
   private initBuiltInShortKey () {
     const commands = db.get('settings.shortKey') as IShortKeyConfigs
     Object.keys(commands)
       .filter(item => item.includes('picgo:'))
-      .map(command => {
+      .forEach(command => {
         const config = commands[command]
-        globalShortcut.register(config.key, () => {
-          this.handler(command)
-        })
+        // if disabled, don't register #534
+        if (config.enable) {
+          globalShortcut.register(config.key, () => {
+            this.handler(command)
+          })
+        }
       })
   }
+
   private initPluginsShortKey () {
+    // get enabled plugin
     const pluginList = picgo.pluginLoader.getList()
-    for (let item of pluginList) {
+    for (const item of pluginList) {
       const plugin = picgo.pluginLoader.getPlugin(item)
       // if a plugin has commands
       if (plugin && plugin.commands) {
@@ -45,11 +49,14 @@ class ShortKeyHandler {
           continue
         }
         const commands = plugin.commands(picgo) as IPluginShortKeyConfig[]
-        for (let cmd of commands) {
+        for (const cmd of commands) {
           const command = `${item}:${cmd.name}`
           if (db.has(`settings.shortKey[${command}]`)) {
             const commandConfig = db.get(`settings.shortKey.${command}`) as IShortKeyConfig
-            this.registerShortKey(commandConfig, command, cmd.handle, false)
+            // if disabled, don't register #534
+            if (commandConfig.enable) {
+              this.registerShortKey(commandConfig, command, cmd.handle, false)
+            }
           } else {
             this.registerShortKey(cmd, command, cmd.handle, true)
           }
@@ -59,6 +66,7 @@ class ShortKeyHandler {
       }
     }
   }
+
   private registerShortKey (config: IShortKeyConfig | IPluginShortKeyConfig, command: string, handler: IShortKeyHandler, writeFlag: boolean) {
     shortKeyService.registerCommand(command, handler)
     if (config.key) {
@@ -68,6 +76,8 @@ class ShortKeyHandler {
     } else {
       logger.warn(`${command} do not provide a key to bind`)
     }
+    // if the configfile already had this command
+    // then writeFlag -> false
     if (writeFlag) {
       picgo.saveConfig({
         [`settings.shortKey.${command}`]: {
@@ -79,6 +89,7 @@ class ShortKeyHandler {
       })
     }
   }
+
   // enable or disable shortKey
   bindOrUnbindShortKey (item: IShortKeyConfig, from: string): boolean {
     const command = `${from}:${item.name}`
@@ -102,6 +113,7 @@ class ShortKeyHandler {
       }
     }
   }
+
   // update shortKey bindings
   updateShortKey (item: IShortKeyConfig, oldKey: string, from: string): boolean {
     const command = `${from}:${item.name}`
@@ -115,6 +127,7 @@ class ShortKeyHandler {
     })
     return true
   }
+
   private async handler (command: string) {
     if (this.isInModifiedMode) {
       return
@@ -124,13 +137,13 @@ class ShortKeyHandler {
     } else if (command.includes('picgo-plugin-')) {
       const handler = shortKeyService.getShortKeyHandler(command)
       if (handler) {
-        const guiApi = new GuiApi()
-        return handler(picgo, guiApi)
+        return handler(picgo, GuiApi.getInstance())
       }
     } else {
       logger.warn(`can not find command: ${command}`)
     }
   }
+
   registerPluginShortKey (pluginName: string) {
     const plugin = picgo.pluginLoader.getPlugin(pluginName)
     if (plugin && plugin.commands) {
@@ -139,7 +152,7 @@ class ShortKeyHandler {
         return
       }
       const commands = plugin.commands(picgo) as IPluginShortKeyConfig[]
-      for (let cmd of commands) {
+      for (const cmd of commands) {
         const command = `${pluginName}:${cmd.name}`
         if (db.has(`settings.shortKey[${command}]`)) {
           const commandConfig = db.get(`settings.shortKey[${command}]`) as IShortKeyConfig
@@ -150,6 +163,7 @@ class ShortKeyHandler {
       }
     }
   }
+
   unregisterPluginShortKey (pluginName: string) {
     const commands = db.get('settings.shortKey') as IShortKeyConfigs
     const keyList = Object.keys(commands)
@@ -163,7 +177,7 @@ class ShortKeyHandler {
     keyList.forEach(item => {
       globalShortcut.unregister(item.key)
       shortKeyService.unregisterCommand(item.command)
-      picgo.unsetConfig('settings.shortKey', item.command)
+      db.unset('settings.shortKey', item.command)
     })
   }
 }

src/main/apis/app/shortKey/shortKeyService.ts

@@ -1,18 +1,21 @@
-import logger from '../../utils/logger'
+import logger from '@core/picgo/logger'
 class ShortKeyService {
   private commandList: Map<string, IShortKeyHandler> = new Map()
   registerCommand (command: string, handler: IShortKeyHandler) {
     this.commandList.set(command, handler)
   }
+
   unregisterCommand (command: string) {
     this.commandList.delete(command)
   }
+
   getShortKeyHandler (command: string): IShortKeyHandler | null {
     const handler = this.commandList.get(command)
     if (handler) return handler
     logger.warn(`cannot find command: ${command}`)
     return null
   }
+
   getCommandList () {
     return [...this.commandList.keys()]
   }

src/main/apis/app/system/index.ts

@@ -0,0 +1,277 @@
+import {
+  app,
+  Menu,
+  Tray,
+  dialog,
+  clipboard,
+  systemPreferences,
+  Notification
+} from 'electron'
+import uploader from 'apis/app/uploader'
+import getPicBeds from '~/main/utils/getPicBeds'
+import db, { GalleryDB } from '~/main/apis/core/datastore'
+import windowManager from 'apis/app/window/windowManager'
+import { IWindowList } from '#/types/enum'
+import picgo from '@core/picgo'
+import pasteTemplate from '~/main/utils/pasteTemplate'
+import pkg from 'root/package.json'
+import { handleCopyUrl } from '~/main/utils/common'
+import { privacyManager } from '~/main/utils/privacyManager'
+import { T } from '#/i18n'
+let contextMenu: Menu | null
+let menu: Menu | null
+let tray: Tray | null
+export function createContextMenu () {
+  const picBeds = getPicBeds()
+  if (process.platform === 'darwin' || process.platform === 'win32') {
+    const submenu = picBeds.filter(item => item.visible).map(item => {
+      return {
+        label: item.name,
+        type: 'radio',
+        checked: db.get('picBed.current') === item.type,
+        click () {
+          picgo.saveConfig({
+            'picBed.current': item.type,
+            'picBed.uploader': item.type
+          })
+          if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+            windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
+          }
+        }
+      }
+    })
+    contextMenu = Menu.buildFromTemplate([
+      {
+        label: T('ABOUT'),
+        click () {
+          dialog.showMessageBox({
+            title: 'PicGo',
+            message: 'PicGo',
+            detail: `Version: ${pkg.version}\nAuthor: Molunerfinn\nGithub: https://github.com/Molunerfinn/PicGo`
+          })
+        }
+      },
+      {
+        label: T('OPEN_MAIN_WINDOW'),
+        click () {
+          const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)
+          settingWindow!.show()
+          settingWindow!.focus()
+          if (windowManager.has(IWindowList.MINI_WINDOW)) {
+            windowManager.get(IWindowList.MINI_WINDOW)!.hide()
+          }
+        }
+      },
+      {
+        label: T('CHOOSE_DEFAULT_PICBED'),
+        type: 'submenu',
+        // @ts-ignore
+        submenu
+      },
+      // @ts-ignore
+      {
+        label: T('OPEN_UPDATE_HELPER'),
+        type: 'checkbox',
+        checked: db.get('settings.showUpdateTip'),
+        click () {
+          const value = db.get('settings.showUpdateTip')
+          db.set('settings.showUpdateTip', !value)
+        }
+      },
+      {
+        label: T('PRIVACY_AGREEMENT'),
+        click () {
+          privacyManager.show(false)
+        }
+      },
+      {
+        label: T('RELOAD_APP'),
+        click () {
+          app.relaunch()
+          app.exit(0)
+        }
+      },
+      // @ts-ignore
+      {
+        role: 'quit',
+        label: T('QUIT')
+      }
+    ])
+  } else if (process.platform === 'linux') {
+    // TODO 图床选择功能
+    // 由于在Linux难以像在Mac和Windows上那样在点击时构造ContextMenu，
+    // 暂时取消这个选单，避免引起和设置中启用的图床不一致
+
+    // TODO 重启应用功能
+    // 目前的实现无法正常工作
+
+    contextMenu = Menu.buildFromTemplate([
+      {
+        label: T('OPEN_MAIN_WINDOW'),
+        click () {
+          const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)
+          settingWindow!.show()
+          settingWindow!.focus()
+          if (windowManager.has(IWindowList.MINI_WINDOW)) {
+            windowManager.get(IWindowList.MINI_WINDOW)!.hide()
+          }
+        }
+      },
+      // @ts-ignore
+      {
+        label: T('OPEN_UPDATE_HELPER'),
+        type: 'checkbox',
+        checked: db.get('settings.showUpdateTip'),
+        click () {
+          const value = db.get('settings.showUpdateTip')
+          db.set('settings.showUpdateTip', !value)
+        }
+      },
+      {
+        label: T('ABOUT'),
+        click () {
+          dialog.showMessageBox({
+            title: 'PicGo',
+            message: 'PicGo',
+            buttons: ['Ok'],
+            detail: `Version: ${pkg.version}\nAuthor: Molunerfinn\nGithub: https://github.com/Molunerfinn/PicGo`
+          })
+        }
+      },
+      // @ts-ignore
+      {
+        role: 'quit',
+        label: T('QUIT')
+      }
+    ])
+  }
+}
+
+export function createTray () {
+  const menubarPic = process.platform === 'darwin' ? `${__static}/menubar.png` : `${__static}/menubar-nodarwin.png`
+  tray = new Tray(menubarPic)
+  // click事件在Mac和Windows上可以触发（在Ubuntu上无法触发，Unity不支持）
+  if (process.platform === 'darwin' || process.platform === 'win32') {
+    tray.on('right-click', () => {
+      if (windowManager.has(IWindowList.TRAY_WINDOW)) {
+        windowManager.get(IWindowList.TRAY_WINDOW)!.hide()
+      }
+      createContextMenu()
+      tray!.popUpContextMenu(contextMenu!)
+    })
+    tray.on('click', (event, bounds) => {
+      if (process.platform === 'darwin') {
+        toggleWindow(bounds)
+        setTimeout(() => {
+          const img = clipboard.readImage()
+          const obj: ImgInfo[] = []
+          if (!img.isEmpty()) {
+            // 从剪贴板来的图片默认转为png
+            // @ts-ignore
+            const imgUrl = 'data:image/png;base64,' + Buffer.from(img.toPNG(), 'binary').toString('base64')
+            obj.push({
+              width: img.getSize().width,
+              height: img.getSize().height,
+              imgUrl
+            })
+          }
+          windowManager.get(IWindowList.TRAY_WINDOW)!.webContents.send('clipboardFiles', obj)
+        }, 0)
+      } else {
+        if (windowManager.has(IWindowList.TRAY_WINDOW)) {
+          windowManager.get(IWindowList.TRAY_WINDOW)!.hide()
+        }
+        const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)
+        settingWindow!.show()
+        settingWindow!.focus()
+        if (windowManager.has(IWindowList.MINI_WINDOW)) {
+          windowManager.get(IWindowList.MINI_WINDOW)!.hide()
+        }
+      }
+    })
+
+    tray.on('drag-enter', () => {
+      if (systemPreferences.isDarkMode()) {
+        tray!.setImage(`${__static}/upload-dark.png`)
+      } else {
+        tray!.setImage(`${__static}/upload.png`)
+      }
+    })
+
+    tray.on('drag-end', () => {
+      tray!.setImage(`${__static}/menubar.png`)
+    })
+
+    // drop-files only be supported in macOS
+    // so the tray window must be available
+    tray.on('drop-files', async (event: Event, files: string[]) => {
+      const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
+      const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
+      const imgs = await uploader
+        .setWebContents(trayWindow.webContents)
+        .upload(files)
+      if (imgs !== false) {
+        const pasteText: string[] = []
+        for (let i = 0; i < imgs.length; i++) {
+          pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
+          const notification = new Notification({
+            title: T('UPLOAD_SUCCEED'),
+            body: imgs[i].imgUrl!,
+            icon: files[i]
+          })
+          setTimeout(() => {
+            notification.show()
+          }, i * 100)
+          await GalleryDB.getInstance().insert(imgs[i])
+        }
+        handleCopyUrl(pasteText.join('\n'))
+        trayWindow.webContents.send('dragFiles', imgs)
+      }
+    })
+    // toggleWindow()
+  } else if (process.platform === 'linux') {
+  // click事件在Ubuntu上无法触发，Unity不支持（在Mac和Windows上可以触发）
+  // 需要使用 setContextMenu 设置菜单
+    createContextMenu()
+    tray!.setContextMenu(contextMenu)
+  }
+}
+
+export function createMenu () {
+  if (process.env.NODE_ENV !== 'development') {
+    const template = [{
+      label: 'Edit',
+      submenu: [
+        { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
+        { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
+        { type: 'separator' },
+        { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
+        { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
+        { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
+        { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' },
+        {
+          label: 'Quit',
+          accelerator: 'CmdOrCtrl+Q',
+          click () {
+            app.quit()
+          }
+        }
+      ]
+    }]
+    // @ts-ignore
+    menu = Menu.buildFromTemplate(template)
+    Menu.setApplicationMenu(menu)
+  }
+}
+
+const toggleWindow = (bounds: IBounds) => {
+  const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
+  if (trayWindow.isVisible()) {
+    trayWindow.hide()
+  } else {
+    trayWindow.setPosition(bounds.x - 98 + 11, bounds.y, false)
+    trayWindow.webContents.send('updateFiles')
+    trayWindow.show()
+    trayWindow.focus()
+  }
+}

src/main/apis/app/uploader/apis.ts

@@ -0,0 +1,90 @@
+import {
+  Notification,
+  WebContents
+} from 'electron'
+import windowManager from 'apis/app/window/windowManager'
+import { IWindowList } from '#/types/enum'
+import uploader from '.'
+import pasteTemplate from '~/main/utils/pasteTemplate'
+import db, { GalleryDB } from '~/main/apis/core/datastore'
+import { handleCopyUrl } from '~/main/utils/common'
+import { handleUrlEncode } from '#/utils/common'
+import { T } from '#/i18n/index'
+// import dayjs from 'dayjs'
+
+const handleClipboardUploading = async (): Promise<false | ImgInfo[]> => {
+  const useBuiltinClipboard = !!db.get('settings.useBuiltinClipboard')
+  const win = windowManager.getAvailableWindow()
+  if (useBuiltinClipboard) {
+    return await uploader.setWebContents(win!.webContents).uploadWithBuildInClipboard()
+  }
+  return await uploader.setWebContents(win!.webContents).upload()
+}
+
+export const uploadClipboardFiles = async (): Promise<string> => {
+  const img = await handleClipboardUploading()
+  if (img !== false) {
+    if (img.length > 0) {
+      const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)
+      const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
+      handleCopyUrl(pasteTemplate(pasteStyle, img[0], db.get('settings.customLink')))
+      const notification = new Notification({
+        title: T('UPLOAD_SUCCEED'),
+        body: img[0].imgUrl!,
+        icon: img[0].imgUrl
+      })
+      setTimeout(() => {
+        notification.show()
+      }, 100)
+      await GalleryDB.getInstance().insert(img[0])
+      // trayWindow just be created in mac/windows, not in linux
+      trayWindow?.webContents?.send('clipboardFiles', [])
+      trayWindow?.webContents?.send('uploadFiles', img)
+      if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+        windowManager.get(IWindowList.SETTING_WINDOW)!.webContents?.send('updateGallery')
+      }
+      return handleUrlEncode(img[0].imgUrl as string)
+    } else {
+      const notification = new Notification({
+        title: T('UPLOAD_FAILED'),
+        body: T('TIPS_UPLOAD_NOT_PICTURES')
+      })
+      notification.show()
+      return ''
+    }
+  } else {
+    return ''
+  }
+}
+
+export const uploadChoosedFiles = async (webContents: WebContents, files: IFileWithPath[]): Promise<string[]> => {
+  const input = files.map(item => item.path)
+  const imgs = await uploader.setWebContents(webContents).upload(input)
+  const result = []
+  if (imgs !== false) {
+    const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
+    const pasteText: string[] = []
+    for (let i = 0; i < imgs.length; i++) {
+      pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
+      const notification = new Notification({
+        title: T('UPLOAD_SUCCEED'),
+        body: imgs[i].imgUrl!,
+        icon: files[i].path
+      })
+      setTimeout(() => {
+        notification.show()
+      }, i * 100)
+      await GalleryDB.getInstance().insert(imgs[i])
+      result.push(handleUrlEncode(imgs[i].imgUrl!))
+    }
+    handleCopyUrl(pasteText.join('\n'))
+    // trayWindow just be created in mac/windows, not in linux
+    windowManager.get(IWindowList.TRAY_WINDOW)?.webContents?.send('uploadFiles', imgs)
+    if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+      windowManager.get(IWindowList.SETTING_WINDOW)!.webContents?.send('updateGallery')
+    }
+    return result
+  } else {
+    return []
+  }
+}

src/main/apis/app/uploader/index.ts

@@ -0,0 +1,177 @@
+import {
+  Notification,
+  BrowserWindow,
+  ipcMain,
+  WebContents,
+  clipboard
+} from 'electron'
+import dayjs from 'dayjs'
+import picgo from '@core/picgo'
+import db from '~/main/apis/core/datastore'
+import windowManager from 'apis/app/window/windowManager'
+import { IWindowList } from '#/types/enum'
+import util from 'util'
+import { IPicGo } from 'picgo'
+import { showNotification, calcDurationRange } from '~/main/utils/common'
+import { RENAME_FILE_NAME, TALKING_DATA_EVENT } from '~/universal/events/constants'
+import logger from '@core/picgo/logger'
+import { T } from '~/universal/i18n'
+import fse from 'fs-extra'
+import path from 'path'
+import { privacyManager } from '~/main/utils/privacyManager'
+
+const waitForShow = (webcontent: WebContents) => {
+  return new Promise<void>((resolve) => {
+    webcontent.on('did-finish-load', () => {
+      resolve()
+    })
+  })
+}
+
+const waitForRename = (window: BrowserWindow, id: number): Promise<string|null> => {
+  return new Promise((resolve) => {
+    const windowId = window.id
+    ipcMain.once(`${RENAME_FILE_NAME}${id}`, (evt: Event, newName: string) => {
+      resolve(newName)
+      window.close()
+    })
+    window.on('close', () => {
+      resolve(null)
+      ipcMain.removeAllListeners(`${RENAME_FILE_NAME}${id}`)
+      windowManager.deleteById(windowId)
+    })
+  })
+}
+
+const handleTalkingData = (webContents: WebContents, options: IAnalyticsData) => {
+  const data: ITalkingDataOptions = {
+    EventId: 'upload',
+    Label: options.type,
+    MapKv: {
+      by: options.fromClipboard ? 'clipboard' : 'files', // 上传剪贴板图片还是选择的文文件
+      count: options.count, // 上传的数量
+      duration: calcDurationRange(options.duration || 0), // 上传耗时
+      type: options.type
+    }
+  }
+  webContents.send(TALKING_DATA_EVENT, data)
+}
+
+class Uploader {
+  private webContents: WebContents | null = null
+  // private uploading: boolean = false
+  constructor () {
+    this.init()
+  }
+
+  init () {
+    picgo.on('notification', (message: Electron.NotificationConstructorOptions | undefined) => {
+      const notification = new Notification(message)
+      notification.show()
+    })
+
+    picgo.on('uploadProgress', (progress: any) => {
+      this.webContents?.send('uploadProgress', progress)
+    })
+    picgo.on('beforeTransform', () => {
+      if (db.get('settings.uploadNotification')) {
+        const notification = new Notification({
+          title: T('UPLOAD_PROGRESS'),
+          body: T('UPLOADING')
+        })
+        notification.show()
+      }
+    })
+    picgo.helper.beforeUploadPlugins.register('renameFn', {
+      handle: async (ctx: IPicGo) => {
+        const rename = db.get('settings.rename')
+        const autoRename = db.get('settings.autoRename')
+        if (autoRename || rename) {
+          await Promise.all(ctx.output.map(async (item, index) => {
+            let name: undefined | string | null
+            let fileName: string | undefined
+            if (autoRename) {
+              fileName = dayjs().add(index, 'ms').format('YYYYMMDDHHmmSSS') + item.extname
+            } else {
+              fileName = item.fileName
+            }
+            if (rename) {
+              const window = windowManager.create(IWindowList.RENAME_WINDOW)!
+              await waitForShow(window.webContents)
+              window.webContents.send(RENAME_FILE_NAME, fileName, item.fileName, window.webContents.id)
+              name = await waitForRename(window, window.webContents.id)
+            }
+            item.fileName = name || fileName
+          }))
+        }
+      }
+    })
+  }
+
+  setWebContents (webContents: WebContents) {
+    this.webContents = webContents
+    return this
+  }
+
+  /**
+   * use electron's clipboard image to upload
+   */
+  async uploadWithBuildInClipboard (): Promise<ImgInfo[]|false> {
+    let filePath = ''
+    try {
+      const nativeImage = clipboard.readImage()
+      if (nativeImage.isEmpty()) {
+        return false
+      }
+      const buffer = nativeImage.toPNG()
+      const baseDir = picgo.baseDir
+      const fileName = `${dayjs().format('YYYYMMDDHHmmSSS')}.png`
+      filePath = path.join(baseDir, fileName)
+      await fse.writeFile(filePath, buffer)
+      return await this.upload([filePath])
+    } catch (e: any) {
+      logger.error(e)
+      return false
+    } finally {
+      if (filePath) {
+        fse.unlink(filePath)
+      }
+    }
+  }
+
+  async upload (img?: IUploadOption): Promise<ImgInfo[]|false> {
+    try {
+      const privacyCheckRes = await privacyManager.check()
+      if (!privacyCheckRes) {
+        throw Error(T('PRIVACY_TIPS'))
+      }
+      const startTime = Date.now()
+      const output = await picgo.upload(img)
+      if (Array.isArray(output) && output.some((item: ImgInfo) => item.imgUrl)) {
+        if (this.webContents) {
+          handleTalkingData(this.webContents, {
+            fromClipboard: !img,
+            type: db.get('picBed.uploader') || db.get('picBed.current') || 'smms',
+            count: img ? img.length : 1,
+            duration: Date.now() - startTime
+          } as IAnalyticsData)
+        }
+        return output.filter(item => item.imgUrl)
+      } else {
+        return false
+      }
+    } catch (e: any) {
+      logger.error(e)
+      setTimeout(() => {
+        showNotification({
+          title: T('UPLOAD_FAILED'),
+          body: util.format(e.stack),
+          clickToCopy: true
+        })
+      }, 500)
+      return false
+    }
+  }
+}
+
+export default new Uploader()

src/main/apis/app/window/constants.ts

@@ -0,0 +1,17 @@
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+export const TRAY_WINDOW_URL = isDevelopment
+  ? (process.env.WEBPACK_DEV_SERVER_URL as string)
+  : 'picgo://./index.html'
+
+export const SETTING_WINDOW_URL = isDevelopment
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#main-page/upload`
+  : 'picgo://./index.html#main-page/upload'
+
+export const MINI_WINDOW_URL = isDevelopment
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#mini-page`
+  : 'picgo://./index.html#mini-page'
+
+export const RENAME_WINDOW_URL = process.env.NODE_ENV === 'development'
+  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#rename-page`
+  : 'picgo://./index.html#rename-page'

src/main/apis/app/window/windowList.ts

@@ -1,21 +1,28 @@
 import {
-  IWindowList,
-  DELETE_WINDOW_EVENT,
-  CREATE_WINDOW_EVENT,
   SETTING_WINDOW_URL,
   TRAY_WINDOW_URL,
   MINI_WINDOW_URL,
   RENAME_WINDOW_URL
 } from './constants'
-import { IWindowListItem } from '#/types/electron'
-import bus from '~/main/utils/eventBus'
-import db from '#/datastore'
-import { getWindowId } from '~/main/apis/bus'
-import { BrowserWindow, app } from 'electron'
-import { CREATE_APP_MENU } from '~/main/apis/bus/constants'
+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 { i18n } from '~/universal/i18n'
+import { URLSearchParams } from 'url'
 
 const windowList = new Map<IWindowList, IWindowListItem>()
 
+const handleWindowParams = (windowURL: string) => {
+  const [baseURL, hash = ''] = windowURL.split('#')
+  const search = new URLSearchParams()
+  const lang = i18n.getLanguage()
+  search.append('lang', lang)
+  return `${baseURL}?${search.toString()}#${hash}`
+}
+
 windowList.set(IWindowList.TRAY_WINDOW, {
   isValid: process.platform !== 'linux',
   multiple: false,
@@ -30,21 +37,17 @@ windowList.set(IWindowList.TRAY_WINDOW, {
       transparent: true,
       vibrancy: 'ultra-dark',
       webPreferences: {
-        nodeIntegration: true,
+        nodeIntegration: !!process.env.ELECTRON_NODE_INTEGRATION,
+        contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
         nodeIntegrationInWorker: true,
         backgroundThrottling: false
       }
     }
   },
   callback (window) {
-    const id = window!.id
-    window!.loadURL(TRAY_WINDOW_URL)
-    window!.on('closed', () => {
-      bus.emit(DELETE_WINDOW_EVENT, id)
-    })
-
-    window!.on('blur', () => {
-      window!.hide()
+    window.loadURL(handleWindowParams(TRAY_WINDOW_URL))
+    window.on('blur', () => {
+      window.hide()
     })
   }
 })
@@ -67,7 +70,8 @@ windowList.set(IWindowList.SETTING_WINDOW, {
       titleBarStyle: 'hidden',
       webPreferences: {
         backgroundThrottling: false,
-        nodeIntegration: true,
+        nodeIntegration: !!process.env.ELECTRON_NODE_INTEGRATION,
+        contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
         nodeIntegrationInWorker: true,
         webSecurity: false
       }
@@ -81,12 +85,10 @@ windowList.set(IWindowList.SETTING_WINDOW, {
     }
     return options
   },
-  callback (window) {
-    const id = window!.id
-    window!.loadURL(SETTING_WINDOW_URL)
-    window!.on('closed', () => {
-      bus.emit('toggleShortKeyModifiedMode', false)
-      bus.emit(DELETE_WINDOW_EVENT, id)
+  callback (window, windowManager) {
+    window.loadURL(handleWindowParams(SETTING_WINDOW_URL))
+    window.on('closed', () => {
+      bus.emit(TOGGLE_SHORTKEY_MODIFIED_MODE, false)
       if (process.platform === 'linux') {
         process.nextTick(() => {
           app.quit()
@@ -94,7 +96,7 @@ windowList.set(IWindowList.SETTING_WINDOW, {
       }
     })
     bus.emit(CREATE_APP_MENU)
-    bus.emit(CREATE_WINDOW_EVENT, IWindowList.MINI_WINDOW)
+    windowManager.create(IWindowList.MINI_WINDOW)
   }
 })
 
@@ -102,7 +104,7 @@ windowList.set(IWindowList.MINI_WINDOW, {
   isValid: process.platform !== 'darwin',
   multiple: false,
   options () {
-    let obj: IBrowserWindowOptions = {
+    const obj: IBrowserWindowOptions = {
       height: 64,
       width: 64,
       show: process.platform === 'linux',
@@ -114,7 +116,8 @@ windowList.set(IWindowList.MINI_WINDOW, {
       icon: `${__static}/logo.png`,
       webPreferences: {
         backgroundThrottling: false,
-        nodeIntegration: true,
+        nodeIntegration: !!process.env.ELECTRON_NODE_INTEGRATION,
+        contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
         nodeIntegrationInWorker: true
       }
     }
@@ -125,11 +128,7 @@ windowList.set(IWindowList.MINI_WINDOW, {
     return obj
   },
   callback (window) {
-    const id = window!.id
-    window!.loadURL(MINI_WINDOW_URL)
-    window!.on('closed', () => {
-      bus.emit(DELETE_WINDOW_EVENT, id)
-    })
+    window.loadURL(handleWindowParams(MINI_WINDOW_URL))
   }
 })
 
@@ -137,7 +136,7 @@ windowList.set(IWindowList.RENAME_WINDOW, {
   isValid: true,
   multiple: true,
   options () {
-    let options: IBrowserWindowOptions = {
+    const options: IBrowserWindowOptions = {
       height: 175,
       width: 300,
       show: true,
@@ -145,7 +144,8 @@ windowList.set(IWindowList.RENAME_WINDOW, {
       resizable: false,
       vibrancy: 'ultra-dark',
       webPreferences: {
-        nodeIntegration: true,
+        nodeIntegration: !!process.env.ELECTRON_NODE_INTEGRATION,
+        contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
         nodeIntegrationInWorker: true,
         backgroundThrottling: false
       }
@@ -158,10 +158,9 @@ windowList.set(IWindowList.RENAME_WINDOW, {
     }
     return options
   },
-  async callback (window) {
-    window!.loadURL(RENAME_WINDOW_URL)
-    const currentWindowId = await getWindowId()
-    const currentWindow = BrowserWindow.fromId(currentWindowId)
+  async callback (window, windowManager) {
+    window.loadURL(handleWindowParams(RENAME_WINDOW_URL))
+    const currentWindow = windowManager.getAvailableWindow()
     if (currentWindow && currentWindow.isVisible()) {
     // bounds: { x: 821, y: 75, width: 800, height: 450 }
       const bounds = currentWindow.getBounds()
@@ -173,7 +172,7 @@ windowList.set(IWindowList.RENAME_WINDOW, {
       } else { // if is the miniWindow
         positionY = bounds.y + bounds.height / 2
       }
-      window!.setPosition(positionX, positionY, false)
+      window.setPosition(positionX, positionY, false)
     }
   }
 })

src/main/apis/app/window/windowManager.ts

@@ -1,29 +1,20 @@
 import {
   BrowserWindow
 } from 'electron'
-import { IWindowManager, IWindowListItem } from '#/types/electron'
 import windowList from './windowList'
-import {
-  IWindowList,
-  DELETE_WINDOW_EVENT,
-  CREATE_WINDOW_EVENT
-} from './constants'
-import bus from '~/main/utils/eventBus'
+import { IWindowList } from '#/types/enum'
 
 class WindowManager implements IWindowManager {
   private windowMap: Map<IWindowList | string, BrowserWindow> = new Map()
   private windowIdMap: Map<number, IWindowList | string> = new Map()
-  constructor () {
-    bus.on(DELETE_WINDOW_EVENT, this.deleteById)
-    bus.on(CREATE_WINDOW_EVENT, this.create)
-  }
-  create = (name: IWindowList) => {
+  create (name: IWindowList) {
     const windowConfig: IWindowListItem = windowList.get(name)!
     if (windowConfig.isValid) {
       if (!windowConfig.multiple) {
-        if (this.windowMap.has(name)) return this.windowMap.get(name)!
+        if (this.has(name)) return this.windowMap.get(name)!
       }
       const window = new BrowserWindow(windowConfig.options())
+      const id = window.id
       if (windowConfig.multiple) {
         this.windowMap.set(`${name}_${window.id}`, window)
         this.windowIdMap.set(window.id, `${name}_${window.id}`)
@@ -31,30 +22,37 @@ class WindowManager implements IWindowManager {
         this.windowMap.set(name, window)
         this.windowIdMap.set(window.id, name)
       }
-      windowConfig.callback(window)
+      windowConfig.callback(window, this)
+      window.on('close', () => {
+        this.deleteById(id)
+      })
       return window
     } else {
       return null
     }
   }
+
   get (name: IWindowList) {
-    if (this.windowMap.has(name)) {
+    if (this.has(name)) {
       return this.windowMap.get(name)!
     } else {
       const window = this.create(name)
       return window
     }
   }
+
   has (name: IWindowList) {
     return this.windowMap.has(name)
   }
-  delete = (name: IWindowList) => {
-    const window = this.windowMap.get(name)
-    if (window) {
-      this.windowIdMap.delete(window.id)
-      this.windowMap.delete(name)
-    }
-  }
+
+  // useless
+  // delete (name: IWindowList) {
+  //   const window = this.windowMap.get(name)
+  //   if (window) {
+  //     this.windowIdMap.delete(window.id)
+  //     this.windowMap.delete(name)
+  //   }
+  // }
   deleteById = (id: number) => {
     const name = this.windowIdMap.get(id)
     if (name) {
@@ -62,6 +60,7 @@ class WindowManager implements IWindowManager {
       this.windowIdMap.delete(id)
     }
   }
+
   getAvailableWindow () {
     const miniWindow = this.windowMap.get(IWindowList.MINI_WINDOW)
     if (miniWindow && miniWindow.isVisible()) {

src/main/apis/core/bus/apis.ts

@@ -1,4 +1,4 @@
-import bus from '../../utils/eventBus'
+import bus from '.'
 import {
   UPLOAD_WITH_FILES,
   UPLOAD_WITH_FILES_RESPONSE,
@@ -14,7 +14,7 @@ export const uploadWithClipboardFiles = (): Promise<{
   success: boolean,
   result?: string[]
 }> => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     bus.once(UPLOAD_WITH_CLIPBOARD_FILES_RESPONSE, (result: string) => {
       if (result) {
         return resolve({
@@ -35,7 +35,7 @@ export const uploadWithFiles = (pathList: IFileWithPath[]): Promise<{
   success: boolean,
   result?: string[]
 }> => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     bus.once(UPLOAD_WITH_FILES_RESPONSE, (result: string[]) => {
       if (result.length) {
         return resolve({
@@ -55,7 +55,7 @@ export const uploadWithFiles = (pathList: IFileWithPath[]): Promise<{
 // get available window id:
 // miniWindow or settingWindow or trayWindow
 export const getWindowId = (): Promise<number> => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     bus.once(GET_WINDOW_ID_REPONSE, (id: number) => {
       resolve(id)
     })
@@ -65,7 +65,7 @@ export const getWindowId = (): Promise<number> => {
 
 // get settingWindow id:
 export const getSettingWindowId = (): Promise<number> => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     bus.once(GET_SETTING_WINDOW_ID_RESPONSE, (id: number) => {
       resolve(id)
     })

src/main/apis/core/datastore/dbChecker.ts

@@ -0,0 +1,139 @@
+import fs from 'fs-extra'
+import path from 'path'
+import { app as APP } from 'electron'
+import { getLogger } from '@core/utils/localLogger'
+import dayjs from 'dayjs'
+import { T } from '~/universal/i18n'
+const STORE_PATH = APP.getPath('userData')
+const configFilePath = path.join(STORE_PATH, 'data.json')
+const configFileBackupPath = path.join(STORE_PATH, 'data.bak.json')
+export const defaultConfigPath = configFilePath
+let _configFilePath = ''
+let hasCheckPath = false
+
+const errorMsg = {
+  broken: T('TIPS_PICGO_CONFIG_FILE_BROKEN_WITH_DEFAULT'),
+  brokenButBackup: T('TIPS_PICGO_CONFIG_FILE_BROKEN_WITH_BACKUP')
+}
+
+/** ensure notification list */
+if (!global.notificationList) global.notificationList = []
+
+function dbChecker () {
+  if (process.type !== 'renderer') {
+    // db save bak
+    try {
+      const { dbPath, dbBackupPath } = getGalleryDBPath()
+      if (fs.existsSync(dbPath)) {
+        fs.copyFileSync(dbPath, dbBackupPath)
+      }
+    } catch (e) {
+      console.error(e)
+    }
+
+    const configFilePath = dbPathChecker()
+    if (!fs.existsSync(configFilePath)) {
+      return
+    }
+    let configFile: string = '{}'
+    const optionsTpl = {
+      title: T('TIPS_NOTICE'),
+      body: ''
+    }
+    // config save bak
+    try {
+      configFile = fs.readFileSync(configFilePath, { encoding: 'utf-8' })
+      JSON.parse(configFile)
+    } catch (e) {
+      fs.unlinkSync(configFilePath)
+      if (fs.existsSync(configFileBackupPath)) {
+        try {
+          configFile = fs.readFileSync(configFileBackupPath, { encoding: 'utf-8' })
+          JSON.parse(configFile)
+          fs.writeFileSync(configFilePath, configFile, { encoding: 'utf-8' })
+          const stats = fs.statSync(configFileBackupPath)
+          optionsTpl.body = `${errorMsg.brokenButBackup}\n${T('TIPS_PICGO_BACKUP_FILE_VERSION', {
+            v: dayjs(stats.mtime).format('YYYY-MM-DD HH:mm:ss')
+          })}`
+          global.notificationList?.push(optionsTpl)
+          return
+        } catch (e) {
+          optionsTpl.body = errorMsg.broken
+          global.notificationList?.push(optionsTpl)
+          return
+        }
+      }
+      optionsTpl.body = errorMsg.broken
+      global.notificationList?.push(optionsTpl)
+      return
+    }
+    fs.writeFileSync(configFileBackupPath, configFile, { encoding: 'utf-8' })
+  }
+}
+
+/**
+ * Get config path
+ */
+function dbPathChecker (): string {
+  if (_configFilePath) {
+    return _configFilePath
+  }
+  // defaultConfigPath
+  _configFilePath = defaultConfigPath
+  // if defaultConfig path is not exit
+  // do not parse the content of config
+  if (!fs.existsSync(defaultConfigPath)) {
+    return _configFilePath
+  }
+  try {
+    const configString = fs.readFileSync(defaultConfigPath, { encoding: 'utf-8' })
+    const config = JSON.parse(configString)
+    const userConfigPath: string = config.configPath || ''
+    if (userConfigPath) {
+      if (fs.existsSync(userConfigPath) && userConfigPath.endsWith('.json')) {
+        _configFilePath = userConfigPath
+        return _configFilePath
+      }
+    }
+    return _configFilePath
+  } catch (e) {
+    const picgoLogPath = path.join(STORE_PATH, 'picgo.log')
+    const logger = getLogger(picgoLogPath)
+    if (!hasCheckPath) {
+      const optionsTpl = {
+        title: T('TIPS_NOTICE'),
+        body: T('TIPS_CUSTOM_CONFIG_FILE_PATH_ERROR')
+      }
+      global.notificationList?.push(optionsTpl)
+      hasCheckPath = true
+    }
+    logger('error', e)
+    console.error(e)
+    _configFilePath = defaultConfigPath
+    return _configFilePath
+  }
+}
+
+function dbPathDir () {
+  return path.dirname(dbPathChecker())
+}
+
+function getGalleryDBPath (): {
+  dbPath: string
+  dbBackupPath: string
+} {
+  const configPath = dbPathChecker()
+  const dbPath = path.join(path.dirname(configPath), 'picgo.db')
+  const dbBackupPath = path.join(path.dirname(dbPath), 'picgo.bak.db')
+  return {
+    dbPath,
+    dbBackupPath
+  }
+}
+
+export {
+  dbChecker,
+  dbPathChecker,
+  dbPathDir,
+  getGalleryDBPath
+}

src/main/apis/core/datastore/index.ts

@@ -0,0 +1,91 @@
+import fs from 'fs-extra'
+import { dbPathChecker, dbPathDir, getGalleryDBPath } from './dbChecker'
+import { DBStore, JSONStore } from '@picgo/store'
+import { T } from '~/universal/i18n'
+
+const STORE_PATH = dbPathDir()
+
+if (!fs.pathExistsSync(STORE_PATH)) {
+  fs.mkdirpSync(STORE_PATH)
+}
+const CONFIG_PATH: string = dbPathChecker()
+const DB_PATH: string = getGalleryDBPath().dbPath
+
+class ConfigStore {
+  private db: JSONStore
+  constructor () {
+    this.db = new JSONStore(CONFIG_PATH)
+
+    if (!this.db.has('picBed')) {
+      this.db.set('picBed', {
+        current: 'smms', // deprecated
+        uploader: 'smms',
+        smms: {
+          token: ''
+        }
+      })
+    }
+
+    if (!this.db.has('settings.shortKey')) {
+      this.db.set('settings.shortKey[picgo:upload]', {
+        enable: true,
+        key: 'CommandOrControl+Shift+P',
+        name: 'upload',
+        label: T('QUICK_UPLOAD')
+      })
+    }
+    this.read()
+  }
+
+  read (flush = false) {
+    // if flush -> true, read origin file again
+    this.db.read(flush)
+    return this.db
+  }
+
+  get (key = ''): any {
+    if (key === '') {
+      return this.db.read()
+    }
+    return this.db.get(key)
+  }
+
+  set (key: string, value: any): void {
+    return this.db.set(key, value)
+  }
+
+  has (key: string) {
+    return this.db.has(key)
+  }
+
+  unset (key: string, value: any): boolean {
+    return this.db.unset(key, value)
+  }
+
+  getConfigPath () {
+    return CONFIG_PATH
+  }
+}
+
+const db = new ConfigStore()
+
+export default db
+
+// v2.3.0 add gallery db
+class GalleryDB {
+  private static instance: DBStore
+  private constructor () {
+    console.log('init gallery db')
+  }
+
+  public static getInstance (): DBStore {
+    if (!GalleryDB.instance) {
+      GalleryDB.instance = new DBStore(DB_PATH, 'gallery')
+    }
+    return GalleryDB.instance
+  }
+}
+
+export {
+  GalleryDB
+}

src/main/apis/core/picgo/index.ts

@@ -0,0 +1,29 @@
+import { dbChecker, dbPathChecker } from 'apis/core/datastore/dbChecker'
+import pkg from 'root/package.json'
+import { PicGo } from 'picgo'
+import db from 'apis/core/datastore'
+
+const CONFIG_PATH = dbPathChecker()
+
+dbChecker()
+
+const picgo = new PicGo(CONFIG_PATH)
+picgo.saveConfig({
+  debug: true,
+  PICGO_ENV: 'GUI'
+})
+
+global.PICGO_GUI_VERSION = pkg.version
+picgo.GUI_VERSION = global.PICGO_GUI_VERSION
+
+const originPicGoSaveConfig = picgo.saveConfig.bind(picgo)
+
+picgo.saveConfig = (config: IStringKeyMap) => {
+  originPicGoSaveConfig(config)
+  // flush electron's db
+  setTimeout(() => {
+    db.read(true)
+  }, 0)
+}
+
+export default picgo

src/main/apis/core/picgo/logger.ts

@@ -0,0 +1,5 @@
+import picgo from '.'
+
+const logger = picgo.log
+
+export default logger

src/main/apis/core/utils/localLogger.ts

@@ -0,0 +1,32 @@
+import fs from 'fs-extra'
+import dayjs from 'dayjs'
+import util from 'util'
+
+/**
+ * for local log before picgo inited
+ */
+const getLogger = (logPath: string) => {
+  if (!fs.existsSync(logPath)) {
+    fs.ensureFileSync(logPath)
+  }
+  return (type: string, ...msg: any[]) => {
+    let log = `${dayjs().format('YYYY-MM-DD HH:mm:ss')} [PicGo ${type.toUpperCase()}] `
+    msg.forEach((item: ILogArgvTypeWithError) => {
+      if (typeof item === 'object' && type === 'error') {
+        log += `\n------Error Stack Begin------\n${util.format(item.stack)}\n-------Error Stack End------- `
+      } else {
+        if (typeof item === 'object') {
+          item = JSON.stringify(item)
+        }
+        log += `${item} `
+      }
+    })
+    log += '\n'
+    // A synchronized approach to avoid log msg sequence errors
+    fs.appendFileSync(logPath, log)
+  }
+}
+
+export {
+  getLogger
+}

src/main/apis/eventCenter/ipcList.ts

@@ -1,143 +0,0 @@
-import {
-  app,
-  ipcMain,
-  clipboard,
-  Notification,
-  IpcMainEvent
-} from 'electron'
-import windowManager from '~/main/apis/window/windowManager'
-import { IWindowList } from '~/main/apis/window/constants'
-import uploader from '~/main/apis/uploader'
-import pasteTemplate from '#/utils/pasteTemplate'
-import db from '#/datastore'
-import server from '~/main/server'
-import getPicBeds from '~/main/utils/getPicBeds'
-import shortKeyHandler from '~/main/apis/shortKey/shortKeyHandler'
-import bus from '~/main/utils/eventBus'
-import {
-  uploadClipboardFiles,
-  uploadChoosedFiles
-} from '~/main/apis/uploader/api'
-import picgoCoreIPC from './picgoCoreIPC'
-
-export default {
-  listen () {
-    picgoCoreIPC.listen()
-    // from macOS tray
-    ipcMain.on('uploadClipboardFiles', async () => {
-      const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
-      const img = await uploader.setWebContents(trayWindow.webContents).upload()
-      if (img !== false) {
-        const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
-        clipboard.writeText(pasteTemplate(pasteStyle, img[0]))
-        const notification = new Notification({
-          title: '上传成功',
-          body: img[0].imgUrl!,
-          // icon: file[0]
-          icon: img[0].imgUrl
-        })
-        notification.show()
-        db.insert('uploaded', img[0])
-        trayWindow.webContents.send('clipboardFiles', [])
-        if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-          windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('updateGallery')
-        }
-      }
-      trayWindow.webContents.send('uploadFiles')
-    })
-
-    ipcMain.on('uploadClipboardFilesFromUploadPage', () => {
-      uploadClipboardFiles()
-    })
-
-    ipcMain.on('uploadChoosedFiles', async (evt: IpcMainEvent, files: IFileWithPath[]) => {
-      return uploadChoosedFiles(evt.sender, files)
-    })
-
-    ipcMain.on('updateShortKey', (evt: IpcMainEvent, item: IShortKeyConfig, oldKey: string, from: string) => {
-      const result = shortKeyHandler.updateShortKey(item, oldKey, from)
-      evt.sender.send('updateShortKeyResponse', result)
-      if (result) {
-        const notification = new Notification({
-          title: '操作成功',
-          body: '你的快捷键已经修改成功'
-        })
-        notification.show()
-      } else {
-        const notification = new Notification({
-          title: '操作失败',
-          body: '快捷键冲突，请重新设置'
-        })
-        notification.show()
-      }
-    })
-
-    ipcMain.on('bindOrUnbindShortKey', (evt: IpcMainEvent, item: IShortKeyConfig, from: string) => {
-      const result = shortKeyHandler.bindOrUnbindShortKey(item, from)
-      if (result) {
-        const notification = new Notification({
-          title: '操作成功',
-          body: '你的快捷键已经修改成功'
-        })
-        notification.show()
-      } else {
-        const notification = new Notification({
-          title: '操作失败',
-          body: '快捷键冲突，请重新设置'
-        })
-        notification.show()
-      }
-    })
-
-    ipcMain.on('updateCustomLink', () => {
-      const notification = new Notification({
-        title: '操作成功',
-        body: '你的自定义链接格式已经修改成功'
-      })
-      notification.show()
-    })
-
-    ipcMain.on('autoStart', (evt: IpcMainEvent, val: boolean) => {
-      app.setLoginItemSettings({
-        openAtLogin: val
-      })
-    })
-
-    ipcMain.on('openSettingWindow', () => {
-      windowManager.get(IWindowList.SETTING_WINDOW)!.show()
-      if (windowManager.has(IWindowList.MINI_WINDOW)) {
-        windowManager.get(IWindowList.MINI_WINDOW)!.hide()
-      }
-    })
-
-    ipcMain.on('openMiniWindow', () => {
-      const miniWindow = windowManager.get(IWindowList.MINI_WINDOW)!
-      const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)!
-      miniWindow.show()
-      miniWindow.focus()
-      settingWindow.hide()
-    })
-
-    //  from mini window
-    ipcMain.on('syncPicBed', () => {
-      if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-        windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
-      }
-    })
-
-    ipcMain.on('getPicBeds', (evt: IpcMainEvent) => {
-      const picBeds = getPicBeds()
-      evt.sender.send('getPicBeds', picBeds)
-      evt.returnValue = picBeds
-    })
-
-    ipcMain.on('toggleShortKeyModifiedMode', (evt: IpcMainEvent, val: boolean) => {
-      bus.emit('toggleShortKeyModifiedMode', val)
-    })
-
-    ipcMain.on('updateServer', () => {
-      server.restart()
-    })
-  },
-  dispose () {}
-}

src/main/apis/eventCenter/picgoCoreIPC.ts

@@ -1,225 +0,0 @@
-import path from 'path'
-import GuiApi from '../gui'
-import {
-  dialog,
-  shell,
-  IpcMainEvent,
-  ipcMain,
-  app
-} from 'electron'
-import PicGoCore from '~/universal/types/picgo'
-import { IPicGoHelperType } from '#/types/enum'
-import shortKeyHandler from '../shortKey/shortKeyHandler'
-import picgo from '~/main/apis/picgo'
-
-// eslint-disable-next-line
-const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
-// const PluginHandler = requireFunc('picgo/dist/lib/PluginHandler').default
-const STORE_PATH = app.getPath('userData')
-// const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
-
-type PicGoNotice = {
-  title: string,
-  body: string[]
-}
-
-interface GuiMenuItem {
-  label: string
-  handle: (arg0: PicGoCore, arg1: GuiApi) => Promise<void>
-}
-
-// get uploader or transformer config
-const getConfig = (name: string, type: IPicGoHelperType, ctx: PicGoCore) => {
-  let config: any[] = []
-  if (name === '') {
-    return config
-  } else {
-    const handler = ctx.helper[type].get(name)
-    if (handler) {
-      if (handler.config) {
-        config = handler.config(ctx)
-      }
-    }
-    return config
-  }
-}
-
-const handleConfigWithFunction = (config: any[]) => {
-  for (let i in config) {
-    if (typeof config[i].default === 'function') {
-      config[i].default = config[i].default()
-    }
-    if (typeof config[i].choices === 'function') {
-      config[i].choices = config[i].choices()
-    }
-  }
-  return config
-}
-
-const handleGetPluginList = () => {
-  ipcMain.on('getPluginList', (event: IpcMainEvent) => {
-    const pluginList = picgo.pluginLoader.getList()
-    const list = []
-    for (let i in pluginList) {
-      const plugin = picgo.pluginLoader.getPlugin(pluginList[i])
-      const pluginPath = path.join(STORE_PATH, `/node_modules/${pluginList[i]}`)
-      const pluginPKG = requireFunc(path.join(pluginPath, 'package.json'))
-      const uploaderName = plugin.uploader || ''
-      const transformerName = plugin.transformer || ''
-      let menu = []
-      if (plugin.guiMenu) {
-        menu = plugin.guiMenu(picgo)
-      }
-      let gui = false
-      if (pluginPKG.keywords && pluginPKG.keywords.length > 0) {
-        if (pluginPKG.keywords.includes('picgo-gui-plugin')) {
-          gui = true
-        }
-      }
-      const obj: IPicGoPlugin = {
-        name: pluginList[i].replace(/picgo-plugin-/, ''),
-        author: pluginPKG.author.name || pluginPKG.author,
-        description: pluginPKG.description,
-        logo: 'file://' + path.join(pluginPath, 'logo.png').split(path.sep).join('/'),
-        version: pluginPKG.version,
-        gui,
-        config: {
-          plugin: {
-            name: pluginList[i].replace(/picgo-plugin-/, ''),
-            config: plugin.config ? handleConfigWithFunction(plugin.config(picgo)) : []
-          },
-          uploader: {
-            name: uploaderName,
-            config: handleConfigWithFunction(getConfig(uploaderName, IPicGoHelperType.uploader, picgo))
-          },
-          transformer: {
-            name: transformerName,
-            config: handleConfigWithFunction(getConfig(uploaderName, IPicGoHelperType.transformer, picgo))
-          }
-        },
-        enabled: picgo.getConfig(`picgoPlugins.${pluginList[i]}`),
-        homepage: pluginPKG.homepage ? pluginPKG.homepage : '',
-        guiMenu: menu,
-        ing: false
-      }
-      list.push(obj)
-    }
-    event.sender.send('pluginList', list)
-    picgo.cmd.program.removeAllListeners()
-  })
-}
-
-const handlePluginInstall = () => {
-  ipcMain.on('installPlugin', async (event: IpcMainEvent, msg: string) => {
-    picgo.once('installSuccess', (notice: PicGoNotice) => {
-      event.sender.send('installSuccess', notice.body[0].replace(/picgo-plugin-/, ''))
-      shortKeyHandler.registerPluginShortKey(notice.body[0])
-      picgo.removeAllListeners('installFailed')
-    })
-    picgo.once('installFailed', () => {
-      handleNPMError()
-      picgo.removeAllListeners('installSuccess')
-    })
-    await picgo.pluginHandler.install([msg])
-    picgo.cmd.program.removeAllListeners()
-  })
-}
-
-const handlePluginUninstall = () => {
-  ipcMain.on('uninstallPlugin', async (event: IpcMainEvent, msg: string) => {
-    picgo.once('uninstallSuccess', (notice: PicGoNotice) => {
-      event.sender.send('uninstallSuccess', notice.body[0].replace(/picgo-plugin-/, ''))
-      shortKeyHandler.unregisterPluginShortKey(notice.body[0])
-      picgo.removeAllListeners('uninstallFailed')
-    })
-    picgo.once('uninstallFailed', () => {
-      handleNPMError()
-      picgo.removeAllListeners('uninstallSuccess')
-    })
-    await picgo.pluginHandler.uninstall([msg])
-    picgo.cmd.program.removeAllListeners()
-  })
-}
-
-const handlePluginUpdate = () => {
-  ipcMain.on('updatePlugin', async (event: IpcMainEvent, msg: string) => {
-    picgo.once('updateSuccess', (notice: { body: string[], title: string }) => {
-      event.sender.send('updateSuccess', notice.body[0].replace(/picgo-plugin-/, ''))
-      picgo.removeAllListeners('updateFailed')
-    })
-    picgo.once('updateFailed', () => {
-      handleNPMError()
-      picgo.removeAllListeners('updateSuccess')
-    })
-    await picgo.pluginHandler.update([msg])
-    picgo.cmd.program.removeAllListeners()
-  })
-}
-
-const handleNPMError = () => {
-  dialog.showMessageBox({
-    title: '发生错误',
-    message: '请安装Node.js并重启PicGo再继续操作',
-    buttons: ['Yes']
-  }).then((res) => {
-    if (res.response === 0) {
-      shell.openExternal('https://nodejs.org/')
-    }
-  })
-}
-
-const handleGetPicBedConfig = () => {
-  ipcMain.on('getPicBedConfig', (event: IpcMainEvent, type: string) => {
-    const name = picgo.helper.uploader.get(type).name || type
-    if (picgo.helper.uploader.get(type).config) {
-      const config = handleConfigWithFunction(picgo.helper.uploader.get(type).config(picgo))
-      event.sender.send('getPicBedConfig', config, name)
-    } else {
-      event.sender.send('getPicBedConfig', [], name)
-    }
-    picgo.cmd.program.removeAllListeners()
-  })
-}
-
-const handlePluginActions = () => {
-  ipcMain.on('pluginActions', (event: IpcMainEvent, name: string, label: string) => {
-    const plugin = picgo.pluginLoader.getPlugin(`picgo-plugin-${name}`)
-    const guiApi = new GuiApi()
-    if (plugin.guiMenu && plugin.guiMenu(picgo).length > 0) {
-      const menu: GuiMenuItem[] = plugin.guiMenu(picgo)
-      menu.forEach(item => {
-        if (item.label === label) {
-          item.handle(picgo, guiApi)
-        }
-      })
-    }
-  })
-}
-
-const handleRemoveFiles = () => {
-  ipcMain.on('removeFiles', (event: IpcMainEvent, files: ImgInfo[]) => {
-    const guiApi = new GuiApi()
-    setTimeout(() => {
-      picgo.emit('remove', files, guiApi)
-    }, 500)
-  })
-}
-
-const handlePicGoSaveData = () => {
-  ipcMain.on('picgoSaveData', (event: IpcMainEvent, data: IObj) => {
-    picgo.saveConfig(data)
-  })
-}
-
-export default {
-  listen () {
-    handleGetPluginList()
-    handlePluginInstall()
-    handlePluginUninstall()
-    handlePluginUpdate()
-    handleGetPicBedConfig()
-    handlePluginActions()
-    handleRemoveFiles()
-    handlePicGoSaveData()
-  }
-}

src/main/apis/gui/index.ts

@@ -1,29 +1,48 @@
 import {
   dialog,
   BrowserWindow,
-  clipboard,
   Notification,
   ipcMain
 } from 'electron'
-import db from '#/datastore'
-import uploader from '../uploader'
-import pasteTemplate from '#/utils/pasteTemplate'
+import db, { GalleryDB } from 'apis/core/datastore'
+import { dbPathChecker, defaultConfigPath, getGalleryDBPath } from 'apis/core/datastore/dbChecker'
+import uploader from 'apis/app/uploader'
+import pasteTemplate from '~/main/utils/pasteTemplate'
+import { handleCopyUrl } from '~/main/utils/common'
 import {
   getWindowId,
   getSettingWindowId
-} from '~/main/apis/bus'
+} from '@core/bus/apis'
+import {
+  SHOW_INPUT_BOX
+} from '~/universal/events/constants'
+import { DBStore } from '@picgo/store'
+import { T } from '~/universal/i18n'
 
+// Cross-process support may be required in the future
 class GuiApi implements IGuiApi {
+  private static instance: GuiApi
   private windowId: number = -1
   private settingWindowId: number = -1
+  private constructor () {
+    console.log('init guiapi')
+  }
+
+  public static getInstance (): GuiApi {
+    if (!GuiApi.instance) {
+      GuiApi.instance = new GuiApi()
+    }
+    return GuiApi.instance
+  }
+
   private async showSettingWindow () {
     this.settingWindowId = await getSettingWindowId()
     const settingWindow = BrowserWindow.fromId(this.settingWindowId)
-    if (settingWindow.isVisible()) {
+    if (settingWindow?.isVisible()) {
       return true
     }
-    settingWindow.show()
-    return new Promise((resolve, reject) => {
+    settingWindow?.show()
+    return new Promise<void>((resolve) => {
       setTimeout(() => {
         resolve()
       }, 1000) // TODO: a better way to wait page loaded.
@@ -31,7 +50,7 @@ class GuiApi implements IGuiApi {
   }
 
   private getWebcontentsByWindowId (id: number) {
-    return BrowserWindow.fromId(id).webContents
+    return BrowserWindow.fromId(id)?.webContents
   }
 
   async showInputBox (options: IShowInputBoxOption = {
@@ -39,46 +58,42 @@ class GuiApi implements IGuiApi {
     placeholder: ''
   }) {
     await this.showSettingWindow()
-    this.getWebcontentsByWindowId(this.settingWindowId)
-      .send('showInputBox', options)
-    return new Promise<string>((resolve, reject) => {
-      ipcMain.once('showInputBox', (event: Event, value: string) => {
+    this.getWebcontentsByWindowId(this.settingWindowId)?.send(SHOW_INPUT_BOX, options)
+    return new Promise<string>((resolve) => {
+      ipcMain.once(SHOW_INPUT_BOX, (event: Event, value: string) => {
         resolve(value)
       })
     })
   }
 
-  showFileExplorer (options: IShowFileExplorerOption = {}) {
-    return new Promise<string>(async (resolve, reject) => {
-      this.windowId = await getWindowId()
-      dialog.showOpenDialog(BrowserWindow.fromId(this.windowId), options, (filename: string) => {
-        resolve(filename)
-      })
-    })
+  async showFileExplorer (options: IShowFileExplorerOption = {}) {
+    this.windowId = await getWindowId()
+    const res = await dialog.showOpenDialog(BrowserWindow.fromId(this.windowId)!, options)
+    return res.filePaths?.[0]
   }
 
   async upload (input: IUploadOption) {
     this.windowId = await getWindowId()
     const webContents = this.getWebcontentsByWindowId(this.windowId)
-    const imgs = await uploader.setWebContents(webContents).upload(input)
+    const imgs = await uploader.setWebContents(webContents!).upload(input)
     if (imgs !== false) {
       const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
-      let pasteText = ''
+      const pasteText: string[] = []
       for (let i = 0; i < imgs.length; i++) {
-        pasteText += pasteTemplate(pasteStyle, imgs[i]) + '\r\n'
+        pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
         const notification = new Notification({
-          title: '上传成功',
+          title: T('UPLOAD_SUCCEED'),
           body: imgs[i].imgUrl as string,
           icon: imgs[i].imgUrl
         })
         setTimeout(() => {
           notification.show()
         }, i * 100)
-        db.insert('uploaded', imgs[i])
+        await GalleryDB.getInstance().insert(imgs[i])
       }
-      clipboard.writeText(pasteText)
-      webContents.send('uploadFiles', imgs)
-      webContents.send('updateGallery')
+      handleCopyUrl(pasteText.join('\n'))
+      webContents?.send('uploadFiles', imgs)
+      webContents?.send('updateGallery')
       return imgs
     }
     return []
@@ -101,10 +116,10 @@ class GuiApi implements IGuiApi {
     type: 'info',
     buttons: ['Yes', 'No']
   }) {
-    return new Promise<IShowMessageBoxResult>(async (resolve, reject) => {
+    return new Promise<IShowMessageBoxResult>(async (resolve) => {
       this.windowId = await getWindowId()
       dialog.showMessageBox(
-        BrowserWindow.fromId(this.windowId),
+        BrowserWindow.fromId(this.windowId)!,
         options
       ).then((res) => {
         resolve({
@@ -114,6 +129,69 @@ class GuiApi implements IGuiApi {
       })
     })
   }
+
+  /**
+   * get picgo config/data path
+   */
+  async getConfigPath () {
+    const currentConfigPath = dbPathChecker()
+    const galleryDBPath = getGalleryDBPath().dbPath
+    return {
+      defaultConfigPath,
+      currentConfigPath,
+      galleryDBPath
+    }
+  }
+
+  get galleryDB (): DBStore {
+    return new Proxy<DBStore>(GalleryDB.getInstance(), {
+      get (target, prop: keyof DBStore) {
+        if (prop === 'overwrite') {
+          return new Proxy(GalleryDB.getInstance().overwrite, {
+            apply (target, ctx, args) {
+              return new Promise((resolve) => {
+                const guiApi = GuiApi.getInstance()
+                guiApi.showMessageBox({
+                  title: T('TIPS_WARNING'),
+                  message: T('TIPS_PLUGIN_REMOVE_GALLERY_ITEM'),
+                  type: 'info',
+                  buttons: ['Yes', 'No']
+                }).then(res => {
+                  if (res.result === 0) {
+                    resolve(Reflect.apply(target, ctx, args))
+                  } else {
+                    resolve(undefined)
+                  }
+                })
+              })
+            }
+          })
+        }
+        if (prop === 'removeById') {
+          return new Proxy(GalleryDB.getInstance().removeById, {
+            apply (target, ctx, args) {
+              return new Promise((resolve) => {
+                const guiApi = GuiApi.getInstance()
+                guiApi.showMessageBox({
+                  title: T('TIPS_WARNING'),
+                  message: T('TIPS_PLUGIN_REMOVE_GALLERY_ITEM'),
+                  type: 'info',
+                  buttons: ['Yes', 'No']
+                }).then(res => {
+                  if (res.result === 0) {
+                    resolve(Reflect.apply(target, ctx, args))
+                  } else {
+                    resolve(undefined)
+                  }
+                })
+              })
+            }
+          })
+        }
+        return Reflect.get(target, prop)
+      }
+    })
+  }
 }
 
 export default GuiApi

src/main/apis/picgo/index.ts

@@ -1,19 +0,0 @@
-import PicGoCore from '~/universal/types/picgo'
-import {
-  app
-} from 'electron'
-import path from 'path'
-// eslint-disable-next-line
-const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
-const PicGo = requireFunc('picgo') as typeof PicGoCore
-const STORE_PATH = app.getPath('userData')
-
-const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
-
-const picgo = new PicGo(CONFIG_PATH)
-picgo.saveConfig({
-  debug: true,
-  PICGO_ENV: 'GUI'
-})
-
-export default picgo as PicGoCore

src/main/apis/uploader/api.ts

@@ -1,74 +0,0 @@
-import {
-  clipboard,
-  Notification,
-  WebContents
-} from 'electron'
-import windowManager from '~/main/apis/window/windowManager'
-import { IWindowList } from '~/main/apis/window/constants'
-import uploader from './'
-import pasteTemplate from '#/utils/pasteTemplate'
-import db from '#/datastore'
-export const uploadClipboardFiles = async (): Promise<string> => {
-  const win = windowManager.getAvailableWindow()
-  let img = await uploader.setWebContents(win!.webContents).upload()
-  if (img !== false) {
-    if (img.length > 0) {
-      const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
-      const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
-      clipboard.writeText(pasteTemplate(pasteStyle, img[0]))
-      const notification = new Notification({
-        title: '上传成功',
-        body: img[0].imgUrl!,
-        icon: img[0].imgUrl
-      })
-      notification.show()
-      db.insert('uploaded', img[0])
-      trayWindow.webContents.send('clipboardFiles', [])
-      trayWindow.webContents.send('uploadFiles', img)
-      if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-        windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('updateGallery')
-      }
-      return img[0].imgUrl as string
-    } else {
-      const notification = new Notification({
-        title: '上传不成功',
-        body: '你剪贴板最新的一条记录不是图片哦'
-      })
-      notification.show()
-      return ''
-    }
-  } else {
-    return ''
-  }
-}
-
-export const uploadChoosedFiles = async (webContents: WebContents, files: IFileWithPath[]): Promise<string[]> => {
-  const input = files.map(item => item.path)
-  const imgs = await uploader.setWebContents(webContents).upload(input)
-  const result = []
-  if (imgs !== false) {
-    const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
-    let pasteText = ''
-    for (let i = 0; i < imgs.length; i++) {
-      pasteText += pasteTemplate(pasteStyle, imgs[i]) + '\r\n'
-      const notification = new Notification({
-        title: '上传成功',
-        body: imgs[i].imgUrl!,
-        icon: files[i].path
-      })
-      setTimeout(() => {
-        notification.show()
-      }, i * 100)
-      db.insert('uploaded', imgs[i])
-      result.push(imgs[i].imgUrl!)
-    }
-    clipboard.writeText(pasteText)
-    windowManager.get(IWindowList.TRAY_WINDOW)!.webContents.send('uploadFiles', imgs)
-    if (windowManager.has(IWindowList.SETTING_WINDOW)) {
-      windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('updateGallery')
-    }
-    return result
-  } else {
-    return []
-  }
-}

src/main/apis/uploader/index.ts

@@ -1,117 +0,0 @@
-import {
-  app,
-  Notification,
-  BrowserWindow,
-  ipcMain,
-  WebContents
-} from 'electron'
-import dayjs from 'dayjs'
-import picgo from '~/main/apis/picgo'
-import db from '#/datastore'
-import windowManager from '~/main/apis/window/windowManager'
-import { IWindowList } from '~/main/apis/window/constants'
-
-const waitForShow = (webcontent: WebContents) => {
-  return new Promise((resolve, reject) => {
-    webcontent.on('did-finish-load', () => {
-      resolve()
-    })
-  })
-}
-
-const waitForRename = (window: BrowserWindow, id: number): Promise<string|null> => {
-  return new Promise((resolve, reject) => {
-    const windowId = window.id
-    ipcMain.once(`rename${id}`, (evt: Event, newName: string) => {
-      resolve(newName)
-      window.close()
-    })
-    window.on('close', () => {
-      resolve(null)
-      ipcMain.removeAllListeners(`rename${id}`)
-      windowManager.deleteById(windowId)
-    })
-  })
-}
-
-class Uploader {
-  private webContents: WebContents | null = null
-  constructor () {
-    this.init()
-  }
-
-  init () {
-    picgo.on('notification', message => {
-      const notification = new Notification(message)
-      notification.show()
-    })
-
-    picgo.on('uploadProgress', progress => {
-      this.webContents?.send('uploadProgress', progress)
-    })
-    picgo.on('beforeTransform', ctx => {
-      if (db.get('settings.uploadNotification')) {
-        const notification = new Notification({
-          title: '上传进度',
-          body: '正在上传'
-        })
-        notification.show()
-      }
-    })
-    picgo.helper.beforeUploadPlugins.register('renameFn', {
-      handle: async ctx => {
-        const rename = db.get('settings.rename')
-        const autoRename = db.get('settings.autoRename')
-        await Promise.all(ctx.output.map(async (item, index) => {
-          let name: undefined | string | null
-          let fileName: string | undefined
-          if (autoRename) {
-            fileName = dayjs().add(index, 'second').format('YYYYMMDDHHmmss') + item.extname
-          } else {
-            fileName = item.fileName
-          }
-          if (rename) {
-            const window = windowManager.create(IWindowList.RENAME_WINDOW)!
-            await waitForShow(window.webContents)
-            window.webContents.send('rename', fileName, window.webContents.id)
-            name = await waitForRename(window, window.webContents.id)
-          }
-          item.fileName = name || fileName
-        }))
-      }
-    })
-  }
-
-  setWebContents (webContents: WebContents) {
-    this.webContents = webContents
-    return this
-  }
-
-  upload (img?: IUploadOption): Promise<ImgInfo[]|false> {
-    picgo.upload(img)
-
-    return new Promise((resolve) => {
-      picgo.once('finished', ctx => {
-        if (ctx.output.every((item: ImgInfo) => item.imgUrl)) {
-          resolve(ctx.output)
-        } else {
-          resolve(false)
-        }
-        picgo.removeAllListeners('failed')
-      })
-      picgo.once('failed', ctx => {
-        setTimeout(() => {
-          const notification = new Notification({
-            title: '上传失败',
-            body: '请检查配置和上传的文件是否符合要求'
-          })
-          notification.show()
-        }, 500)
-        picgo.removeAllListeners('finished')
-        resolve(false)
-      })
-    })
-  }
-}
-
-export default new Uploader()

src/main/apis/window/constants.ts

@@ -1,27 +0,0 @@
-export enum IWindowList {
-  SETTING_WINDOW = 'SETTING_WINDOW',
-  TRAY_WINDOW = 'TRAY_WINDOW',
-  MINI_WINDOW = 'MINI_WINDOW',
-  RENAME_WINDOW = 'RENAME_WINDOW'
-}
-
-const isDevelopment = process.env.NODE_ENV !== 'production'
-
-export const TRAY_WINDOW_URL = isDevelopment
-  ? (process.env.WEBPACK_DEV_SERVER_URL as string)
-  : `picgo://./index.html`
-
-export const SETTING_WINDOW_URL = isDevelopment
-  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#setting/upload`
-  : `picgo://./index.html#setting/upload`
-
-export const MINI_WINDOW_URL = isDevelopment
-  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#mini-page`
-  : `picgo://./index.html#mini-page`
-
-export const RENAME_WINDOW_URL = process.env.NODE_ENV === 'development'
-  ? `${(process.env.WEBPACK_DEV_SERVER_URL as string)}#rename-page`
-  : `picgo://./index.html#rename-page`
-
-export const DELETE_WINDOW_EVENT = 'DELETE_WINDOW_EVENT'
-export const CREATE_WINDOW_EVENT = 'CREATE_WINDOW_EVENT'

src/main/events/busEventList.ts

@@ -1,13 +1,13 @@
-import bus from '~/main/utils/eventBus'
+import bus from '@core/bus'
 import {
   uploadClipboardFiles,
   uploadChoosedFiles
-} from '~/main/apis/uploader/api'
+} from 'apis/app/uploader/apis'
 import {
   createMenu
-} from '~/main/apis/app'
-import { IWindowList } from '~/main/apis/window/constants'
-import windowManager from '~/main/apis/window/windowManager'
+} from 'apis/app/system'
+import { IWindowList } from '#/types/enum'
+import windowManager from 'apis/app/window/windowManager'
 import {
   UPLOAD_WITH_FILES,
   UPLOAD_WITH_FILES_RESPONSE,
@@ -18,7 +18,7 @@ import {
   GET_SETTING_WINDOW_ID,
   GET_SETTING_WINDOW_ID_RESPONSE,
   CREATE_APP_MENU
-} from '~/main/apis/bus/constants'
+} from '@core/bus/constants'
 function initEventCenter () {
   const eventList: any = {
     'picgo:upload': uploadClipboardFiles,
@@ -28,7 +28,7 @@ function initEventCenter () {
     [GET_SETTING_WINDOW_ID]: busCallGetSettingWindowId,
     [CREATE_APP_MENU]: createMenu
   }
-  for (let i in eventList) {
+  for (const i in eventList) {
     bus.on(i, eventList[i])
   }
 }

src/main/events/ipcList.ts

@@ -0,0 +1,233 @@
+import {
+  app,
+  ipcMain,
+  shell,
+  Notification,
+  IpcMainEvent,
+  BrowserWindow
+} from 'electron'
+import windowManager from 'apis/app/window/windowManager'
+import { IWindowList } from '#/types/enum'
+import uploader from 'apis/app/uploader'
+import pasteTemplate from '~/main/utils/pasteTemplate'
+import db, { GalleryDB } from '~/main/apis/core/datastore'
+import server from '~/main/server'
+import getPicBeds from '~/main/utils/getPicBeds'
+import shortKeyHandler from 'apis/app/shortKey/shortKeyHandler'
+import bus from '@core/bus'
+import {
+  TOGGLE_SHORTKEY_MODIFIED_MODE,
+  OPEN_DEVTOOLS,
+  SHOW_MINI_PAGE_MENU,
+  MINIMIZE_WINDOW,
+  CLOSE_WINDOW,
+  SHOW_MAIN_PAGE_MENU,
+  SHOW_UPLOAD_PAGE_MENU,
+  OPEN_USER_STORE_FILE,
+  OPEN_URL,
+  RELOAD_APP,
+  SHOW_PLUGIN_PAGE_MENU,
+  SET_MINI_WINDOW_POS,
+  CHANGE_LANGUAGE
+} from '#/events/constants'
+import {
+  uploadClipboardFiles,
+  uploadChoosedFiles
+} from '~/main/apis/app/uploader/apis'
+import picgoCoreIPC from './picgoCoreIPC'
+import { handleCopyUrl } from '~/main/utils/common'
+import { buildMainPageMenu, buildMiniPageMenu, buildPluginPageMenu, buildUploadPageMenu } from './remotes/menu'
+import path from 'path'
+import { i18n, T } from '~/universal/i18n'
+
+const STORE_PATH = app.getPath('userData')
+
+export default {
+  listen () {
+    picgoCoreIPC.listen()
+    // from macOS tray
+    ipcMain.on('uploadClipboardFiles', async () => {
+      const trayWindow = windowManager.get(IWindowList.TRAY_WINDOW)!
+      const img = await uploader.setWebContents(trayWindow.webContents).upload()
+      if (img !== false) {
+        const pasteStyle = db.get('settings.pasteStyle') || 'markdown'
+        handleCopyUrl(pasteTemplate(pasteStyle, img[0], db.get('settings.customLink')))
+        const notification = new Notification({
+          title: T('UPLOAD_SUCCEED'),
+          body: img[0].imgUrl!,
+          // icon: file[0]
+          icon: img[0].imgUrl
+        })
+        notification.show()
+        await GalleryDB.getInstance().insert(img[0])
+        trayWindow.webContents.send('clipboardFiles', [])
+        if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+          windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('updateGallery')
+        }
+      }
+      trayWindow.webContents.send('uploadFiles')
+    })
+
+    ipcMain.on('uploadClipboardFilesFromUploadPage', () => {
+      uploadClipboardFiles()
+    })
+
+    ipcMain.on('uploadChoosedFiles', async (evt: IpcMainEvent, files: IFileWithPath[]) => {
+      return uploadChoosedFiles(evt.sender, files)
+    })
+
+    ipcMain.on('updateShortKey', (evt: IpcMainEvent, item: IShortKeyConfig, oldKey: string, from: string) => {
+      const result = shortKeyHandler.updateShortKey(item, oldKey, from)
+      evt.sender.send('updateShortKeyResponse', result)
+      if (result) {
+        const notification = new Notification({
+          title: T('OPERATION_SUCCEED'),
+          body: T('TIPS_SHORTCUT_MODIFIED_SUCCEED')
+        })
+        notification.show()
+      } else {
+        const notification = new Notification({
+          title: T('OPERATION_FAILED'),
+          body: T('TIPS_SHORTCUT_MODIFIED_CONFLICT')
+        })
+        notification.show()
+      }
+    })
+
+    ipcMain.on('bindOrUnbindShortKey', (evt: IpcMainEvent, item: IShortKeyConfig, from: string) => {
+      const result = shortKeyHandler.bindOrUnbindShortKey(item, from)
+      if (result) {
+        const notification = new Notification({
+          title: T('OPERATION_SUCCEED'),
+          body: T('TIPS_SHORTCUT_MODIFIED_SUCCEED')
+        })
+        notification.show()
+      } else {
+        const notification = new Notification({
+          title: T('OPERATION_FAILED'),
+          body: T('TIPS_SHORTCUT_MODIFIED_CONFLICT')
+        })
+        notification.show()
+      }
+    })
+
+    ipcMain.on('updateCustomLink', () => {
+      const notification = new Notification({
+        title: T('OPERATION_SUCCEED'),
+        body: T('TIPS_CUSTOM_LINK_STYLE_MODIFIED_SUCCEED')
+      })
+      notification.show()
+    })
+
+    ipcMain.on('autoStart', (evt: IpcMainEvent, val: boolean) => {
+      app.setLoginItemSettings({
+        openAtLogin: val
+      })
+    })
+
+    ipcMain.on('openSettingWindow', () => {
+      windowManager.get(IWindowList.SETTING_WINDOW)!.show()
+      if (windowManager.has(IWindowList.MINI_WINDOW)) {
+        windowManager.get(IWindowList.MINI_WINDOW)!.hide()
+      }
+    })
+
+    ipcMain.on('openMiniWindow', () => {
+      const miniWindow = windowManager.get(IWindowList.MINI_WINDOW)!
+      const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)!
+
+      if (db.get('settings.miniWindowOntop')) {
+        miniWindow.setAlwaysOnTop(true)
+      }
+
+      miniWindow.show()
+      miniWindow.focus()
+      settingWindow.hide()
+    })
+
+    //  from mini window
+    ipcMain.on('syncPicBed', () => {
+      if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+        windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
+      }
+    })
+
+    ipcMain.on('getPicBeds', (evt: IpcMainEvent) => {
+      const picBeds = getPicBeds()
+      evt.sender.send('getPicBeds', picBeds)
+      evt.returnValue = picBeds
+    })
+
+    ipcMain.on(TOGGLE_SHORTKEY_MODIFIED_MODE, (evt: IpcMainEvent, val: boolean) => {
+      bus.emit(TOGGLE_SHORTKEY_MODIFIED_MODE, val)
+    })
+
+    ipcMain.on('updateServer', () => {
+      server.restart()
+    })
+    ipcMain.on(OPEN_DEVTOOLS, (event: IpcMainEvent) => {
+      event.sender.openDevTools()
+    })
+    // menu & window methods
+    ipcMain.on(SHOW_MINI_PAGE_MENU, () => {
+      const window = windowManager.get(IWindowList.MINI_WINDOW)!
+      const menu = buildMiniPageMenu()
+      menu.popup({
+        window
+      })
+    })
+    ipcMain.on(SHOW_MAIN_PAGE_MENU, () => {
+      const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+      const menu = buildMainPageMenu(window)
+      menu.popup({
+        window
+      })
+    })
+    ipcMain.on(SHOW_UPLOAD_PAGE_MENU, () => {
+      const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+      const menu = buildUploadPageMenu()
+      menu.popup({
+        window
+      })
+    })
+    ipcMain.on(SHOW_PLUGIN_PAGE_MENU, (evt: IpcMainEvent, plugin: IPicGoPlugin) => {
+      const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+      const menu = buildPluginPageMenu(plugin)
+      menu.popup({
+        window
+      })
+    })
+    ipcMain.on(MINIMIZE_WINDOW, () => {
+      const window = BrowserWindow.getFocusedWindow()
+      window?.minimize()
+    })
+    ipcMain.on(CLOSE_WINDOW, () => {
+      const window = BrowserWindow.getFocusedWindow()
+      if (process.platform === 'linux') {
+        window?.hide()
+      } else {
+        window?.close()
+      }
+    })
+    ipcMain.on(OPEN_USER_STORE_FILE, (evt: IpcMainEvent, filePath: string) => {
+      const abFilePath = path.join(STORE_PATH, filePath)
+      shell.openPath(abFilePath)
+    })
+    ipcMain.on(OPEN_URL, (evt: IpcMainEvent, url: string) => {
+      shell.openExternal(url)
+    })
+    ipcMain.on(RELOAD_APP, () => {
+      app.relaunch()
+      app.exit(0)
+    })
+    ipcMain.on(SET_MINI_WINDOW_POS, (evt: IpcMainEvent, pos: IMiniWindowPos) => {
+      const window = BrowserWindow.getFocusedWindow()
+      window?.setBounds(pos)
+    })
+    ipcMain.on(CHANGE_LANGUAGE, (evt: IpcMainEvent, lang: string) => {
+      lang = lang || 'zh-CN'
+      i18n.setLanguage(lang)
+    })
+  },
+  dispose () {}
+}

src/main/events/picgoCoreIPC.ts

@@ -0,0 +1,375 @@
+import path from 'path'
+import GuiApi from 'apis/gui'
+import {
+  dialog,
+  shell,
+  IpcMainEvent,
+  ipcMain,
+  clipboard
+} from 'electron'
+import { IPasteStyle, IPicGoHelperType, IWindowList } from '#/types/enum'
+import shortKeyHandler from 'apis/app/shortKey/shortKeyHandler'
+import picgo from '@core/picgo'
+import { handleStreamlinePluginName, simpleClone } from '~/universal/utils/common'
+import { IGuiMenuItem, PicGo as PicGoCore } from 'picgo'
+import windowManager from 'apis/app/window/windowManager'
+import { showNotification } from '~/main/utils/common'
+import { dbPathChecker } from 'apis/core/datastore/dbChecker'
+import {
+  PICGO_SAVE_CONFIG,
+  PICGO_GET_CONFIG,
+  PICGO_GET_DB,
+  PICGO_INSERT_DB,
+  PICGO_INSERT_MANY_DB,
+  PICGO_UPDATE_BY_ID_DB,
+  PICGO_GET_BY_ID_DB,
+  PICGO_REMOVE_BY_ID_DB,
+  PICGO_OPEN_FILE,
+  PASTE_TEXT
+} from '#/events/constants'
+
+import { GalleryDB } from 'apis/core/datastore'
+import { IObject, IFilter } from '@picgo/store/dist/types'
+import pasteTemplate from '../utils/pasteTemplate'
+import { T } from '~/universal/i18n'
+
+// eslint-disable-next-line
+const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
+// const PluginHandler = requireFunc('picgo/lib/PluginHandler').default
+const STORE_PATH = path.dirname(dbPathChecker())
+// const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
+
+interface GuiMenuItem {
+  label: string
+  handle: (arg0: PicGoCore, arg1: GuiApi) => Promise<void>
+}
+
+// get uploader or transformer config
+const getConfig = (name: string, type: IPicGoHelperType, ctx: PicGoCore) => {
+  let config: any[] = []
+  if (name === '') {
+    return config
+  } else {
+    const handler = ctx.helper[type].get(name)
+    if (handler) {
+      if (handler.config) {
+        config = handler.config(ctx)
+      }
+    }
+    return config
+  }
+}
+
+const handleConfigWithFunction = (config: any[]) => {
+  for (const i in config) {
+    if (typeof config[i].default === 'function') {
+      config[i].default = config[i].default()
+    }
+    if (typeof config[i].choices === 'function') {
+      config[i].choices = config[i].choices()
+    }
+  }
+  return config
+}
+
+const getPluginList = (): IPicGoPlugin[] => {
+  const pluginList = picgo.pluginLoader.getFullList()
+  const list = []
+  for (const i in pluginList) {
+    const plugin = picgo.pluginLoader.getPlugin(pluginList[i])!
+    const pluginPath = path.join(STORE_PATH, `/node_modules/${pluginList[i]}`)
+    const pluginPKG = requireFunc(path.join(pluginPath, 'package.json'))
+    const uploaderName = plugin.uploader || ''
+    const transformerName = plugin.transformer || ''
+    let menu: Omit<IGuiMenuItem, 'handle'>[] = []
+    if (plugin.guiMenu) {
+      menu = plugin.guiMenu(picgo).map(item => ({
+        label: item.label
+      }))
+    }
+    let gui = false
+    if (pluginPKG.keywords && pluginPKG.keywords.length > 0) {
+      if (pluginPKG.keywords.includes('picgo-gui-plugin')) {
+        gui = true
+      }
+    }
+    const obj: IPicGoPlugin = {
+      name: handleStreamlinePluginName(pluginList[i]),
+      fullName: pluginList[i],
+      author: pluginPKG.author.name || pluginPKG.author,
+      description: pluginPKG.description,
+      logo: 'file://' + path.join(pluginPath, 'logo.png').split(path.sep).join('/'),
+      version: pluginPKG.version,
+      gui,
+      config: {
+        plugin: {
+          fullName: pluginList[i],
+          name: handleStreamlinePluginName(pluginList[i]),
+          config: plugin.config ? handleConfigWithFunction(plugin.config(picgo)) : []
+        },
+        uploader: {
+          name: uploaderName,
+          config: handleConfigWithFunction(getConfig(uploaderName, IPicGoHelperType.uploader, picgo))
+        },
+        transformer: {
+          name: transformerName,
+          config: handleConfigWithFunction(getConfig(uploaderName, IPicGoHelperType.transformer, picgo))
+        }
+      },
+      enabled: picgo.getConfig(`picgoPlugins.${pluginList[i]}`),
+      homepage: pluginPKG.homepage ? pluginPKG.homepage : '',
+      guiMenu: menu,
+      ing: false
+    }
+    list.push(obj)
+  }
+  return list
+}
+
+const handleGetPluginList = () => {
+  ipcMain.on('getPluginList', (event: IpcMainEvent) => {
+    try {
+      const list = simpleClone(getPluginList())
+      // here can just send JS Object not function
+      // or will cause [Failed to serialize arguments] error
+      event.sender.send('pluginList', list)
+    } catch (e: any) {
+      event.sender.send('pluginList', [])
+      showNotification({
+        title: T('TIPS_GET_PLUGIN_LIST_FAILED'),
+        body: e.message
+      })
+      picgo.log.error(e)
+    }
+  })
+}
+
+const handlePluginInstall = () => {
+  ipcMain.on('installPlugin', async (event: IpcMainEvent, fullName: string) => {
+    const dispose = handleNPMError()
+    const res = await picgo.pluginHandler.install([fullName])
+    event.sender.send('installPlugin', {
+      success: res.success,
+      body: fullName,
+      errMsg: res.success ? '' : res.body
+    })
+    if (res.success) {
+      shortKeyHandler.registerPluginShortKey(res.body[0])
+    } else {
+      showNotification({
+        title: T('PLUGIN_INSTALL_FAILED'),
+        body: res.body as string
+      })
+    }
+    event.sender.send('hideLoading')
+    dispose()
+  })
+}
+
+const handlePluginUninstall = async (fullName: string) => {
+  const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+  const dispose = handleNPMError()
+  const res = await picgo.pluginHandler.uninstall([fullName])
+  if (res.success) {
+    window.webContents.send('uninstallSuccess', res.body[0])
+    shortKeyHandler.unregisterPluginShortKey(res.body[0])
+  } else {
+    showNotification({
+      title: T('PLUGIN_UNINSTALL_FAILED'),
+      body: res.body as string
+    })
+  }
+  window.webContents.send('hideLoading')
+  dispose()
+}
+
+const handlePluginUpdate = async (fullName: string) => {
+  const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+  const dispose = handleNPMError()
+  const res = await picgo.pluginHandler.update([fullName])
+  if (res.success) {
+    window.webContents.send('updateSuccess', res.body[0])
+  } else {
+    showNotification({
+      title: T('PLUGIN_UPDATE_FAILED'),
+      body: res.body as string
+    })
+  }
+  window.webContents.send('hideLoading')
+  dispose()
+}
+
+const handleNPMError = (): IDispose => {
+  const handler = (msg: string) => {
+    if (msg === 'NPM is not installed') {
+      dialog.showMessageBox({
+        title: T('TIPS_ERROR'),
+        message: T('TIPS_INSTALL_NODE_AND_RELOAD_PICGO'),
+        buttons: ['Yes']
+      }).then((res) => {
+        if (res.response === 0) {
+          shell.openExternal('https://nodejs.org/')
+        }
+      })
+    }
+  }
+  picgo.once('failed', handler)
+  return () => picgo.off('failed', handler)
+}
+
+const handleGetPicBedConfig = () => {
+  ipcMain.on('getPicBedConfig', (event: IpcMainEvent, type: string) => {
+    const name = picgo.helper.uploader.get(type)?.name || type
+    if (picgo.helper.uploader.get(type)?.config) {
+      const _config = picgo.helper.uploader.get(type)!.config!(picgo)
+      const config = handleConfigWithFunction(_config)
+      event.sender.send('getPicBedConfig', config, name)
+    } else {
+      event.sender.send('getPicBedConfig', [], name)
+    }
+  })
+}
+
+// TODO: remove it
+const handlePluginActions = () => {
+  ipcMain.on('pluginActions', (event: IpcMainEvent, name: string, label: string) => {
+    const plugin = picgo.pluginLoader.getPlugin(name)
+    if (plugin?.guiMenu?.(picgo)?.length) {
+      const menu: GuiMenuItem[] = plugin.guiMenu(picgo)
+      menu.forEach(item => {
+        if (item.label === label) {
+          item.handle(picgo, GuiApi.getInstance())
+        }
+      })
+    }
+  })
+}
+
+const handleRemoveFiles = () => {
+  ipcMain.on('removeFiles', (event: IpcMainEvent, files: ImgInfo[]) => {
+    setTimeout(() => {
+      picgo.emit('remove', files, GuiApi.getInstance())
+    }, 500)
+  })
+}
+
+const handlePicGoSaveConfig = () => {
+  ipcMain.on(PICGO_SAVE_CONFIG, (event: IpcMainEvent, data: IObj) => {
+    picgo.saveConfig(data)
+  })
+}
+
+const handlePicGoGetConfig = () => {
+  ipcMain.on(PICGO_GET_CONFIG, (event: IpcMainEvent, key: string | undefined, callbackId: string) => {
+    const result = picgo.getConfig(key)
+    event.sender.send(PICGO_GET_CONFIG, result, callbackId)
+  })
+}
+
+const handleImportLocalPlugin = () => {
+  ipcMain.on('importLocalPlugin', async (event: IpcMainEvent) => {
+    const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)!
+    const res = await dialog.showOpenDialog(settingWindow, {
+      properties: ['openDirectory']
+    })
+    const filePaths = res.filePaths
+    if (filePaths.length > 0) {
+      const res = await picgo.pluginHandler.install(filePaths)
+      if (res.success) {
+        try {
+          const list = simpleClone(getPluginList())
+          event.sender.send('pluginList', list)
+        } catch (e: any) {
+          event.sender.send('pluginList', [])
+          showNotification({
+            title: T('TIPS_GET_PLUGIN_LIST_FAILED'),
+            body: e.message
+          })
+        }
+        showNotification({
+          title: T('PLUGIN_IMPORT_SUCCEED'),
+          body: ''
+        })
+      } else {
+        showNotification({
+          title: T('PLUGIN_IMPORT_FAILED'),
+          body: res.body as string
+        })
+      }
+    }
+    event.sender.send('hideLoading')
+  })
+}
+
+const handlePicGoGalleryDB = () => {
+  ipcMain.on(PICGO_GET_DB, async (event: IpcMainEvent, filter: IFilter, callbackId: string) => {
+    const dbStore = GalleryDB.getInstance()
+    const res = await dbStore.get(filter)
+    event.sender.send(PICGO_GET_DB, res, callbackId)
+  })
+
+  ipcMain.on(PICGO_INSERT_DB, async (event: IpcMainEvent, value: IObject, callbackId: string) => {
+    const dbStore = GalleryDB.getInstance()
+    const res = await dbStore.insert(value)
+    event.sender.send(PICGO_INSERT_DB, res, callbackId)
+  })
+
+  ipcMain.on(PICGO_INSERT_MANY_DB, async (event: IpcMainEvent, value: IObject[], callbackId: string) => {
+    const dbStore = GalleryDB.getInstance()
+    const res = await dbStore.insertMany(value)
+    event.sender.send(PICGO_INSERT_MANY_DB, res, callbackId)
+  })
+
+  ipcMain.on(PICGO_UPDATE_BY_ID_DB, async (event: IpcMainEvent, id: string, value: IObject[], callbackId: string) => {
+    const dbStore = GalleryDB.getInstance()
+    const res = await dbStore.updateById(id, value)
+    event.sender.send(PICGO_UPDATE_BY_ID_DB, res, callbackId)
+  })
+
+  ipcMain.on(PICGO_GET_BY_ID_DB, async (event: IpcMainEvent, id: string, callbackId: string) => {
+    const dbStore = GalleryDB.getInstance()
+    const res = await dbStore.getById(id)
+    event.sender.send(PICGO_GET_BY_ID_DB, res, callbackId)
+  })
+
+  ipcMain.on(PICGO_REMOVE_BY_ID_DB, async (event: IpcMainEvent, id: string, callbackId: string) => {
+    const dbStore = GalleryDB.getInstance()
+    const res = await dbStore.removeById(id)
+    event.sender.send(PICGO_REMOVE_BY_ID_DB, res, callbackId)
+  })
+
+  ipcMain.handle(PASTE_TEXT, async (_, item: ImgInfo, copy = true) => {
+    const pasteStyle = picgo.getConfig<IPasteStyle>('settings.pasteStyle') || IPasteStyle.MARKDOWN
+    const customLink = picgo.getConfig<string>('settings.customLink')
+    const txt = pasteTemplate(pasteStyle, item, customLink)
+    if (copy) {
+      clipboard.writeText(txt)
+    }
+    return txt
+  })
+}
+
+const handleOpenFile = () => {
+  ipcMain.on(PICGO_OPEN_FILE, (event: IpcMainEvent, fileName: string) => {
+    const abFilePath = path.join(STORE_PATH, fileName)
+    shell.openPath(abFilePath)
+  })
+}
+
+export default {
+  listen () {
+    handleGetPluginList()
+    handlePluginInstall()
+    handleGetPicBedConfig()
+    handlePluginActions()
+    handleRemoveFiles()
+    handlePicGoSaveConfig()
+    handlePicGoGetConfig()
+    handlePicGoGalleryDB()
+    handleImportLocalPlugin()
+    handleOpenFile()
+  },
+  // TODO: separate to single file
+  handlePluginUninstall,
+  handlePluginUpdate
+}

src/main/events/remotes/menu.ts

@@ -0,0 +1,294 @@
+import windowManager from 'apis/app/window/windowManager'
+import { IWindowList } from '#/types/enum'
+import { Menu, BrowserWindow, app, dialog } from 'electron'
+import getPicBeds from '~/main/utils/getPicBeds'
+import picgo from '@core/picgo'
+import {
+  uploadClipboardFiles
+} from '~/main/apis/app/uploader/apis'
+import { privacyManager } from '~/main/utils/privacyManager'
+import pkg from 'root/package.json'
+import GuiApi from 'apis/gui'
+import { PICGO_CONFIG_PLUGIN, PICGO_HANDLE_PLUGIN_ING, PICGO_TOGGLE_PLUGIN, SHOW_MAIN_PAGE_DONATION, SHOW_MAIN_PAGE_QRCODE } from '~/universal/events/constants'
+import picgoCoreIPC from '~/main/events/picgoCoreIPC'
+import { PicGo as PicGoCore } from 'picgo'
+import { T } from '~/universal/i18n'
+
+interface GuiMenuItem {
+  label: string
+  handle: (arg0: PicGoCore, arg1: GuiApi) => Promise<void>
+}
+
+const buildMiniPageMenu = () => {
+  const picBeds = getPicBeds()
+  const current = picgo.getConfig('picBed.uploader')
+  const submenu = picBeds.filter(item => item.visible).map(item => {
+    return {
+      label: item.name,
+      type: 'radio',
+      checked: current === item.type,
+      click () {
+        picgo.saveConfig({
+          'picBed.current': item.type,
+          'picBed.uploader': item.type
+        })
+        if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+          windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
+        }
+      }
+    }
+  })
+  const template = [
+    {
+      label: T('OPEN_MAIN_WINDOW'),
+      click () {
+        windowManager.get(IWindowList.SETTING_WINDOW)!.show()
+        if (windowManager.has(IWindowList.MINI_WINDOW)) {
+          windowManager.get(IWindowList.MINI_WINDOW)!.hide()
+        }
+      }
+    },
+    {
+      label: T('CHOOSE_DEFAULT_PICBED'),
+      type: 'submenu',
+      submenu
+    },
+    {
+      label: T('UPLOAD_BY_CLIPBOARD'),
+      click () {
+        uploadClipboardFiles()
+      }
+    },
+    {
+      label: T('HIDE_WINDOW'),
+      click () {
+        BrowserWindow.getFocusedWindow()!.hide()
+      }
+    },
+    {
+      label: T('PRIVACY_AGREEMENT'),
+      click () {
+        privacyManager.show(false)
+      }
+    },
+    {
+      label: T('RELOAD_APP'),
+      click () {
+        app.relaunch()
+        app.exit(0)
+      }
+    },
+    {
+      role: 'quit',
+      label: T('QUIT')
+    }
+  ]
+  // @ts-ignore
+  return Menu.buildFromTemplate(template)
+}
+
+const buildMainPageMenu = (win: BrowserWindow) => {
+  const template = [
+    {
+      label: T('ABOUT'),
+      click () {
+        dialog.showMessageBox({
+          title: 'PicGo',
+          message: 'PicGo',
+          detail: `Version: ${pkg.version}\nAuthor: Molunerfinn\nGithub: https://github.com/Molunerfinn/PicGo`
+        })
+      }
+    },
+    {
+      label: T('SPONSOR_PICGO'),
+      click () {
+        win?.webContents?.send(SHOW_MAIN_PAGE_DONATION)
+      }
+    },
+    {
+      label: T('SHOW_PICBED_QRCODE'),
+      click () {
+        win?.webContents?.send(SHOW_MAIN_PAGE_QRCODE)
+      }
+    },
+    {
+      label: T('SHOW_DEVTOOLS'),
+      click () {
+        win?.webContents?.openDevTools()
+      }
+    },
+    {
+      label: T('PRIVACY_AGREEMENT'),
+      click () {
+        privacyManager.show(false)
+      }
+    }
+  ]
+  // @ts-ignore
+  return Menu.buildFromTemplate(template)
+}
+
+const buildUploadPageMenu = () => {
+  const picBeds = getPicBeds()
+  const currentPicBed = picgo.getConfig('picBed.uploader')
+  const submenu = picBeds.filter(item => item.visible).map(item => {
+    return {
+      label: item.name,
+      type: 'radio',
+      checked: currentPicBed === item.type,
+      click () {
+        picgo.saveConfig({
+          'picBed.current': item.type,
+          'picBed.uploader': item.type
+        })
+        if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+          windowManager.get(IWindowList.SETTING_WINDOW)!.webContents.send('syncPicBed')
+        }
+      }
+    }
+  })
+  // @ts-ignore
+  return Menu.buildFromTemplate(submenu)
+}
+
+// TODO: separate to single file
+
+const handleRestoreState = (item: string, name: string): void => {
+  if (item === 'uploader') {
+    const current = picgo.getConfig('picBed.current')
+    if (current === name) {
+      picgo.saveConfig({
+        'picBed.current': 'smms',
+        'picBed.uploader': 'smms'
+      })
+    }
+  }
+  if (item === 'transformer') {
+    const current = picgo.getConfig('picBed.transformer')
+    if (current === name) {
+      picgo.saveConfig({
+        'picBed.transformer': 'path'
+      })
+    }
+  }
+}
+
+const buildPluginPageMenu = (plugin: IPicGoPlugin) => {
+  const menu = [{
+    label: T('ENABLE_PLUGIN'),
+    enabled: !plugin.enabled,
+    click () {
+      picgo.saveConfig({
+        [`picgoPlugins.${plugin.fullName}`]: true
+      })
+      const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+      window.webContents.send(PICGO_TOGGLE_PLUGIN, plugin.fullName, true)
+    }
+  }, {
+    label: T('DISABLE_PLUGIN'),
+    enabled: plugin.enabled,
+    click () {
+      picgo.saveConfig({
+        [`picgoPlugins.${plugin.fullName}`]: false
+      })
+      const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+      window.webContents.send(PICGO_HANDLE_PLUGIN_ING, plugin.fullName)
+      window.webContents.send(PICGO_TOGGLE_PLUGIN, plugin.fullName, false)
+      if (plugin.config.transformer.name) {
+        handleRestoreState('transformer', plugin.config.transformer.name)
+      }
+      if (plugin.config.uploader.name) {
+        handleRestoreState('uploader', plugin.config.uploader.name)
+      }
+    }
+  }, {
+    label: T('UNINSTALL_PLUGIN'),
+    click () {
+      const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+      window.webContents.send(PICGO_HANDLE_PLUGIN_ING, plugin.fullName)
+      picgoCoreIPC.handlePluginUninstall(plugin.fullName)
+    }
+  }, {
+    label: T('UPDATE_PLUGIN'),
+    click () {
+      const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+      window.webContents.send(PICGO_HANDLE_PLUGIN_ING, plugin.fullName)
+      picgoCoreIPC.handlePluginUpdate(plugin.fullName)
+    }
+  }]
+  for (const i in plugin.config) {
+    if (plugin.config[i].config.length > 0) {
+      const obj = {
+        label: T('CONFIG_THING', {
+          c: `${i} - ${plugin.config[i].fullName || plugin.config[i].name}`
+        }),
+        click () {
+          const window = windowManager.get(IWindowList.SETTING_WINDOW)!
+          const currentType = i
+          const configName = plugin.config[i].fullName || plugin.config[i].name
+          const config = plugin.config[i].config
+          window.webContents.send(PICGO_CONFIG_PLUGIN, currentType, configName, config)
+        }
+      }
+      menu.push(obj)
+    }
+  }
+
+  // handle transformer
+  if (plugin.config.transformer.name) {
+    const currentTransformer = picgo.getConfig<string>('picBed.transformer') || 'path'
+    const pluginTransformer = plugin.config.transformer.name
+    const obj = {
+      label: `${currentTransformer === pluginTransformer ? T('DISABLE') : T('ENABLE')}transformer - ${plugin.config.transformer.name}`,
+      click () {
+        const transformer = plugin.config.transformer.name
+        const currentTransformer = picgo.getConfig<string>('picBed.transformer') || 'path'
+        if (currentTransformer === transformer) {
+          picgo.saveConfig({
+            'picBed.transformer': 'path'
+          })
+        } else {
+          picgo.saveConfig({
+            'picBed.transformer': transformer
+          })
+        }
+      }
+    }
+    menu.push(obj)
+  }
+
+  // plugin custom menus
+  if (plugin.guiMenu) {
+    menu.push({
+      // @ts-ignore
+      type: 'separator'
+    })
+    for (const i of plugin.guiMenu) {
+      menu.push({
+        label: i.label,
+        click () {
+          // ipcRenderer.send('pluginActions', plugin.fullName, i.label)
+          const picgPlugin = picgo.pluginLoader.getPlugin(plugin.fullName)
+          if (picgPlugin?.guiMenu?.(picgo)?.length) {
+            const menu: GuiMenuItem[] = picgPlugin.guiMenu(picgo)
+            menu.forEach(item => {
+              if (item.label === i.label) {
+                item.handle(picgo, GuiApi.getInstance())
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+
+  // @ts-ignore
+  return Menu.buildFromTemplate(menu)
+}
+
+export {
+  buildMiniPageMenu,
+  buildMainPageMenu,
+  buildUploadPageMenu,
+  buildPluginPageMenu
+}

src/main/lifeCycle/errorHandler.ts

@@ -0,0 +1,42 @@
+import fse from 'fs-extra'
+import path from 'path'
+import dayjs from 'dayjs'
+import util from 'util'
+import { dbPathDir } from 'apis/core/datastore/dbChecker'
+const STORE_PATH = dbPathDir()
+const LOG_PATH = path.join(STORE_PATH, '/picgo.log')
+
+// since the error may occur in picgo-core
+// so we can't use the log from picgo
+export const loggerWriter = (error: Error) => {
+  try {
+    const time = dayjs().format('YYYY-MM-DD HH:mm:ss')
+    let log = `${time} [PicGo ERROR] process error begin`
+    if (error?.stack) {
+      log += `\n------Error Stack Begin------\n${util.format(error.stack)}\n-------Error Stack End-------\n`
+    } else {
+      const msg = JSON.stringify(error)
+      log += `${msg}\n`
+    }
+    log += `${time} [PicGo ERROR] process error end`
+    if (!fse.existsSync(LOG_PATH)) {
+      fse.ensureFileSync(LOG_PATH)
+    }
+    fse.appendFileSync(LOG_PATH, log)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+const handleProcessError = (error: Error) => {
+  console.error(error)
+  loggerWriter(error)
+}
+
+process.on('uncaughtException', error => {
+  handleProcessError(error)
+})
+
+process.on('unhandledRejection', (error: any) => {
+  handleProcessError(error)
+})

src/main/lifeCycle/fixPath.ts

@@ -0,0 +1,18 @@
+// TODO: so how to import pure esm module in electron main process????? help wanted
+
+// just copy the fix-path because I can't import pure ESM module in electron main process
+
+const shellPath = require('shell-path')
+
+export default function fixPath () {
+  if (process.platform === 'win32') {
+    return
+  }
+
+  process.env.PATH = shellPath.sync() || [
+    './node_modules/.bin',
+    '/.nodebrew/current/bin',
+    '/usr/local/bin',
+    process.env.PATH
+  ].join(':')
+}

src/main/lifeCycle/index.ts

@@ -0,0 +1,192 @@
+import './errorHandler'
+import {
+  app,
+  globalShortcut,
+  protocol,
+  Notification
+} from 'electron'
+import {
+  createProtocol
+} from 'vue-cli-plugin-electron-builder/lib'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+import beforeOpen from '~/main/utils/beforeOpen'
+import ipcList from '~/main/events/ipcList'
+import busEventList from '~/main/events/busEventList'
+import { IWindowList } from '#/types/enum'
+import windowManager from 'apis/app/window/windowManager'
+import {
+  updateShortKeyFromVersion212,
+  migrateGalleryFromVersion230
+} from '~/main/migrate'
+import {
+  uploadChoosedFiles,
+  uploadClipboardFiles
+} from 'apis/app/uploader/apis'
+import {
+  createTray
+} from 'apis/app/system'
+import server from '~/main/server/index'
+import updateChecker from '~/main/utils/updateChecker'
+import shortKeyHandler from 'apis/app/shortKey/shortKeyHandler'
+import { getUploadFiles } from '~/main/utils/handleArgv'
+import db, { GalleryDB } from '~/main/apis/core/datastore'
+import bus from '@core/bus'
+import logger from 'apis/core/picgo/logger'
+import picgo from 'apis/core/picgo'
+import fixPath from './fixPath'
+import { initI18n } from '~/main/utils/handleI18n'
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+const handleStartUpFiles = (argv: string[], cwd: string) => {
+  const files = getUploadFiles(argv, cwd, logger)
+  if (files === null || files.length > 0) { // 如果有文件列表作为参数，说明是命令行启动
+    if (files === null) {
+      logger.info('cli -> uploading file from clipboard')
+      uploadClipboardFiles()
+    } else {
+      logger.info('cli -> uploading files from cli', ...files.map(item => item.path))
+      const win = windowManager.getAvailableWindow()
+      uploadChoosedFiles(win.webContents, files)
+    }
+    return true
+  } else {
+    return false
+  }
+}
+
+class LifeCycle {
+  private async beforeReady () {
+    protocol.registerSchemesAsPrivileged([{ scheme: 'picgo', privileges: { secure: true, standard: true } }])
+    // fix the $PATH in macOS & linux
+    fixPath()
+    beforeOpen()
+    initI18n()
+    ipcList.listen()
+    busEventList.listen()
+    updateShortKeyFromVersion212(db, db.get('settings.shortKey'))
+    await migrateGalleryFromVersion230(db, GalleryDB.getInstance(), picgo)
+  }
+
+  private onReady () {
+    const readyFunction = async () => {
+      console.log('on ready')
+      createProtocol('picgo')
+      if (isDevelopment && !process.env.IS_TEST) {
+        // Install Vue Devtools
+        try {
+          await installExtension(VUEJS_DEVTOOLS)
+        } catch (e: any) {
+          console.error('Vue Devtools failed to install:', e.toString())
+        }
+      }
+      windowManager.create(IWindowList.TRAY_WINDOW)
+      windowManager.create(IWindowList.SETTING_WINDOW)
+      createTray()
+      db.set('needReload', false)
+      updateChecker()
+      // 不需要阻塞
+      process.nextTick(() => {
+        shortKeyHandler.init()
+      })
+      server.startup()
+      if (process.env.NODE_ENV !== 'development') {
+        handleStartUpFiles(process.argv, process.cwd())
+      }
+
+      if (global.notificationList && global.notificationList?.length > 0) {
+        while (global.notificationList?.length) {
+          const option = global.notificationList.pop()
+          const notice = new Notification(option!)
+          notice.show()
+        }
+      }
+    }
+    if (!app.isReady()) {
+      app.on('ready', readyFunction)
+    } else {
+      readyFunction()
+    }
+  }
+
+  private onRunning () {
+    app.on('second-instance', (event, commandLine, workingDirectory) => {
+      logger.info('detect second instance')
+      const result = handleStartUpFiles(commandLine, workingDirectory)
+      if (!result) {
+        if (windowManager.has(IWindowList.SETTING_WINDOW)) {
+          const settingWindow = windowManager.get(IWindowList.SETTING_WINDOW)!
+          if (settingWindow.isMinimized()) {
+            settingWindow.restore()
+          }
+          settingWindow.focus()
+        }
+      }
+    })
+    app.on('activate', () => {
+      createProtocol('picgo')
+      if (!windowManager.has(IWindowList.TRAY_WINDOW)) {
+        windowManager.create(IWindowList.TRAY_WINDOW)
+      }
+      if (!windowManager.has(IWindowList.SETTING_WINDOW)) {
+        windowManager.create(IWindowList.SETTING_WINDOW)
+      }
+    })
+    app.setLoginItemSettings({
+      openAtLogin: db.get('settings.autoStart') || false
+    })
+    if (process.platform === 'win32') {
+      app.setAppUserModelId('com.molunerfinn.picgo')
+    }
+
+    if (process.env.XDG_CURRENT_DESKTOP && process.env.XDG_CURRENT_DESKTOP.includes('Unity')) {
+      process.env.XDG_CURRENT_DESKTOP = 'Unity'
+    }
+  }
+
+  private onQuit () {
+    app.on('window-all-closed', () => {
+      if (process.platform !== 'darwin') {
+        app.quit()
+      }
+    })
+
+    app.on('will-quit', () => {
+      globalShortcut.unregisterAll()
+      bus.removeAllListeners()
+      server.shutdown()
+    })
+    // Exit cleanly on request from parent process in development mode.
+    if (isDevelopment) {
+      if (process.platform === 'win32') {
+        process.on('message', data => {
+          if (data === 'graceful-exit') {
+            app.quit()
+          }
+        })
+      } else {
+        process.on('SIGTERM', () => {
+          app.quit()
+        })
+      }
+    }
+  }
+
+  async launchApp () {
+    const gotTheLock = app.requestSingleInstanceLock()
+    if (!gotTheLock) {
+      app.quit()
+    } else {
+      await this.beforeReady()
+      this.onReady()
+      this.onRunning()
+      this.onQuit()
+    }
+  }
+}
+
+const bootstrap = new LifeCycle()
+
+export {
+  bootstrap
+}

src/main/migrate/index.ts

@@ -1,26 +1,61 @@
-import DB from '#/datastore'
+import { DBStore } from '@picgo/store'
+import ConfigStore from '~/main/apis/core/datastore'
+import path from 'path'
+import fse from 'fs-extra'
+import { PicGo as PicGoCore } from 'picgo'
+import { T } from '~/universal/i18n'
 // from v2.1.2
-const updateShortKeyFromVersion212 = (db: typeof DB, shortKeyConfig: IShortKeyConfigs | IOldShortKeyConfigs) => {
-  let needUpgrade = false
+const updateShortKeyFromVersion212 = (db: typeof ConfigStore, shortKeyConfig: IShortKeyConfigs | IOldShortKeyConfigs) => {
+  // #557 极端情况可能会出现配置不存在，需要重新写入
+  if (shortKeyConfig === undefined) {
+    const defaultShortKeyConfig = {
+      enable: true,
+      key: 'CommandOrControl+Shift+P',
+      name: 'upload',
+      label: T('QUICK_UPLOAD')
+    }
+    db.set('settings.shortKey[picgo:upload]', defaultShortKeyConfig)
+    return true
+  }
   if (shortKeyConfig.upload) {
-    needUpgrade = true
     // @ts-ignore
     shortKeyConfig['picgo:upload'] = {
       enable: true,
       key: shortKeyConfig.upload,
       name: 'upload',
-      label: '快捷上传'
+      label: T('QUICK_UPLOAD')
     }
+    // @ts-ignore
     delete shortKeyConfig.upload
-  }
-  if (needUpgrade) {
     db.set('settings.shortKey', shortKeyConfig)
-    return shortKeyConfig
-  } else {
-    return false
+    return true
+  }
+  return false
+}
+
+const migrateGalleryFromVersion230 = async (configDB: typeof ConfigStore, galleryDB: DBStore, picgo: PicGoCore) => {
+  const originGallery: ImgInfo[] = picgo.getConfig('uploaded')
+  // if hasMigrate, we don't need to migrate
+  const hasMigrate: boolean = configDB.get('__migrateUploaded')
+  if (hasMigrate) {
+    return
+  }
+  const configPath = configDB.getConfigPath()
+  const configBakPath = path.join(path.dirname(configPath), 'config.bak.json')
+  // migrate gallery from config to gallery db
+  if (originGallery && Array.isArray(originGallery) && originGallery?.length > 0) {
+    if (fse.existsSync(configBakPath)) {
+      fse.copyFileSync(configPath, configBakPath)
+    }
+    await galleryDB.insertMany(originGallery)
+    picgo.saveConfig({
+      uploaded: [],
+      __migrateUploaded: true
+    })
   }
 }
 
 export {
-  updateShortKeyFromVersion212
+  updateShortKeyFromVersion212,
+  migrateGalleryFromVersion230
 }

src/main/server/index.ts

@@ -1,16 +1,18 @@
 import http from 'http'
 import routers from './routerManager'
 import {
-  handleResponse
+  handleResponse,
+  ensureHTTPLink
 } from './utils'
-import picgo from '~/main/apis/picgo'
-import logger from '~/main/utils/logger'
+import picgo from '@core/picgo'
+import logger from '@core/picgo/logger'
+import axios from 'axios'
 
 class Server {
   private httpServer: http.Server
   private config: IServerConfig
   constructor () {
-    let config = picgo.getConfig('settings.server')
+    let config = picgo.getConfig<IServerConfig>('settings.server')
     const result = this.checkIfConfigIsValid(config)
     if (result) {
       this.config = config
@@ -27,6 +29,7 @@ class Server {
     }
     this.httpServer = http.createServer(this.handleRequest)
   }
+
   private checkIfConfigIsValid (config: IObj | undefined) {
     if (config && config.port && config.host && (config.enable !== undefined)) {
       return true
@@ -34,9 +37,11 @@ class Server {
       return false
     }
   }
+
   private handleRequest = (request: http.IncomingMessage, response: http.ServerResponse) => {
     if (request.method === 'POST') {
       if (!routers.getHandler(request.url!)) {
+        logger.warn(`[PicGo Server] don't support [${request.url}] url`)
         handleResponse({
           response,
           statusCode: 404,
@@ -54,7 +59,8 @@ class Server {
         request.on('end', () => {
           try {
             postObj = (body === '') ? {} : JSON.parse(body)
-          } catch (err) {
+          } catch (err: any) {
+            logger.error('[PicGo Server]', err)
             return handleResponse({
               response,
               body: {
@@ -63,6 +69,7 @@ class Server {
               }
             })
           }
+          logger.info('[PicGo Server] get the request', body)
           const handler = routers.getHandler(request.url!)
           handler!({
             ...postObj,
@@ -71,32 +78,48 @@ class Server {
         })
       }
     } else {
+      logger.warn(`[PicGo Server] don't support [${request.method}] method`)
       response.statusCode = 404
       response.end()
     }
   }
-  private listen = (port: number) => {
+
+  // port as string is a bug
+  private listen = (port: number | string) => {
     logger.info(`[PicGo Server] is listening at ${port}`)
-    this.httpServer.listen(port, this.config.host).on('error', (err: ErrnoException) => {
+    if (typeof port === 'string') {
+      port = parseInt(port, 10)
+    }
+    this.httpServer.listen(port, this.config.host).on('error', async (err: ErrnoException) => {
       if (err.errno === 'EADDRINUSE') {
-        logger.warn(`[PicGo Server] ${port} is busy, trying with port ${port + 1}`)
-        this.config.port += 1
-        picgo.saveConfig({
-          'settings.server': this.config
-        })
-        this.listen(this.config.port)
+        try {
+          // make sure the system has a PicGo Server instance
+          await axios.post(ensureHTTPLink(`${this.config.host}:${port}/heartbeat`))
+          this.shutdown(true)
+        } catch (e) {
+          logger.warn(`[PicGo Server] ${port} is busy, trying with port ${(port as number) + 1}`)
+          // fix a bug: not write an increase number to config file
+          // to solve the auto number problem
+          this.listen((port as number) + 1)
+        }
       }
     })
   }
+
   startup () {
+    console.log('startup', this.config.enable)
     if (this.config.enable) {
       this.listen(this.config.port)
     }
   }
-  shutdown () {
+
+  shutdown (hasStarted?: boolean) {
     this.httpServer.close()
-    logger.info('[PicGo Server] shutdown')
+    if (!hasStarted) {
+      logger.info('[PicGo Server] shutdown')
+    }
   }
+
   restart () {
     this.config = picgo.getConfig('settings.server')
     this.shutdown()

src/main/server/router.ts

@@ -4,6 +4,7 @@ class Router {
   get (url: string, callback: routeHandler): void {
     this.router.set(url, callback)
   }
+
   post (url: string, callback: routeHandler): void {
     this.router.set(url, callback)
   }

src/main/server/routerManager.ts

@@ -1,14 +1,18 @@
 import router from './router'
-import {
-  uploadWithClipboardFiles,
-  uploadWithFiles
-} from '~/main/apis/bus/index'
 import {
   handleResponse
 } from './utils'
-import logger from '../utils/logger'
+import logger from '@core/picgo/logger'
+import windowManager from 'apis/app/window/windowManager'
+import { uploadChoosedFiles, uploadClipboardFiles } from 'apis/app/uploader/apis'
+import path from 'path'
+import { dbPathDir } from 'apis/core/datastore/dbChecker'
+const STORE_PATH = dbPathDir()
+const LOG_PATH = path.join(STORE_PATH, 'picgo.log')
 
-router.get('/upload', async ({
+const errorMessage = `upload error. see ${LOG_PATH} for more detail.`
+
+router.post('/upload', async ({
   response,
   list = []
 } : {
@@ -18,52 +22,79 @@ router.get('/upload', async ({
   try {
     if (list.length === 0) {
       // upload with clipboard
-      const res = await uploadWithClipboardFiles()
-      if (res.success) {
+      logger.info('[PicGo Server] upload clipboard file')
+      const res = await uploadClipboardFiles()
+      logger.info('[PicGo Server] upload result:', res)
+      if (res) {
         handleResponse({
           response,
           body: {
             success: true,
-            result: res.result
+            result: [res]
           }
         })
       } else {
         handleResponse({
-          response
+          response,
+          body: {
+            success: false,
+            message: errorMessage
+          }
         })
       }
     } else {
+      logger.info('[PicGo Server] upload files in list')
       //  upload with files
       const pathList = list.map(item => {
         return {
           path: item
         }
       })
-      const res = await uploadWithFiles(pathList)
-      if (res.success) {
+      const win = windowManager.getAvailableWindow()
+      const res = await uploadChoosedFiles(win.webContents, pathList)
+      logger.info('[PicGo Server] upload result', res.join(' ; '))
+      if (res.length) {
         handleResponse({
           response,
           body: {
             success: true,
-            result: res.result
+            result: res
           }
         })
       } else {
         handleResponse({
-          response
+          response,
+          body: {
+            success: false,
+            message: errorMessage
+          }
         })
       }
     }
-  } catch (err) {
+  } catch (err: any) {
     logger.error(err)
     handleResponse({
       response,
       body: {
         success: false,
-        message: err
+        message: errorMessage
       }
     })
   }
 })
 
+router.post('/heartbeat', async ({
+  response
+} : {
+  response: IHttpResponse,
+}) => {
+  handleResponse({
+    response,
+    body: {
+      success: true,
+      result: 'alive'
+    }
+  })
+})
+
 export default router

src/main/server/utils.ts

@@ -1,3 +1,5 @@
+import logger from '@core/picgo/logger'
+
 export const handleResponse = ({
   response,
   statusCode = 200,
@@ -13,7 +15,16 @@ export const handleResponse = ({
   header?: IObj,
   body?: any
 }) => {
+  if (body?.success === false) {
+    logger.warn('[PicGo Server] upload failed, see picgo.log for more detail ↑')
+  }
   response.writeHead(statusCode, header)
   response.write(JSON.stringify(body))
   response.end()
 }
+
+export const ensureHTTPLink = (url: string): string => {
+  return url.startsWith('http')
+    ? url
+    : `http://${url}`
+}

src/main/utils/beforeOpen.ts

@@ -1,10 +1,10 @@
 import fs from 'fs-extra'
 import path from 'path'
 import os from 'os'
-import { remote, app } from 'electron'
+import { dbPathChecker } from 'apis/core/datastore/dbChecker'
 
-const APP = process.type === 'renderer' ? remote.app : app
-const STORE_PATH = APP.getPath('userData')
+const configPath = dbPathChecker()
+const CONFIG_DIR = path.dirname(configPath)
 
 function beforeOpen () {
   if (process.platform === 'darwin') {
@@ -33,8 +33,8 @@ function resolveMacWorkFlow () {
  * 初始化剪贴板生成图片的脚本
  */
 function resolveClipboardImageGenerator () {
-  let clipboardFiles = getClipboardFiles()
-  if (!fs.pathExistsSync(path.join(STORE_PATH, 'windows10.ps1'))) {
+  const clipboardFiles = getClipboardFiles()
+  if (!fs.pathExistsSync(path.join(CONFIG_DIR, 'windows10.ps1'))) {
     clipboardFiles.forEach(item => {
       fs.copyFileSync(item.origin, item.dest)
     })
@@ -45,26 +45,32 @@ function resolveClipboardImageGenerator () {
   }
 
   function diffFilesAndUpdate (filePath1: string, filePath2: string) {
-    let file1 = fs.readFileSync(filePath1)
-    let file2 = fs.readFileSync(filePath2)
+    try {
+      const file1 = fs.existsSync(filePath1) && fs.readFileSync(filePath1)
+      const file2 = fs.existsSync(filePath1) && fs.readFileSync(filePath2)
 
-    if (!file1.equals(file2)) {
+      if (!file1 || !file2 || !file1.equals(file2)) {
+        fs.copyFileSync(filePath1, filePath2)
+      }
+    } catch (e) {
+      console.error(e)
       fs.copyFileSync(filePath1, filePath2)
     }
   }
 
   function getClipboardFiles () {
-    let files = [
+    const files = [
       '/linux.sh',
       '/mac.applescript',
       '/windows.ps1',
-      '/windows10.ps1'
+      '/windows10.ps1',
+      '/wsl.sh'
     ]
 
     return files.map(item => {
       return {
         origin: path.join(__static, item),
-        dest: path.join(STORE_PATH, item)
+        dest: path.join(CONFIG_DIR, item)
       }
     })
   }

src/main/utils/common.ts

@@ -0,0 +1,71 @@
+import db from '~/main/apis/core/datastore'
+import { clipboard, Notification, dialog } from 'electron'
+
+export const handleCopyUrl = (str: string): void => {
+  if (db.get('settings.autoCopy') !== false) {
+    clipboard.writeText(str)
+  }
+}
+
+/**
+ * show notification
+ * @param options
+ */
+export const showNotification = (options: IPrivateShowNotificationOption = {
+  title: '',
+  body: '',
+  clickToCopy: false
+}) => {
+  const notification = new Notification({
+    title: options.title,
+    body: options.body,
+    icon: options.icon || undefined
+  })
+  const handleClick = () => {
+    if (options.clickToCopy) {
+      clipboard.writeText(options.body)
+    }
+  }
+  notification.once('click', handleClick)
+  notification.once('close', () => {
+    notification.removeListener('click', handleClick)
+  })
+  notification.show()
+}
+
+export const showMessageBox = (options: any) => {
+  return new Promise<IShowMessageBoxResult>(async (resolve) => {
+    dialog.showMessageBox(
+      options
+    ).then((res) => {
+      resolve({
+        result: res.response,
+        checkboxChecked: res.checkboxChecked
+      })
+    })
+  })
+}
+
+export const calcDurationRange = (duration: number) => {
+  if (duration < 1000) {
+    return 500
+  } else if (duration < 1500) {
+    return 1000
+  } else if (duration < 3000) {
+    return 2000
+  } else if (duration < 5000) {
+    return 3000
+  } else if (duration < 7000) {
+    return 5000
+  } else if (duration < 10000) {
+    return 8000
+  } else if (duration < 12000) {
+    return 10000
+  } else if (duration < 20000) {
+    return 15000
+  } else if (duration < 30000) {
+    return 20000
+  }
+  // max range
+  return 100000
+}

src/main/utils/getPicBeds.ts

@@ -1,15 +1,20 @@
-import picgo from '../apis/picgo'
+import picgo from '@core/picgo'
 
 const getPicBeds = () => {
   const picBedTypes = picgo.helper.uploader.getIdList()
-  const picBedFromDB = picgo.getConfig('picBed.list') || []
+  const picBedFromDB = picgo.getConfig<IPicBedType[]>('picBed.list') || []
   const picBeds = picBedTypes.map((item: string) => {
     const visible = picBedFromDB.find((i: IPicBedType) => i.type === item) // object or undefined
     return {
       type: item,
-      name: picgo.helper.uploader.get(item).name || item,
+      name: picgo.helper.uploader.get(item)!.name || item,
       visible: visible ? visible.visible : true
     }
+  }).sort((a) => {
+    if (a.type === 'tcyun') {
+      return -1
+    }
+    return 0
   }) as IPicBedType[]
   return picBeds
 }

src/main/utils/handleArgv.ts

@@ -1,35 +1,55 @@
 import path from 'path'
 import fs from 'fs-extra'
-type ClipboardFileObject = {
+import { Logger } from 'picgo'
+interface IResultFileObject {
   path: string
 }
-type Result = ClipboardFileObject[]
-const getUploadFiles = (argv = process.argv, cwd = process.cwd()) => {
-  let files = argv.slice(1)
-  if (files.length > 0 && files[0] === 'upload') {
-    if (files.length === 1) {
+type Result = IResultFileObject[]
+
+interface IHandleArgvResult {
+  success: boolean
+  fileList?: string[]
+}
+
+const handleArgv = (argv: string[]): IHandleArgvResult => {
+  const uploadIndex = argv.indexOf('upload')
+  if (uploadIndex !== -1) {
+    const fileList = argv.slice(1 + uploadIndex)
+    return {
+      success: true,
+      fileList
+    }
+  }
+  return {
+    success: false
+  }
+}
+
+const getUploadFiles = (argv = process.argv, cwd = process.cwd(), logger: Logger) => {
+  const { success, fileList } = handleArgv(argv)
+  if (!success) {
+    return []
+  } else {
+    if (fileList?.length === 0) {
       return null // for uploading images in clipboard
-    } else if (files.length > 1) {
-      files = argv.slice(1)
-      let result: Result = []
-      if (files.length > 0) {
-        result = files.map(item => {
-          if (path.isAbsolute(item)) {
+    } else if ((fileList?.length || 0) > 0) {
+      const result = fileList!.map(item => {
+        if (path.isAbsolute(item)) {
+          return {
+            path: item
+          }
+        } else {
+          const tempPath = path.join(cwd, item)
+          if (fs.existsSync(tempPath)) {
             return {
-              path: item
+              path: tempPath
             }
           } else {
-            let tempPath = path.join(cwd, item)
-            if (fs.existsSync(tempPath)) {
-              return {
-                path: tempPath
-              }
-            } else {
-              return null
-            }
+            logger.warn(`cli -> can't get file: ${tempPath}, invalid path`)
+            return null
           }
-        }).filter(item => item !== null) as Result
-      }
+        }
+      }).filter(item => item !== null) as Result
       return result
     }
   }

src/main/utils/handleI18n.ts

@@ -0,0 +1,6 @@
+import db from '~/main/apis/core/datastore'
+import { i18n } from '#/i18n'
+export const initI18n = () => {
+  const currentLanguage = db.get('settings.language') || 'zh-CN'
+  i18n.setLanguage(currentLanguage)
+}

src/main/utils/logger.ts

@@ -1,76 +0,0 @@
-import chalk from 'chalk'
-import dayjs from 'dayjs'
-import fs from 'fs-extra'
-import path from 'path'
-import util from 'util'
-import db from '#/datastore'
-import { app } from 'electron'
-import { IChalkType } from '#/types/enum'
-const baseDir = app.getPath('userData')
-
-class Logger {
-  private level = {
-    success: IChalkType.success,
-    info: IChalkType.info,
-    warn: IChalkType.warn,
-    error: IChalkType.error
-  }
-  protected handleLog (type: ILogType, msg: ILoggerType): ILoggerType {
-    // if configPath is invalid then this.ctx.config === undefined
-    // if not then check config.silent
-    const log = chalk[this.level[type]](`[PicGo ${type.toUpperCase()}]:`)
-    console.log(log, msg)
-    process.nextTick(() => {
-      this.handleWriteLog(type, msg)
-    })
-    return msg
-  }
-
-  protected handleWriteLog (type: string, msg: ILoggerType): void {
-    try {
-      const logLevel = db.get('settings.logLevel')
-      const logPath = db.get('settings.logPath') || path.join(baseDir, './picgo.log')
-      if (this.checkLogLevel(type, logLevel)) {
-        const picgoLog = fs.createWriteStream(logPath, { flags: 'a', encoding: 'utf8' })
-        let log = `${dayjs().format('YYYY-MM-DD HH:mm:ss')} [PicGo ${type.toUpperCase()}] ${msg}`
-        const logger = new console.Console(picgoLog)
-        if (typeof msg === 'object' && type === 'error') {
-          log += `\n------Error Stack Begin------\n${util.format(msg.stack)}\n-------Error Stack End-------`
-        }
-        logger.log(log)
-        picgoLog.destroy()
-      }
-    } catch (e) {
-      console.log(e)
-    }
-  }
-
-  protected checkLogLevel (type: string, level: undefined | string | string[]): boolean {
-    if (level === undefined || level === 'all') {
-      return true
-    }
-    if (Array.isArray(level)) {
-      return level.some((item: string) => (item === type || item === 'all'))
-    } else {
-      return type === level
-    }
-  }
-
-  success (msg: ILoggerType): ILoggerType {
-    return this.handleLog('success', msg)
-  }
-
-  info (msg: ILoggerType): ILoggerType {
-    return this.handleLog('info', msg)
-  }
-
-  error (msg: ILoggerType): ILoggerType {
-    return this.handleLog('error', msg)
-  }
-
-  warn (msg: ILoggerType): ILoggerType {
-    return this.handleLog('warn', msg)
-  }
-}
-
-export default new Logger()

src/main/utils/pasteTemplate.ts

@@ -0,0 +1,31 @@
+import { IPasteStyle } from '#/types/enum'
+
+const formatCustomLink = (customLink: string, item: ImgInfo) => {
+  const fileName = item.fileName!.replace(new RegExp(`\\${item.extname}$`), '')
+  const url = item.url || item.imgUrl
+  const formatObj = {
+    url,
+    fileName
+  }
+  const keys = Object.keys(formatObj) as ['url', 'fileName']
+  keys.forEach(item => {
+    if (customLink.indexOf(`$${item}`) !== -1) {
+      const reg = new RegExp(`\\$${item}`, 'g')
+      customLink = customLink.replace(reg, formatObj[item])
+    }
+  })
+  return customLink
+}
+
+export default (style: IPasteStyle, item: ImgInfo, customLink: string | undefined) => {
+  const url = item.url || item.imgUrl
+  const _customLink = customLink || '$url'
+  const tpl = {
+    markdown: `![](${url})`,
+    HTML: `<img src="${url}"/>`,
+    URL: url,
+    UBB: `[IMG]${url}[/IMG]`,
+    Custom: formatCustomLink(_customLink, item)
+  }
+  return tpl[style]
+}

src/main/utils/privacyManager.ts

@@ -0,0 +1,35 @@
+import db from '~/main/apis/core/datastore'
+import { showMessageBox } from '~/main/utils/common'
+import { T } from '~/universal/i18n'
+
+class PrivacyManager {
+  async check () {
+    if (db.get('settings.privacyEnsure') !== true) {
+      const res = await this.show(true)
+      // cancel
+      if (res.result === 1) {
+        return false
+      } else {
+        db.set('settings.privacyEnsure', true)
+        return true
+      }
+    }
+    return true
+  }
+
+  async show (showCancel = true) {
+    const res = await showMessageBox({
+      type: 'info',
+      buttons: showCancel ? ['Yes', 'No'] : ['Yes'],
+      title: T('PRIVACY_AGREEMENT'),
+      message: T('PRIVACY')
+    })
+    return res
+  }
+}
+
+const privacyManager = new PrivacyManager()
+
+export {
+  privacyManager
+}

src/main/utils/updateChecker.ts

@@ -1,7 +1,9 @@
 import { dialog, shell } from 'electron'
-import db from '#/datastore'
+import db from '~/main/apis/core/datastore'
 import axios from 'axios'
 import pkg from 'root/package.json'
+import { lt } from 'semver'
+import { T } from '~/universal/i18n'
 const version = pkg.version
 const releaseUrl = 'https://api.github.com/repos/Molunerfinn/PicGo/releases/latest'
 const releaseUrlBackup = 'https://cdn.jsdelivr.net/gh/Molunerfinn/PicGo@latest/package.json'
@@ -29,10 +31,12 @@ const checkVersion = async () => {
       if (result) {
         dialog.showMessageBox({
           type: 'info',
-          title: '发现新版本',
+          title: T('FIND_NEW_VERSION'),
           buttons: ['Yes', 'No'],
-          message: `发现新版本${latest}，更新了很多功能，是否去下载最新的版本？`,
-          checkboxLabel: '以后不再提醒',
+          message: T('TIPS_FIND_NEW_VERSION', {
+            v: latest
+          }),
+          checkboxLabel: T('NO_MORE_NOTICE'),
           checkboxChecked: false
         }).then(res => {
           if (res.response === 0) { // if selected yes
@@ -51,18 +55,17 @@ const checkVersion = async () => {
 
 // if true -> update else return false
 const compareVersion2Update = (current: string, latest: string) => {
-  const currentVersion = current.split('.').map(item => parseInt(item))
-  const latestVersion = latest.split('.').map(item => parseInt(item))
-
-  for (let i = 0; i < 3; i++) {
-    if (currentVersion[i] < latestVersion[i]) {
-      return true
-    }
-    if (currentVersion[i] > latestVersion[i]) {
-      return false
+  try {
+    if (latest.includes('beta')) {
+      const isCheckBetaUpdate = db.get('settings.checkBetaUpdate') !== false
+      if (!isCheckBetaUpdate) {
+        return false
+      }
     }
+    return lt(current, latest)
+  } catch (e) {
+    return false
   }
-  return false
 }
 
 export default checkVersion

src/renderer/components/ChoosePicBed.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="choose-pic-bed">
-    <span>选择 {{ label }} 作为你默认图床：</span>
+    <span>{{ $T('CHOOSE_YOUR_DEFAULT_PICBED', { d: label }) }}</span>
     <el-switch
       v-model="value"
       @change="choosePicBed"
@@ -8,30 +8,28 @@
     </el-switch>
   </div>
 </template>
-<script>
-export default {
-  name: 'choose-pic-bed',
-  props: {
-    type: String,
-    label: String
-  },
-  data () {
-    return {
-      value: false
-    }
-  },
-  created () {
-    if (this.type === this.$db.get('picBed.current')) {
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+@Component({
+  name: 'choose-pic-bed'
+})
+export default class extends Vue {
+  value = false
+  @Prop() type!: string
+  @Prop() label!: string
+  async created () {
+    const current = await this.getConfig<string>('picBed.current')
+    if (this.type === current) {
       this.value = true
     }
-  },
-  methods: {
-    choosePicBed (val) {
-      this.letPicGoSaveData({
-        'picBed.current': this.type
-      })
-      this.$emit('update:choosed', this.type)
-    }
+  }
+
+  choosePicBed () {
+    this.saveConfig({
+      'picBed.current': this.type,
+      'picBed.uploader': this.type
+    })
+    this.$emit('update:choosed', this.type)
   }
 }
 </script>

src/renderer/components/ConfigForm.vue

@@ -72,7 +72,7 @@ import { cloneDeep, union } from 'lodash'
 })
 export default class extends Vue {
   @Prop() private config!: any[]
-  @Prop() readonly type!: string
+  @Prop() readonly type!: 'uploader' | 'transformer' | 'plugin'
   @Prop() readonly id!: string
   configList = []
   ruleForm = {}
@@ -81,13 +81,49 @@ export default class extends Vue {
     immediate: true
   })
   handleConfigChange (val: any) {
+    this.handleConfig(val)
+  }
+
+  async validate () {
+    return new Promise((resolve) => {
+      // @ts-ignore
+      this.$refs.form.validate((valid: boolean) => {
+        if (valid) {
+          resolve(this.ruleForm)
+        } else {
+          resolve(false)
+          return false
+        }
+      })
+    })
+  }
+
+  getConfigType () {
+    switch (this.type) {
+      case 'plugin': {
+        return this.id
+      }
+      case 'uploader': {
+        return `picBed.${this.id}`
+      }
+      case 'transformer': {
+        return `transformer.${this.id}`
+      }
+      default:
+        return 'unknown'
+    }
+  }
+
+  async handleConfig (val: any) {
     this.ruleForm = Object.assign({}, {})
-    const config = this.$db.get(`picBed.${this.id}`)
+    const config = await this.getConfig<IPicGoPluginConfig>(this.getConfigType())
     if (val.length > 0) {
       this.configList = cloneDeep(val).map((item: any) => {
         let defaultValue = item.default !== undefined
-          ? item.default : item.type === 'checkbox'
-            ? [] : null
+          ? item.default
+          : item.type === 'checkbox'
+            ? []
+            : null
         if (item.type === 'checkbox') {
           const defaults = item.choices.filter((i: any) => {
             return i.checked
@@ -102,19 +138,6 @@ export default class extends Vue {
       })
     }
   }
-  async validate () {
-    return new Promise((resolve, reject) => {
-      // @ts-ignore
-      this.$refs.form.validate((valid: boolean) => {
-        if (valid) {
-          resolve(this.ruleForm)
-        } else {
-          resolve(false)
-          return false
-        }
-      })
-    })
-  }
 }
 </script>
 <style lang='stylus'>

src/renderer/components/InputBoxDialog.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-dialog
+    :title="inputBoxOptions.title || $T('INPUT')"
+    :visible.sync="showInputBoxVisible"
+    :modal-append-to-body="false"
+  >
+    <el-input
+      v-model="inputBoxValue"
+      :placeholder="inputBoxOptions.placeholder"></el-input>
+    <span slot="footer">
+      <el-button @click="handleInputBoxCancel" round>{{ $T('CANCEL') }}</el-button>
+      <el-button type="primary" @click="handleInputBoxConfirm" round>{{ $T('CONFIRM') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { ipcRenderer, IpcRendererEvent } from 'electron'
+import {
+  SHOW_INPUT_BOX,
+  SHOW_INPUT_BOX_RESPONSE
+} from '~/universal/events/constants'
+@Component({
+  name: 'input-box-dialog'
+})
+export default class extends Vue {
+  inputBoxValue = ''
+  showInputBoxVisible = false
+  inputBoxOptions = {
+    title: '',
+    placeholder: ''
+  }
+
+  created () {
+    ipcRenderer.on(SHOW_INPUT_BOX, this.ipcEventHandler)
+    this.$bus.$on(SHOW_INPUT_BOX, this.initInputBoxValue)
+  }
+
+  ipcEventHandler (evt: IpcRendererEvent, options: IShowInputBoxOption) {
+    this.initInputBoxValue(options)
+  }
+
+  initInputBoxValue (options: IShowInputBoxOption) {
+    this.inputBoxValue = options.value || ''
+    this.inputBoxOptions.title = options.title || ''
+    this.inputBoxOptions.placeholder = options.placeholder || ''
+    this.showInputBoxVisible = true
+  }
+
+  handleInputBoxCancel () {
+    // TODO: RPCServer
+    this.showInputBoxVisible = false
+    ipcRenderer.send(SHOW_INPUT_BOX, '')
+    this.$bus.$emit(SHOW_INPUT_BOX_RESPONSE, '')
+  }
+
+  handleInputBoxConfirm () {
+    this.showInputBoxVisible = false
+    ipcRenderer.send(SHOW_INPUT_BOX, this.inputBoxValue)
+    this.$bus.$emit(SHOW_INPUT_BOX_RESPONSE, this.inputBoxValue)
+  }
+
+  beforeDestroy () {
+    ipcRenderer.removeListener(SHOW_INPUT_BOX, this.ipcEventHandler)
+    this.$bus.$off(SHOW_INPUT_BOX)
+  }
+}
+</script>
+<style lang='stylus'>
+</style>

src/renderer/layouts/Main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="setting-page">
+  <div id="main-page">
     <div class="fake-title-bar" :class="{ 'darwin': os === 'darwin' }">
       <div class="fake-title-bar__title">
         PicGo - {{ version }}
@@ -17,21 +17,22 @@
           :default-active="defaultActive"
           @select="handleSelect"
           :unique-opened="true"
+          @open="handleGetPicPeds"
           >
           <el-menu-item index="upload">
             <i class="el-icon-upload"></i>
-            <span slot="title">上传区</span>
+            <span slot="title">{{ $T('UPLOAD_AREA') }}</span>
           </el-menu-item>
           <el-menu-item index="gallery">
             <i class="el-icon-picture"></i>
-            <span slot="title">相册</span>
+            <span slot="title">{{ $T('GALLERY') }}</span>
           </el-menu-item>
           <el-submenu
             index="sub-menu"
           >
             <template slot="title">
               <i class="el-icon-menu"></i>
-              <span>图床设置</span>
+              <span>{{ $T('PICBEDS_SETTINGS') }}</span>
             </template>
             <template
               v-for="item in picBed"
@@ -48,11 +49,11 @@
           </el-submenu>
           <el-menu-item index="setting">
             <i class="el-icon-setting"></i>
-            <span slot="title">PicGo设置</span>
+            <span slot="title">{{ $T('PICGO_SETTINGS') }}</span>
           </el-menu-item>
           <el-menu-item index="plugin">
             <i class="el-icon-share"></i>
-            <span slot="title">插件设置</span>
+            <span slot="title">{{ $T('PLUGIN_SETTINGS') }}</span>
           </el-menu-item>
         </el-menu>
         <i class="el-icon-info setting-window" @click="openDialog"></i>
@@ -65,135 +66,149 @@
         :class="{ 'darwin': os === 'darwin' }">
         <transition name="picgo-fade" mode="out-in">
           <keep-alive>
-            <router-view v-if="$route.meta.keepAlive"></router-view>
+            <router-view v-if="$route && $route.meta && $route.meta.keepAlive"></router-view>
           </keep-alive>
         </transition>
         <transition name="picgo-fade" mode="out-in">
-          <router-view :key="$route.path" v-if="!$route.meta.keepAlive"></router-view>
+          <router-view :key="$route.path" v-if="!($route && $route.meta && $route.meta.keepAlive)"></router-view>
         </transition>
       </el-col>
     </el-row>
     <el-dialog
-      title="赞助PicGo"
+      :title="$T('SPONSOR_PICGO')"
       :visible.sync="visible"
       width="70%"
       top="10vh"
     >
-      PicGo是免费开源的软件，如果你喜欢它，对你有帮助，不妨请我喝杯咖啡？
+      {{ $T('PICGO_SPONSOR_TEXT') }}
       <el-row class="support">
         <el-col :span="12">
-          <img src="https://user-images.githubusercontent.com/12621342/34188165-e7cdf372-e56f-11e7-8732-1338c88b9bb7.jpg" alt="支付宝">
-          <div class="support-title">支付宝</div>
+          <img src="https://user-images.githubusercontent.com/12621342/34188165-e7cdf372-e56f-11e7-8732-1338c88b9bb7.jpg" :alt="$T('ALIPAY')">
+          <div class="support-title">{{ $T('ALIPAY') }}</div>
         </el-col>
         <el-col :span="12">
-          <img src="https://user-images.githubusercontent.com/12621342/34188201-212cda84-e570-11e7-9b7a-abb298699d85.jpg" alt="支付宝">
-          <div class="support-title">微信</div>
+          <img src="https://user-images.githubusercontent.com/12621342/34188201-212cda84-e570-11e7-9b7a-abb298699d85.jpg" :alt="$T('WECHATPAY')">
+          <div class="support-title">{{ $T('WECHATPAY') }}</div>
         </el-col>
       </el-row>
     </el-dialog>
     <el-dialog
-      title="自定义链接格式"
-      :visible.sync="customLinkVisible"
+      class="qrcode-dialog"
+      top="3vh"
+      width="60%"
+      :title="$T('PICBED_QRCODE')"
+      :visible.sync="qrcodeVisible"
+      :modal-append-to-body="false"
+      lock-scroll
     >
       <el-form
-        label-position="top"
-        :model="customLink"
-        ref="customLink"
-        :rules="rules"
+        label-position="left"
+        label-width="70px"
+        size="mini"
       >
         <el-form-item
-          label="用占位符$url来表示url的位置"
-          prop="value"
+          :label="$T('CHOOSE_PICBED')"
         >
-          <el-input
-            class="align-center"
-            v-model="customLink.value"
-            :autofocus="true"
-          ></el-input>
+          <el-select
+            v-model="choosedPicBedForQRCode"
+            multiple
+            collapse-tags
+          >
+            <el-option
+              v-for="item in picBed"
+              :key="item.type"
+              :label="item.name"
+              :value="item.type"
+            ></el-option>
+          </el-select>
+          <el-button
+            v-show="choosedPicBedForQRCode.length > 0"
+            type="primary"
+            round
+            class="copy-picbed-config"
+            @click="handleCopyPicBedConfig"
+          >
+            {{ $T('COPY_PICBED_CONFIG') }}
+          </el-button>
         </el-form-item>
       </el-form>
-      <div>
-        如[]($url)
+      <div class="qrcode-container">
+        <qrcode-vue
+          v-show="choosedPicBedForQRCode.length > 0"
+          :size="280"
+          :value="picBedConfigString"
+        />
       </div>
-      <span slot="footer">
-        <el-button @click="cancelCustomLink">取消</el-button>
-        <el-button type="primary" @click="confirmCustomLink">确定</el-button>
-      </span>
-    </el-dialog>
-    <el-dialog
-      :title="inputBoxOptions.title || '输入框'"
-      :visible.sync="showInputBoxVisible"
-      :modal-append-to-body="false"
-      @close="handleInputBoxClose"
-    >
-      <el-input
-        v-model="inputBoxValue"
-        :placeholder="inputBoxOptions.placeholder"></el-input>
-      <span slot="footer">
-        <el-button @click="showInputBoxVisible = false" round>取消</el-button>
-        <el-button type="primary" @click="showInputBoxVisible = false" round>确定</el-button>
-      </span>
     </el-dialog>
+    <input-box-dialog />
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
+import QrcodeVue from 'qrcode.vue'
+import pick from 'lodash/pick'
 import pkg from 'root/package.json'
-import keyDetect from '@/utils/key-binding'
-import { remote, ipcRenderer, IpcRendererEvent } from 'electron'
-import db from '#/datastore'
+import {
+  ipcRenderer,
+  IpcRendererEvent,
+  clipboard
+} from 'electron'
 import mixin from '@/utils/mixin'
-const { Menu, dialog, BrowserWindow } = remote
-const customLinkRule = (rule: string, value: string, callback: (arg0?: Error) => void) => {
-  if (!/\$url/.test(value)) {
-    return callback(new Error('必须含有$url'))
-  } else {
-    return callback()
-  }
-}
+import InputBoxDialog from '@/components/InputBoxDialog.vue'
+import {
+  MINIMIZE_WINDOW,
+  CLOSE_WINDOW,
+  SHOW_MAIN_PAGE_MENU,
+  SHOW_MAIN_PAGE_QRCODE,
+  SHOW_MAIN_PAGE_DONATION
+} from '~/universal/events/constants'
 @Component({
-  name: 'setting-page',
-  mixins: [mixin]
+  name: 'main-page',
+  mixins: [mixin],
+  components: {
+    InputBoxDialog,
+    QrcodeVue
+  }
 })
 export default class extends Vue {
   version = process.env.NODE_ENV === 'production' ? pkg.version : 'Dev'
   defaultActive = 'upload'
-  menu: Electron.Menu | null = null
   visible = false
   keyBindingVisible = false
   customLinkVisible = false
-  customLink = {
-    value: db.get('customLink') || '$url'
-  }
-  rules = {
-    value: [
-      { validator: customLinkRule, trigger: 'blur' }
-    ]
-  }
   os = ''
-  shortKey: IShortKeyMap = {
-    upload: db.get('shortKey.upload')
-  }
   picBed: IPicBedType[] = []
-  // for showInputBox
-  showInputBoxVisible = false
-  inputBoxValue = ''
-  inputBoxOptions = {
-    title: '',
-    placeholder: ''
-  }
+  qrcodeVisible = false
+  picBedConfigString = ''
+  choosedPicBedForQRCode: string[] = []
   created () {
     this.os = process.platform
-    this.buildMenu()
     ipcRenderer.send('getPicBeds')
     ipcRenderer.on('getPicBeds', this.getPicBeds)
-    ipcRenderer.on('showInputBox', (evt: IpcRendererEvent, options: IShowInputBoxOption) => {
-      this.inputBoxValue = ''
-      this.inputBoxOptions.title = options.title || ''
-      this.inputBoxOptions.placeholder = options.placeholder || ''
-      this.showInputBoxVisible = true
+    this.handleGetPicPeds()
+    ipcRenderer.on(SHOW_MAIN_PAGE_QRCODE, () => {
+      this.qrcodeVisible = true
+    })
+    ipcRenderer.on(SHOW_MAIN_PAGE_DONATION, () => {
+      this.visible = true
     })
   }
+
+  @Watch('choosedPicBedForQRCode')
+  choosedPicBedForQRCodeChange (val: string[]) {
+    if (val.length > 0) {
+      this.$nextTick(async () => {
+        const picBedConfig = await this.getConfig('picBed')
+        const config = pick(picBedConfig, ...this.choosedPicBedForQRCode)
+        this.picBedConfigString = JSON.stringify(config)
+      })
+    }
+  }
+
+  handleGetPicPeds = () => {
+    ipcRenderer.send('getPicBeds')
+  }
+
   handleSelect (index: string) {
     const type = index.match(/picbeds-/)
     if (type === null) {
@@ -216,85 +231,50 @@ export default class extends Vue {
       }
     }
   }
+
   minimizeWindow () {
-    const window = BrowserWindow.getFocusedWindow()
-    window!.minimize()
+    ipcRenderer.send(MINIMIZE_WINDOW)
   }
+
   closeWindow () {
-    const window = BrowserWindow.getFocusedWindow()
-    window!.close()
-  }
-  buildMenu () {
-    const _this = this
-    const template = [
-      {
-        label: '关于',
-        click () {
-          dialog.showMessageBox({
-            title: 'PicGo',
-            message: 'PicGo',
-            detail: `Version: ${pkg.version}\nAuthor: Molunerfinn\nGithub: https://github.com/Molunerfinn/PicGo`
-          })
-        }
-      },
-      {
-        label: '赞助PicGo',
-        click () {
-          _this.visible = true
-        }
-      }
-    ]
-    this.menu = Menu.buildFromTemplate(template)
+    ipcRenderer.send(CLOSE_WINDOW)
   }
+
   openDialog () {
-    // this.menu!.popup(remote.getCurrentWindow())
-    this.menu!.popup()
-  }
-  keyDetect (type: string, event: KeyboardEvent) {
-    this.shortKey[type] = keyDetect(event).join('+')
-  }
-  cancelKeyBinding () {
-    this.keyBindingVisible = false
-    this.shortKey = db.get('shortKey')
-  }
-  cancelCustomLink () {
-    this.customLinkVisible = false
-    this.customLink.value = db.get('customLink') || '$url'
-  }
-  confirmCustomLink () {
-    // @ts-ignore
-    this.$refs.customLink.validate((valid: boolean) => {
-      if (valid) {
-        db.set('customLink', this.customLink.value)
-        this.customLinkVisible = false
-        ipcRenderer.send('updateCustomLink')
-      } else {
-        return false
-      }
-    })
+    ipcRenderer.send(SHOW_MAIN_PAGE_MENU)
   }
+
   openMiniWindow () {
     ipcRenderer.send('openMiniWindow')
   }
+
+  handleCopyPicBedConfig () {
+    clipboard.writeText(this.picBedConfigString)
+    this.$message.success(this.$T('COPY_PICBED_CONFIG_SUCCEED'))
+  }
+
   getPicBeds (event: IpcRendererEvent, picBeds: IPicBedType[]) {
     this.picBed = picBeds
   }
-  handleInputBoxClose () {
-    ipcRenderer.send('showInputBox', this.inputBoxValue)
-  }
-  beforeRouteEnter (to: any, from: any, next: any) {
+
+  beforeRouteEnter (to: any, next: any) {
     next((vm: this) => {
       vm.defaultActive = to.name
     })
   }
+
   beforeDestroy () {
     ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
-    ipcRenderer.removeAllListeners('showInputBox')
   }
 }
 </script>
 <style lang='stylus'>
 $darwinBg = transparentify(#172426, #000, 0.7)
+.setting-list-scroll
+  height 425px
+  overflow-y auto
+  overflow-x hidden
+  margin-right 0!important
 .picgo-fade
   &-enter,
   &-leave,
@@ -308,7 +288,17 @@ $darwinBg = transparentify(#172426, #000, 0.7)
   font-size 20px
   text-align center
   margin 10px auto
-#setting-page
+#main-page
+  .qrcode-dialog
+    .qrcode-container
+      display flex
+      justify-content center
+    .el-dialog__body
+      padding-top 10px
+    .copy-picbed-config
+      margin-left 10px
+    .el-input__inner
+      border-radius 14px
   .fake-title-bar
     -webkit-app-region drag
     height h = 22px

src/renderer/pages/Gallery.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="gallery-view">
     <div class="view-title">
-      相册 - {{ filterList.length }} <i class="el-icon-caret-bottom" @click="toggleHandleBar" :class="{'active': handleBarActive}"></i>
+      {{ $T('GALLERY') }} - {{ filterList.length }} <i class="el-icon-caret-bottom" @click="toggleHandleBar" :class="{'active': handleBarActive}"></i>
     </div>
     <transition name="el-zoom-in-top">
       <el-row v-show="handleBarActive">
@@ -14,7 +14,7 @@
                 collapse-tags
                 size="mini"
                 style="width: 100%"
-                placeholder="请选择显示的图床">
+                :placeholder="$T('CHOOSE_SHOWED_PICBED')">
                 <el-option
                   v-for="item in picBed"
                   :key="item.type"
@@ -29,7 +29,7 @@
                 size="mini"
                 style="width: 100%"
                 @change="handlePasteStyleChange"
-                placeholder="请选择粘贴的格式">
+                :placeholder="$T('CHOOSE_PASTE_FORMAT')">
                 <el-option
                   v-for="(value, key) in pasteStyleMap"
                   :key="key"
@@ -42,20 +42,25 @@
           <el-row class="handle-bar" :gutter="16">
             <el-col :span="12">
               <el-input
-                placeholder="搜索"
+                :placeholder="$T('SEARCH')"
                 size="mini"
                 v-model="searchText">
                 <i slot="suffix" class="el-input__icon el-icon-close" v-if="searchText" @click="cleanSearch" style="cursor: pointer"></i>
               </el-input>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="4">
               <div class="item-base copy round" :class="{ active: isMultiple(choosedList)}" @click="multiCopy">
-                <i class="el-icon-document"></i> 批量复制
+                {{ $T('COPY') }}
               </div>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="4">
               <div class="item-base delete round" :class="{ active: isMultiple(choosedList)}" @click="multiRemove">
-                <i class="el-icon-delete"></i> 批量删除
+                {{ $T('DELETE') }}
+              </div>
+            </el-col>
+            <el-col :span="4">
+              <div class="item-base all-pick round" :class="{ active: filterList.length > 0}" @click="toggleSelectAll">
+                {{ isAllSelected ? $T('CANCEL') : $T('SELECT_ALL') }}
               </div>
             </el-col>
           </el-row>
@@ -66,12 +71,12 @@
       <el-col :span="20" :offset="2">
         <el-row :gutter="16">
           <gallerys
-            :images="images"
+            :images="filterList"
             :index="idx"
             @close="handleClose"
             :options="options"
           ></gallerys>
-          <el-col :span="6" v-for="(item, index) in images" :key="item.id" class="gallery-list__img">
+          <el-col :span="6" v-for="(item, index) in filterList" :key="item.id" class="gallery-list__img">
             <div
               class="gallery-list__item"
               @click="zoomImage(index)"
@@ -82,7 +87,7 @@
               <i class="el-icon-document" @click="copy(item)"></i>
               <i class="el-icon-edit-outline" @click="openDialog(item)"></i>
               <i class="el-icon-delete" @click="remove(item.id)"></i>
-              <el-checkbox v-model="choosedList[item.id]" class="pull-right" @change=" handleBarActive = true"></el-checkbox>
+              <el-checkbox v-model="choosedList[item.id ? item.id : '']" class="pull-right" @change="(val) => handleChooseImage(val, index)"></el-checkbox>
             </div>
           </el-col>
         </el-row>
@@ -90,14 +95,14 @@
     </el-row>
     <el-dialog
       :visible.sync="dialogVisible"
-      title="修改图片URL"
+      :title="$T('CHANGE_IMAGE_URL')"
       width="500px"
       :modal-append-to-body="false"
     >
       <el-input v-model="imgInfo.imgUrl"></el-input>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="confirmModify">确 定</el-button>
+        <el-button @click="dialogVisible = false">{{ $T('CANCEL') }}</el-button>
+        <el-button type="primary" @click="confirmModify">{{ $T('CONFIRM') }}</el-button>
       </span>
     </el-dialog>
   </div>
@@ -105,8 +110,9 @@
 <script lang="ts">
 // @ts-ignore
 import gallerys from 'vue-gallery'
-import pasteStyle from '#/utils/pasteTemplate'
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
+import { IResult } from '@picgo/store/dist/types'
+import { PASTE_TEXT } from '#/events/constants'
 import {
   ipcRenderer,
   clipboard,
@@ -126,13 +132,17 @@ export default class extends Vue {
     urlProperty: 'imgUrl',
     closeOnSlideClick: true
   }
+
   dialogVisible = false
   imgInfo = {
-    id: null,
+    id: '',
     imgUrl: ''
   }
+
   choosedList: IObjT<boolean> = {}
   choosedPicBed: string[] = []
+  lastChoosed: number = -1
+  isShiftKeyPress: boolean = false
   searchText = ''
   handleBarActive = false
   pasteStyle = ''
@@ -143,67 +153,120 @@ export default class extends Vue {
     UBB: 'UBB',
     Custom: 'Custom'
   }
+
   picBed: IPicBedType[] = []
-  beforeRouteEnter (to: any, from: any, next: any) {
-    next((vm: any) => {
-      vm.getGallery()
-      vm.getPasteStyle()
-      vm.getPicBeds()
-    })
+  @Watch('$route')
+  handleRouteUpdate (to: any, from: any) {
+    console.log(to, from)
+    if (from.name === 'gallery') {
+      this.clearChoosedList()
+    }
+    if (to.name === 'gallery') {
+      this.updateGallery()
+    }
   }
-  created () {
-    ipcRenderer.on('updateGallery', (event: IpcRendererEvent) => {
-      this.$nextTick(() => {
-        this.filterList = this.getGallery()
+
+  async created () {
+    ipcRenderer.on('updateGallery', () => {
+      this.$nextTick(async () => {
+        this.updateGallery()
       })
     })
     ipcRenderer.send('getPicBeds')
     ipcRenderer.on('getPicBeds', this.getPicBeds)
+    this.updateGallery()
   }
+
+  mounted () {
+    document.addEventListener('keydown', this.handleDetectShiftKey)
+    document.addEventListener('keyup', this.handleDetectShiftKey)
+  }
+
+  handleDetectShiftKey (event: KeyboardEvent) {
+    if (event.key === 'Shift') {
+      if (event.type === 'keydown') {
+        this.isShiftKeyPress = true
+      } else if (event.type === 'keyup') {
+        this.isShiftKeyPress = false
+      }
+    }
+  }
+
   get filterList () {
     return this.getGallery()
   }
-  set filterList (val) {
-    this.images = val
+
+  get isAllSelected () {
+    const values = Object.values(this.choosedList)
+    if (values.length === 0) {
+      return false
+    } else {
+      return this.filterList.every(item => {
+        return this.choosedList[item.id!]
+      })
+    }
   }
+
   getPicBeds (event: IpcRendererEvent, picBeds: IPicBedType[]) {
     this.picBed = picBeds
   }
-  getGallery () {
-    if (this.choosedPicBed.length > 0) {
-      let arr: ImgInfo[] = []
-      this.choosedPicBed.forEach(item => {
-        let obj: IObj = {
-          type: item
-        }
-        if (this.searchText) {
-          obj.fileName = this.searchText
-        }
-        // @ts-ignore
-        arr = arr.concat(this.$db.read().get('uploaded').filter(obj => {
-          return obj.fileName.indexOf(this.searchText) !== -1 && obj.type === item
-        }).reverse().value())
-      })
-      this.images = arr
+
+  getGallery (): ImgInfo[] {
+    if (this.searchText || this.choosedPicBed.length > 0) {
+      return this.images
+        .filter(item => {
+          let isInChoosedPicBed = true
+          let isIncludesSearchText = true
+          if (this.choosedPicBed.length > 0) {
+            isInChoosedPicBed = this.choosedPicBed.some(type => type === item.type)
+          }
+          if (this.searchText) {
+            isIncludesSearchText = item.fileName?.includes(this.searchText) || false
+          }
+          return isIncludesSearchText && isInChoosedPicBed
+        })
     } else {
-      if (this.searchText) {
-        let data = this.$db.read().get('uploaded')
-        // @ts-ignore
-          .filter(item => {
-            return item.fileName.indexOf(this.searchText) !== -1
-          }).reverse().value()
-        this.images = data
-      } else {
-        // @ts-ignore
-        this.images = this.$db.read().get('uploaded').slice().reverse().value()
-      }
+      return this.images
     }
-    return this.images
   }
+
+  async updateGallery () {
+    this.images = (await this.$$db.get({ orderBy: 'desc' })).data
+  }
+
+  @Watch('filterList')
+  handleFilterListChange () {
+    this.clearChoosedList()
+  }
+
+  handleChooseImage (val: boolean, index: number) {
+    if (val === true) {
+      this.handleBarActive = true
+      if (this.lastChoosed !== -1 && this.isShiftKeyPress) {
+        const min = Math.min(this.lastChoosed, index)
+        const max = Math.max(this.lastChoosed, index)
+        for (let i = min + 1; i < max; i++) {
+          const id = this.filterList[i].id!
+          this.$set(this.choosedList, id, true)
+        }
+      }
+      this.lastChoosed = index
+    }
+  }
+
+  clearChoosedList () {
+    this.isShiftKeyPress = false
+    Object.keys(this.choosedList).forEach(key => {
+      this.choosedList[key] = false
+    })
+    this.lastChoosed = -1
+  }
+
   zoomImage (index: number) {
     this.idx = index
     this.changeZIndexForGallery(true)
   }
+
   changeZIndexForGallery (isOpen: boolean) {
     if (isOpen) {
       // @ts-ignore
@@ -213,60 +276,63 @@ export default class extends Vue {
       document.querySelector('.main-content.el-row').style.zIndex = 10
     }
   }
+
   handleClose () {
     this.idx = null
     this.changeZIndexForGallery(false)
   }
-  copy (item: ImgInfo) {
-    const style = this.$db.get('settings.pasteStyle') || 'markdown'
-    const copyLink = pasteStyle(style, item)
+
+  async copy (item: ImgInfo) {
+    const copyLink = await ipcRenderer.invoke(PASTE_TEXT, item)
     const obj = {
-      title: '复制链接成功',
+      title: this.$T('COPY_LINK_SUCCEED'),
       body: copyLink,
       icon: item.url || item.imgUrl
     }
     const myNotification = new Notification(obj.title, obj)
-    clipboard.writeText(copyLink)
     myNotification.onclick = () => {
       return true
     }
   }
-  remove (id: string) {
-    this.$confirm('此操作将把该图片移出相册, 是否继续?', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-      const file = this.$db.getById('uploaded', id)
-      this.$db.removeById('uploaded', id)
-      ipcRenderer.send('removeFiles', [file])
-      const obj = {
-        title: '操作结果',
-        body: '删除成功'
-      }
-      const myNotification = new Notification(obj.title, obj)
-      myNotification.onclick = () => {
+
+  remove (id?: string) {
+    if (id) {
+      this.$confirm(this.$T('TIPS_REMOVE_LINK'), this.$T('TIPS_NOTICE'), {
+        confirmButtonText: this.$T('CONFIRM'),
+        cancelButtonText: this.$T('CANCEL'),
+        type: 'warning'
+      }).then(async () => {
+        const file = await this.$$db.getById(id)
+        await this.$$db.removeById(id)
+        ipcRenderer.send('removeFiles', [file])
+        const obj = {
+          title: this.$T('OPERATION_SUCCEED'),
+          body: ''
+        }
+        const myNotification = new Notification(obj.title, obj)
+        myNotification.onclick = () => {
+          return true
+        }
+        this.updateGallery()
+      }).catch((e) => {
+        console.log(e)
         return true
-      }
-      this.getGallery()
-    }).catch((e) => {
-      console.log(e)
-      return true
-    })
+      })
+    }
   }
+
   openDialog (item: ImgInfo) {
-    this.imgInfo.id = item.id
+    this.imgInfo.id = item.id!
     this.imgInfo.imgUrl = item.imgUrl as string
     this.dialogVisible = true
   }
-  confirmModify () {
-    this.$db.read().get('uploaded')
-      // @ts-ignore
-      .getById(this.imgInfo.id)
-      .assign({ imgUrl: this.imgInfo.imgUrl })
-      .write()
+
+  async confirmModify () {
+    await this.$$db.updateById(this.imgInfo.id, {
+      imgUrl: this.imgInfo.imgUrl
+    })
     const obj = {
-      title: '修改图片URL成功',
+      title: this.$T('CHANGE_IMAGE_URL_SUCCEED'),
       body: this.imgInfo.imgUrl,
       icon: this.imgInfo.imgUrl
     }
@@ -275,87 +341,114 @@ export default class extends Vue {
       return true
     }
     this.dialogVisible = false
-    this.getGallery()
+    this.updateGallery()
   }
+
   choosePicBed (type: string) {
-    let idx = this.choosedPicBed.indexOf(type)
+    const idx = this.choosedPicBed.indexOf(type)
     if (idx !== -1) {
       this.choosedPicBed.splice(idx, 1)
     } else {
       this.choosedPicBed.push(type)
     }
   }
+
   cleanSearch () {
     this.searchText = ''
   }
+
   isMultiple (obj: IObj) {
     return Object.values(obj).some(item => item)
   }
+
+  toggleSelectAll () {
+    const result = !this.isAllSelected
+    this.filterList.forEach(item => {
+      this.$set(this.choosedList, item.id!, result)
+    })
+  }
+
   multiRemove () {
     // choosedList -> { [id]: true or false }; true means choosed. false means not choosed.
-    if (Object.values(this.choosedList).some(item => item)) {
-      this.$confirm('将删除刚才选中的图片，是否继续？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+    const multiRemoveNumber = Object.values(this.choosedList).filter(item => item).length
+    if (multiRemoveNumber) {
+      this.$confirm(this.$T('TIPS_WILL_REMOVE_CHOOSED_IMAGES', {
+        m: multiRemoveNumber
+      }), this.$T('TIPS_NOTICE'), {
+        confirmButtonText: this.$T('CONFIRM'),
+        cancelButtonText: this.$T('CANCEL'),
         type: 'warning'
-      }).then(() => {
-        let files: ImgInfo[] = []
-        Object.keys(this.choosedList).forEach(key => {
+      }).then(async () => {
+        const files: IResult<ImgInfo>[] = []
+        const imageIDList = Object.keys(this.choosedList)
+        for (let i = 0; i < imageIDList.length; i++) {
+          const key = imageIDList[i]
           if (this.choosedList[key]) {
-            const file = this.$db.getById('uploaded', key)
-            files.push(file)
-            this.$db.removeById('uploaded', key)
+            const file = await this.$$db.getById<ImgInfo>(key)
+            if (file) {
+              files.push(file)
+              await this.$$db.removeById(key)
+            }
           }
-        })
-        this.choosedList = {}
-        this.getGallery()
+        }
+        this.clearChoosedList()
+        this.choosedList = {} // 只有删除才能将这个置空
         const obj = {
-          title: '操作结果',
-          body: '删除成功'
+          title: this.$T('OPERATION_SUCCEED'),
+          body: ''
         }
         ipcRenderer.send('removeFiles', files)
         const myNotification = new Notification(obj.title, obj)
         myNotification.onclick = () => {
           return true
         }
+        this.updateGallery()
       }).catch(() => {
         return true
       })
     }
   }
-  multiCopy () {
+
+  async multiCopy () {
     if (Object.values(this.choosedList).some(item => item)) {
-      let copyString = ''
-      const style = this.$db.get('settings.pasteStyle') || 'markdown'
+      const copyString: string[] = []
       // choosedList -> { [id]: true or false }; true means choosed. false means not choosed.
-      Object.keys(this.choosedList).forEach(key => {
+      const imageIDList = Object.keys(this.choosedList)
+      for (let i = 0; i < imageIDList.length; i++) {
+        const key = imageIDList[i]
         if (this.choosedList[key]) {
-          const item = this.$db.getById('uploaded', key)
-          copyString += pasteStyle(style, item) + '\n'
-          this.choosedList[key] = false
+          const item = await this.$$db.getById<ImgInfo>(key)
+          if (item) {
+            const txt = await ipcRenderer.invoke(PASTE_TEXT, item)
+            copyString.push(txt)
+            this.choosedList[key] = false
+          }
         }
-      })
+      }
       const obj = {
-        title: '批量复制链接成功',
-        body: copyString
+        title: this.$T('BATCH_COPY_LINK_SUCCEED'),
+        body: copyString.join('\n')
       }
       const myNotification = new Notification(obj.title, obj)
-      clipboard.writeText(copyString)
+      clipboard.writeText(copyString.join('\n'))
       myNotification.onclick = () => {
         return true
       }
     }
   }
+
   toggleHandleBar () {
     this.handleBarActive = !this.handleBarActive
   }
-  getPasteStyle () {
-    this.pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
-  }
-  handlePasteStyleChange (val: string) {
-    this.$db.set('settings.pasteStyle', val)
+
+  // getPasteStyle () {
+  //   this.pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
+  // }
+  async handlePasteStyleChange (val: string) {
+    this.saveConfig('settings.pasteStyle', val)
     this.pasteStyle = val
   }
+
   beforeDestroy () {
     ipcRenderer.removeAllListeners('updateGallery')
     ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
@@ -400,6 +493,13 @@ export default class extends Vue {
       cursor pointer
       background #F15140
       color #fff
+  &.all-pick
+    cursor not-allowed
+    background #69C282
+    &.active
+      cursor pointer
+      background #44B363
+      color #fff
 #gallery-view
   position relative
   .round

src/renderer/pages/MiniPage.vue

@@ -20,10 +20,12 @@ import mixin from '@/utils/mixin'
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import {
   ipcRenderer,
-  IpcRendererEvent,
-  remote
+  IpcRendererEvent
 } from 'electron'
-import path from 'path'
+import { SHOW_MINI_PAGE_MENU, SET_MINI_WINDOW_POS } from '~/universal/events/constants'
+import {
+  isUrl
+} from '~/universal/utils/common'
 @Component({
   name: 'mini-page',
   mixins: [mixin]
@@ -55,6 +57,7 @@ export default class extends Vue {
     })
     this.getPicBeds()
   }
+
   mounted () {
     window.addEventListener('mousedown', this.handleMouseDown, false)
     window.addEventListener('mousemove', this.handleMouseMove, false)
@@ -73,27 +76,59 @@ export default class extends Vue {
       }, 1200)
     }
   }
+
   getPicBeds () {
     this.picBed = ipcRenderer.sendSync('getPicBeds')
-    this.buildMenu()
   }
+
   onDrop (e: DragEvent) {
     this.dragover = false
-    this.ipcSendFiles(e.dataTransfer!.files)
+    const items = e.dataTransfer!.items
+    if (items.length === 2 && items[0].type === 'text/uri-list') {
+      this.handleURLDrag(items, e.dataTransfer!)
+    } else if (items[0].type === 'text/plain') {
+      const str = e.dataTransfer!.getData(items[0].type)
+      if (isUrl(str)) {
+        ipcRenderer.send('uploadChoosedFiles', [{ path: str }])
+      } else {
+        this.$message.error(this.$T('TIPS_DRAG_VALID_PICTURE_OR_URL'))
+      }
+    } else {
+      this.ipcSendFiles(e.dataTransfer!.files)
+    }
   }
+
+  handleURLDrag (items: DataTransferItemList, dataTransfer: DataTransfer) {
+    // text/html
+    // Use this data to get a more precise URL
+    const urlString = dataTransfer.getData(items[1].type)
+    const urlMatch = urlString.match(/<img.*src="(.*?)"/)
+    if (urlMatch) {
+      ipcRenderer.send('uploadChoosedFiles', [
+        {
+          path: urlMatch[1]
+        }
+      ])
+    } else {
+      this.$message.error(this.$T('TIPS_DRAG_VALID_PICTURE_OR_URL'))
+    }
+  }
+
   openUploadWindow () {
     // @ts-ignore
     document.getElementById('file-uploader').click()
   }
+
   onChange (e: any) {
     this.ipcSendFiles(e.target.files)
     // @ts-ignore
     document.getElementById('file-uploader').value = ''
   }
+
   ipcSendFiles (files: FileList) {
-    let sendFiles: IFileWithPath[] = []
-    Array.from(files).forEach((item, index) => {
-      let obj = {
+    const sendFiles: IFileWithPath[] = []
+    Array.from(files).forEach((item) => {
+      const obj = {
         name: item.name,
         path: item.path
       }
@@ -101,6 +136,7 @@ export default class extends Vue {
     })
     ipcRenderer.send('uploadChoosedFiles', sendFiles)
   }
+
   handleMouseDown (e: MouseEvent) {
     this.dragging = true
     this.wX = e.pageX
@@ -108,20 +144,28 @@ export default class extends Vue {
     this.screenX = e.screenX
     this.screenY = e.screenY
   }
+
   handleMouseMove (e: MouseEvent) {
     e.preventDefault()
     e.stopPropagation()
     if (this.dragging) {
       const xLoc = e.screenX - this.wX
       const yLoc = e.screenY - this.wY
-      remote.BrowserWindow.getFocusedWindow()!.setBounds({
+      ipcRenderer.send(SET_MINI_WINDOW_POS, {
         x: xLoc,
         y: yLoc,
         width: 64,
         height: 64
       })
+      // remote.BrowserWindow.getFocusedWindow()!.setBounds({
+      //   x: xLoc,
+      //   y: yLoc,
+      //   width: 64,
+      //   height: 64
+      // })
     }
   }
+
   handleMouseUp (e: MouseEvent) {
     this.dragging = false
     if (this.screenX === e.screenX && this.screenY === e.screenY) {
@@ -133,63 +177,11 @@ export default class extends Vue {
       }
     }
   }
+
   openContextMenu () {
-    this.menu!.popup()
-  }
-  buildMenu () {
-    const _this = this
-    const submenu = this.picBed.filter(item => item.visible).map(item => {
-      return {
-        label: item.name,
-        type: 'radio',
-        checked: this.$db.get('picBed.current') === item.type,
-        click () {
-          _this.letPicGoSaveData({
-            'picBed.current': item.type
-          })
-          ipcRenderer.send('syncPicBed')
-        }
-      }
-    })
-    const template = [
-      {
-        label: '打开详细窗口',
-        click () {
-          ipcRenderer.send('openSettingWindow')
-        }
-      },
-      {
-        label: '选择默认图床',
-        type: 'submenu',
-        submenu
-      },
-      {
-        label: '剪贴板图片上传',
-        click () {
-          ipcRenderer.send('uploadClipboardFilesFromUploadPage')
-        }
-      },
-      {
-        label: '隐藏窗口',
-        click () {
-          remote.BrowserWindow.getFocusedWindow()!.hide()
-        }
-      },
-      {
-        label: '重启应用',
-        click () {
-          remote.app.relaunch()
-          remote.app.exit(0)
-        }
-      },
-      {
-        role: 'quit',
-        label: '退出'
-      }
-    ]
-    // @ts-ignore
-    this.menu = remote.Menu.buildFromTemplate(template)
+    ipcRenderer.send(SHOW_MINI_PAGE_MENU)
   }
+
   beforeDestroy () {
     ipcRenderer.removeAllListeners('uploadProgress')
     ipcRenderer.removeListener('getPicBeds', this.getPicBeds)

src/renderer/pages/PicGoSetting.vue

@@ -1,114 +1,169 @@
 <template>
   <div id="picgo-setting">
     <div class="view-title">
-      PicGo设置 - <i class="el-icon-document" @click="goConfigPage"></i>
+      {{ $T('PICGO_SETTINGS') }} - <i class="el-icon-document" @click="goConfigPage"></i>
     </div>
     <el-row class="setting-list">
-      <el-col :span="15" :offset="4">
+      <el-col :span="20" :offset="2">
         <el-row>
         <el-form
-          label-width="120px"
-          label-position="right"
+          label-position="left"
+          label-width="10"
           size="small"
         >
           <el-form-item
-            label="打开配置文件"
+            :label="$T('SETTINGS_CHOOSE_LANGUAGE')"
           >
-            <el-button type="primary" round size="mini" @click="openFile('data.json')">点击打开</el-button>
+            <!-- <el-button type="primary" round size="mini" @click="openFile('data.json')">{{ $T('SETTINGS_CLICK_TO_OPEN') }}</el-button> -->
+            <el-select
+              v-model="currentLanguage"
+              size="mini"
+              style="width: 100%"
+              @change="handleLanguageChange"
+              :placeholder="$T('SETTINGS_CHOOSE_LANGUAGE')">
+              <el-option
+                v-for="item in languageList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
           </el-form-item>
           <el-form-item
-            label="设置日志文件"
+            :label="$T('SETTINGS_OPEN_CONFIG_FILE')"
           >
-            <el-button type="primary" round size="mini" @click="openLogSetting">点击设置</el-button>
+            <el-button type="primary" round size="mini" @click="openFile('data.json')">{{ $T('SETTINGS_CLICK_TO_OPEN') }}</el-button>
           </el-form-item>
           <el-form-item
-            label="修改快捷键"
+            :label="$T('SETTINGS_SET_LOG_FILE')"
           >
-            <el-button type="primary" round size="mini" @click="goShortCutPage">点击设置</el-button>
+            <el-button type="primary" round size="mini" @click="openLogSetting">{{ $T('SETTINGS_CLICK_TO_SET') }}</el-button>
           </el-form-item>
           <el-form-item
-            label="自定义链接格式"
+            :label="$T('SETTINGS_SET_SHORTCUT')"
           >
-            <el-button type="primary" round size="mini" @click="customLinkVisible = true">点击设置</el-button>
+            <el-button type="primary" round size="mini" @click="goShortCutPage">{{ $T('SETTINGS_CLICK_TO_SET') }}</el-button>
           </el-form-item>
           <el-form-item
-            label="设置代理"
+            :label="$T('SETTINGS_CUSTOM_LINK_FORMAT')"
           >
-            <el-button type="primary" round size="mini" @click="proxyVisible = true">点击设置</el-button>
+            <el-button type="primary" round size="mini" @click="customLinkVisible = true">{{ $T('SETTINGS_CLICK_TO_SET') }}</el-button>
           </el-form-item>
           <el-form-item
-            label="设置Server"
+            :label="$T('SETTINGS_SET_PROXY_AND_MIRROR')"
           >
-            <el-button type="primary" round size="mini" @click="serverVisible = true">点击设置</el-button>
+            <el-button type="primary" round size="mini" @click="proxyVisible = true">{{ $T('SETTINGS_CLICK_TO_SET') }}</el-button>
           </el-form-item>
           <el-form-item
-            label="检查更新"
+            :label="$T('SETTINGS_SET_SERVER')"
           >
-            <el-button type="primary" round size="mini" @click="checkUpdate">点击检查</el-button>
+            <el-button type="primary" round size="mini" @click="serverVisible = true">{{ $T('SETTINGS_CLICK_TO_SET') }}</el-button>
           </el-form-item>
           <el-form-item
-            label="打开更新助手"
+            :label="$T('SETTINGS_CHECK_UPDATE')"
+          >
+            <el-button type="primary" round size="mini" @click="checkUpdate">{{ $T('SETTINGS_CLICK_TO_CHECK') }}</el-button>
+          </el-form-item>
+          <el-form-item
+            :label="$T('SETTINGS_OPEN_UPDATE_HELPER')"
           >
             <el-switch
               v-model="form.updateHelper"
-              active-text="开"
-              inactive-text="关"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
               @change="updateHelperChange"
             ></el-switch>
           </el-form-item>
           <el-form-item
-            label="开机自启"
+            v-show="form.updateHelper"
+            :label="$T('SETTINGS_ACCEPT_BETA_UPDATE')"
+          >
+            <el-switch
+              v-model="form.checkBetaUpdate"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
+              @change="checkBetaUpdateChange"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            :label="$T('SETTINGS_LAUNCH_ON_BOOT')"
           >
             <el-switch
               v-model="form.autoStart"
-              active-text="开"
-              inactive-text="关"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
               @change="handleAutoStartChange"
             ></el-switch>
           </el-form-item>
           <el-form-item
-            label="上传前重命名"
+            :label="$T('SETTINGS_RENAME_BEFORE_UPLOAD')"
           >
             <el-switch
               v-model="form.rename"
-              active-text="开"
-              inactive-text="关"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
               @change="handleRename"
             ></el-switch>
           </el-form-item>
           <el-form-item
-            label="时间戳重命名"
+            :label="$T('SETTINGS_TIMESTAMP_RENAME')"
           >
             <el-switch
               v-model="form.autoRename"
-              active-text="开"
-              inactive-text="关"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
               @change="handleAutoRename"
             ></el-switch>
           </el-form-item>
           <el-form-item
-            label="开启上传提示"
+            :label="$T('SETTINGS_OPEN_UPLOAD_TIPS')"
           >
             <el-switch
               v-model="form.uploadNotification"
-              active-text="开"
-              inactive-text="关"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
               @change="handleUploadNotification"
             ></el-switch>
           </el-form-item>
           <el-form-item
             v-if="os !== 'darwin'"
-            label="Mini窗口置顶"
+            :label="$T('SETTINGS_MINI_WINDOW_ON_TOP')"
           >
             <el-switch
               v-model="form.miniWindowOntop"
-              active-text="开"
-              inactive-text="关"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
               @change="handleMiniWindowOntop"
             ></el-switch>
           </el-form-item>
           <el-form-item
-            label="选择显示的图床"
+            :label="$T('SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD')"
+          >
+            <el-switch
+              v-model="form.autoCopyUrl"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
+              @change="handleAutoCopyUrl"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+          >
+            <div class="el-form-item__custom-label" slot="label">
+             {{ $T('SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD') }}
+            <el-tooltip class="item" effect="dark" :content="$T('BUILTIN_CLIPBOARD_TIPS')" placement="right">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+            </div>
+            <el-switch
+              v-model="form.useBuiltinClipboard"
+              :active-text="$T('SETTINGS_OPEN')"
+              :inactive-text="$T('SETTINGS_CLOSE')"
+              @change="useBuiltinClipboardChange"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            :style="{ marginRight: '-64px' }"
+            :label="$T('CHOOSE_SHOWED_PICBED')"
           >
             <el-checkbox-group
               v-model="form.showPicBedList"
@@ -126,7 +181,7 @@
       </el-col>
     </el-row>
     <el-dialog
-      title="自定义链接格式"
+      :title="$T('SETTINGS_CUSTOM_LINK_FORMAT')"
       :visible.sync="customLinkVisible"
       :modal-append-to-body="false"
     >
@@ -141,10 +196,10 @@
           prop="value"
         >
           <div class="custom-title">
-            用占位符 <b>$url</b> 来表示url的位置
+            {{ $T('SETTINGS_TIPS_PLACEHOLDER_URL') }}
           </div>
           <div class="custom-title">
-            用占位符 <b>$fileName</b> 来表示文件名的位置
+            {{ $T('SETTINGS_TIPS_PLACEHOLDER_FILENAME') }}
           </div>
           <el-input
             class="align-center"
@@ -154,61 +209,80 @@
         </el-form-item>
       </el-form>
       <div>
-        如[$fileName]($url)
+        {{ $T('SETTINGS_TIPS_SUCH_AS') }}[$fileName]($url)
       </div>
       <span slot="footer">
-        <el-button @click="cancelCustomLink" round>取消</el-button>
-        <el-button type="primary" @click="confirmCustomLink" round>确定</el-button>
+        <el-button @click="cancelCustomLink" round>{{ $T('CANCEL') }}</el-button>
+        <el-button type="primary" @click="confirmCustomLink" round>{{ $T('CONFIRM') }}</el-button>
       </span>
     </el-dialog>
     <el-dialog
-      title="设置代理"
+      :title="$T('SETTINGS_SET_PROXY_AND_MIRROR')"
       :visible.sync="proxyVisible"
       :modal-append-to-body="false"
+      width="70%"
     >
       <el-form
         label-position="right"
         :model="customLink"
         ref="customLink"
         :rules="rules"
-        label-width="80px"
+        label-width="120px"
       >
         <el-form-item
-          label="代理地址"
+          :label="$T('SETTINGS_UPLOAD_PROXY')"
         >
           <el-input
             v-model="proxy"
             :autofocus="true"
-            placeholder="例如：http://127.0.0.1:1080"
+            :placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：http://127.0.0.1:1080`"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$T('SETTINGS_PLUGIN_INSTALL_PROXY')"
+        >
+          <el-input
+            v-model="npmProxy"
+            :autofocus="true"
+            :placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：http://127.0.0.1:1080`"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$T('SETTINGS_PLUGIN_INSTALL_MIRROR')"
+        >
+          <el-input
+            v-model="npmRegistry"
+            :autofocus="true"
+            :placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：https://registry.npm.taobao.org/`"
           ></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer">
-        <el-button @click="cancelProxy" round>取消</el-button>
-        <el-button type="primary" @click="confirmProxy" round>确定</el-button>
+        <el-button @click="cancelProxy" round>{{ $T('CANCEL') }}</el-button>
+        <el-button type="primary" @click="confirmProxy" round>{{ $T('CONFIRM') }}</el-button>
       </span>
     </el-dialog>
     <el-dialog
-      title="检查更新"
+      :title="$T('SETTINGS_CHECK_UPDATE')"
       :visible.sync="checkUpdateVisible"
       :modal-append-to-body="false"
     >
       <div>
-        当前版本：{{ version }}
+        {{ $T('SETTINGS_CURRENT_VERSION') }}: {{ version }}
       </div>
       <div>
-        最新版本：{{ latestVersion ? latestVersion : '正在获取中...' }}
+        {{ $T('SETTINGS_NEWEST_VERSION') }}: {{ latestVersion ? latestVersion : `${$T('SETTINGS_GETING')}...` }}
       </div>
       <div v-if="needUpdate">
-        PicGo更新啦，请点击确定打开下载页面
+        {{ $T('SETTINGS_TIPS_HAS_NEW_VERSION') }}
       </div>
       <span slot="footer">
-        <el-button @click="cancelCheckVersion" round>取消</el-button>
-        <el-button type="primary" @click="confirmCheckVersion" round>确定</el-button>
+        <el-button @click="cancelCheckVersion" round>{{ $T('CANCEL') }}</el-button>
+        <el-button type="primary" @click="confirmCheckVersion" round>{{ $T('CONFIRM') }}</el-button>
       </span>
     </el-dialog>
     <el-dialog
-      title="设置日志文件"
+      :title="$T('SETTINGS_SET_LOG_FILE')"
       :visible.sync="logFileVisible"
       :modal-append-to-body="false"
     >
@@ -217,12 +291,12 @@
         label-width="100px"
       >
         <el-form-item
-          label="日志文件"
+          :label="$T('SETTINGS_LOG_FILE')"
         >
-          <el-button type="primary" round size="mini" @click="openFile('picgo.log')">点击打开</el-button>
+          <el-button type="primary" round size="mini" @click="openFile('picgo.log')">{{ $T('SETTINGS_CLICK_TO_OPEN') }}</el-button>
         </el-form-item>
         <el-form-item
-          label="日志记录等级"
+          :label="$T('SETTINGS_LOG_LEVEL')"
         >
           <el-select
             v-model="form.logLevel"
@@ -240,57 +314,57 @@
         </el-form-item>
       </el-form>
       <span slot="footer">
-        <el-button @click="cancelLogLevelSetting" round>取消</el-button>
-        <el-button type="primary" @click="confirmLogLevelSetting" round>确定</el-button>
+        <el-button @click="cancelLogLevelSetting" round>{{ $T('CANCEL') }}</el-button>
+        <el-button type="primary" @click="confirmLogLevelSetting" round>{{ $T('CONFIRM') }}</el-button>
       </span>
     </el-dialog>
     <el-dialog
       class="server-dialog"
       width="60%"
-      title="设置PicGo-Server"
+      :title="$T('SETTINGS_SET_PICGO_SERVER')"
       :visible.sync="serverVisible"
       :modal-append-to-body="false"
     >
       <div class="notice-text">
-        如果你不知道Server的作用，请阅读文档，或者不用修改配置。
+        {{ $T('SETTINGS_TIPS_SERVER_NOTICE') }}
       </div>
       <el-form
         label-position="right"
         label-width="120px"
       >
         <el-form-item
-          label="是否开启Server"
+          :label="$T('SETTINGS_ENABLE_SERVER')"
         >
           <el-switch
             v-model="server.enable"
-            active-text="开"
-            inactive-text="关"
+            :active-text="$T('SETTINGS_OPEN')"
+            :inactive-text="$T('SETTINGS_CLOSE')"
           ></el-switch>
         </el-form-item>
         <template v-if="server.enable">
           <el-form-item
-            label="设置监听地址"
+            :label="$T('SETTINGS_SET_SERVER_HOST')"
           >
             <el-input
               type="input"
               v-model="server.host"
-              placeholder="推荐默认地址:127.0.0.1"
+              :placeholder="$T('SETTINGS_TIP_PLACEHOLDER_HOST')"
             ></el-input>
           </el-form-item>
           <el-form-item
-            label="设置监听端口"
+            :label="$T('SETTINGS_SET_SERVER_PORT')"
           >
             <el-input
               type="number"
               v-model="server.port"
-              placeholder="推荐默认端口:36677"
+              :placeholder="$T('SETTINGS_TIP_PLACEHOLDER_PORT')"
             ></el-input>
           </el-form-item>
         </template>
       </el-form>
       <span slot="footer">
-        <el-button @click="cancelServerSetting" round>取消</el-button>
-        <el-button type="primary" @click="confirmServerSetting" round>确定</el-button>
+        <el-button @click="cancelServerSetting" round>{{ $T('CANCEL') }}</el-button>
+        <el-button type="primary" @click="confirmServerSetting" round>{{ $T('CONFIRM') }}</el-button>
       </span>
     </el-dialog>
   </div>
@@ -298,46 +372,50 @@
 <script lang="ts">
 import keyDetect from '@/utils/key-binding'
 import pkg from 'root/package.json'
-import path from 'path'
+import { IConfig } from 'picgo'
+import { PICGO_OPEN_FILE, OPEN_URL, CHANGE_LANGUAGE } from '#/events/constants'
 import {
-  ipcRenderer,
-  remote
+  ipcRenderer
 } from 'electron'
 import { Component, Vue } from 'vue-property-decorator'
-import db from '#/datastore'
+import { T, languageList } from '~/universal/i18n'
+// import db from '#/datastore'
 const releaseUrl = 'https://api.github.com/repos/Molunerfinn/PicGo/releases/latest'
 const releaseUrlBackup = 'https://cdn.jsdelivr.net/gh/Molunerfinn/PicGo@latest/package.json'
 const downloadUrl = 'https://github.com/Molunerfinn/PicGo/releases/latest'
 const customLinkRule = (rule: string, value: string, callback: (arg0?: Error) => void) => {
   if (!/\$url/.test(value)) {
-    return callback(new Error('必须含有$url'))
+    return callback(new Error(T('TIPS_MUST_CONTAINS_URL')))
   } else {
     return callback()
   }
 }
-let logLevel = db.get('settings.logLevel')
-if (!Array.isArray(logLevel)) {
-  if (logLevel && logLevel.length > 0) {
-    logLevel = [logLevel]
-  } else {
-    logLevel = ['all']
-  }
-}
 
 @Component({
   name: 'picgo-setting'
 })
 export default class extends Vue {
   form: ISettingForm = {
-    updateHelper: db.get('settings.showUpdateTip'),
+    updateHelper: false,
     showPicBedList: [],
-    autoStart: db.get('settings.autoStart') || false,
-    rename: db.get('settings.rename') || false,
-    autoRename: db.get('settings.autoRename') || false,
-    uploadNotification: db.get('settings.uploadNotification') || false,
-    miniWindowOntop: db.get('settings.miniWindowOntop') || false,
-    logLevel
+    autoStart: false,
+    rename: false,
+    autoRename: false,
+    uploadNotification: false,
+    miniWindowOntop: false,
+    logLevel: ['all'],
+    autoCopyUrl: true,
+    checkBetaUpdate: true,
+    useBuiltinClipboard: false,
+    language: 'zh-CN'
   }
+
+  languageList = languageList.map(item => ({
+    label: item,
+    value: item
+  }))
+
+  currentLanguage = 'zh-CN'
   picBed: IPicBedType[] = []
   logFileVisible = false
   keyBindingVisible = false
@@ -346,30 +424,37 @@ export default class extends Vue {
   serverVisible = false
   proxyVisible = false
   customLink = {
-    value: db.get('settings.customLink') || '$url'
+    value: '$url'
   }
+
   shortKey: IShortKeyMap = {
-    upload: db.get('settings.shortKey.upload')
+    upload: ''
   }
-  proxy = db.get('picBed.proxy') || ''
+
+  proxy = ''
+  npmRegistry = ''
+  npmProxy = ''
   rules = {
     value: [
       { validator: customLinkRule, trigger: 'blur' }
     ]
   }
+
   logLevel = {
-    all: '全部-All',
-    success: '成功-Success',
-    error: '错误-Error',
-    info: '普通-Info',
-    warn: '提醒-Warn',
-    none: '不记录日志-None'
+    all: this.$T('SETTINGS_LOG_LEVEL_ALL'),
+    success: this.$T('SETTINGS_LOG_LEVEL_SUCCESS'),
+    error: this.$T('SETTINGS_LOG_LEVEL_ERROR'),
+    info: this.$T('SETTINGS_LOG_LEVEL_INFO'),
+    warn: this.$T('SETTINGS_LOG_LEVEL_WARN'),
+    none: this.$T('SETTINGS_LOG_LEVEL_NONE')
   }
-  server = db.get('settings.server') || {
+
+  server = {
     port: 36677,
     host: '127.0.0.1',
     enable: true
   }
+
   version = pkg.version
   latestVersion = ''
   os = ''
@@ -381,40 +466,87 @@ export default class extends Vue {
       return false
     }
   }
+
   created () {
     this.os = process.platform
     ipcRenderer.send('getPicBeds')
     ipcRenderer.on('getPicBeds', this.getPicBeds)
+    this.initData()
   }
+
+  async initData () {
+    const config = (await this.getConfig<IConfig>())!
+    if (config !== undefined) {
+      const settings = config.settings || {}
+      const picBed = config.picBed
+      this.form.updateHelper = settings.showUpdateTip || false
+      this.form.autoStart = settings.autoStart || false
+      this.form.rename = settings.rename || false
+      this.form.autoRename = settings.autoRename || false
+      this.form.uploadNotification = settings.uploadNotification || false
+      this.form.miniWindowOntop = settings.miniWindowOntop || false
+      this.form.logLevel = this.initLogLevel(settings.logLevel || [])
+      this.form.autoCopyUrl = settings.autoCopy === undefined ? true : settings.autoCopy
+      this.form.checkBetaUpdate = settings.checkBetaUpdate === undefined ? true : settings.checkBetaUpdate
+      this.form.useBuiltinClipboard = settings.useBuiltinClipboard === undefined ? false : settings.useBuiltinClipboard
+      this.form.language = settings.language ?? 'zh-CN'
+      this.currentLanguage = settings.language ?? 'zh-CN'
+      this.customLink.value = settings.customLink || '$url'
+      this.shortKey.upload = settings.shortKey.upload
+      this.proxy = picBed.proxy || ''
+      this.npmRegistry = settings.registry || ''
+      this.npmProxy = settings.proxy || ''
+      this.server = settings.server || {
+        port: 36677,
+        host: '127.0.0.1',
+        enable: true
+      }
+    }
+  }
+
+  initLogLevel (logLevel: string | string[]) {
+    if (!Array.isArray(logLevel)) {
+      if (logLevel && logLevel.length > 0) {
+        logLevel = [logLevel]
+      } else {
+        logLevel = ['all']
+      }
+    }
+    return logLevel
+  }
+
   getPicBeds (event: Event, picBeds: IPicBedType[]) {
     this.picBed = picBeds
     this.form.showPicBedList = this.picBed.map(item => {
       if (item.visible) {
         return item.name
       }
-    }) as string[]
+      return null
+    }).filter(item => item) as string[]
   }
+
   openFile (file: string) {
-    const { app, shell } = remote
-    const STORE_PATH = app.getPath('userData')
-    const FILE = path.join(STORE_PATH, `/${file}`)
-    shell.openItem(FILE)
+    ipcRenderer.send(PICGO_OPEN_FILE, file)
   }
+
   openLogSetting () {
     this.logFileVisible = true
   }
+
   keyDetect (type: string, event: KeyboardEvent) {
     this.shortKey[type] = keyDetect(event).join('+')
   }
-  cancelCustomLink () {
+
+  async cancelCustomLink () {
     this.customLinkVisible = false
-    this.customLink.value = db.get('settings.customLink') || '$url'
+    this.customLink.value = await this.getConfig<string>('settings.customLink') || '$url'
   }
+
   confirmCustomLink () {
     // @ts-ignore
     this.$refs.customLink.validate((valid: boolean) => {
       if (valid) {
-        db.set('settings.customLink', this.customLink.value)
+        this.saveConfig('settings.customLink', this.customLink.value)
         this.customLinkVisible = false
         ipcRenderer.send('updateCustomLink')
       } else {
@@ -422,25 +554,39 @@ export default class extends Vue {
       }
     })
   }
-  cancelProxy () {
+
+  async cancelProxy () {
     this.proxyVisible = false
-    this.proxy = db.get('picBed.proxy') || undefined
+    this.proxy = await this.getConfig<string>('picBed.proxy') || ''
   }
+
   confirmProxy () {
     this.proxyVisible = false
-    this.letPicGoSaveData({
-      'picBed.proxy': this.proxy
+    this.saveConfig({
+      'picBed.proxy': this.proxy,
+      'settings.proxy': this.npmProxy,
+      'settings.registry': this.npmRegistry
     })
-    const successNotification = new Notification('设置代理', {
-      body: '设置成功'
+    const successNotification = new Notification(this.$T('SETTINGS_SET_PROXY_AND_MIRROR'), {
+      body: this.$T('TIPS_SET_SUCCEED')
     })
     successNotification.onclick = () => {
       return true
     }
   }
+
   updateHelperChange (val: boolean) {
-    db.set('settings.showUpdateTip', val)
+    this.saveConfig('settings.showUpdateTip', val)
   }
+
+  checkBetaUpdateChange (val: boolean) {
+    this.saveConfig('settings.checkBetaUpdate', val)
+  }
+
+  useBuiltinClipboardChange (val: boolean) {
+    this.saveConfig('settings.useBuiltinClipboard', val)
+  }
+
   handleShowPicBedListChange (val: string[]) {
     const list = this.picBed.map(item => {
       if (!val.includes(item.name)) {
@@ -450,25 +596,29 @@ export default class extends Vue {
       }
       return item
     })
-    this.letPicGoSaveData({
+    this.saveConfig({
       'picBed.list': list
     })
     ipcRenderer.send('getPicBeds')
   }
+
   handleAutoStartChange (val: boolean) {
-    db.set('settings.autoStart', val)
+    this.saveConfig('settings.autoStart', val)
     ipcRenderer.send('autoStart', val)
   }
+
   handleRename (val: boolean) {
-    this.letPicGoSaveData({
+    this.saveConfig({
       'settings.rename': val
     })
   }
+
   handleAutoRename (val: boolean) {
-    this.letPicGoSaveData({
+    this.saveConfig({
       'settings.autoRename': val
     })
   }
+
   compareVersion2Update (current: string, latest: string) {
     const currentVersion = current.split('.').map(item => parseInt(item))
     const latestVersion = latest.split('.').map(item => parseInt(item))
@@ -483,6 +633,7 @@ export default class extends Vue {
     }
     return false
   }
+
   checkUpdate () {
     this.checkUpdateVisible = true
     this.$http.get(releaseUrl)
@@ -493,44 +644,62 @@ export default class extends Vue {
           .then(res => {
             this.latestVersion = res.data.version
           }).catch(() => {
-            this.latestVersion = '网络错误暂时无法获取'
+            this.latestVersion = this.$T('TIPS_NETWORK_ERROR')
           })
       })
   }
+
   confirmCheckVersion () {
     if (this.needUpdate) {
-      remote.shell.openExternal(downloadUrl)
+      ipcRenderer.send(OPEN_URL, downloadUrl)
     }
     this.checkUpdateVisible = false
   }
+
   cancelCheckVersion () {
     this.checkUpdateVisible = false
   }
+
   handleUploadNotification (val: boolean) {
-    db.set('settings.uploadNotification', val)
+    this.saveConfig({
+      'settings.uploadNotification': val
+    })
   }
+
   handleMiniWindowOntop (val: boolean) {
-    db.set('settings.miniWindowOntop', val)
-    this.$message.info('需要重启生效')
+    this.saveConfig('settings.miniWindowOntop', val)
+    this.$message.info(this.$T('TIPS_NEED_RELOAD'))
   }
+
+  handleAutoCopyUrl (val: boolean) {
+    this.saveConfig('settings.autoCopy', val)
+    const successNotification = new Notification(this.$T('SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD'), {
+      body: this.$T('TIPS_SET_SUCCEED')
+    })
+    successNotification.onclick = () => {
+      return true
+    }
+  }
+
   confirmLogLevelSetting () {
     if (this.form.logLevel.length === 0) {
-      return this.$message.error('请选择日志记录等级')
+      return this.$message.error(this.$T('TIPS_PLEASE_CHOOSE_LOG_LEVEL'))
     }
-    this.letPicGoSaveData({
+    this.saveConfig({
       'settings.logLevel': this.form.logLevel
     })
-    const successNotification = new Notification('设置日志', {
-      body: '设置成功'
+    const successNotification = new Notification(this.$T('SETTINGS_SET_LOG_FILE'), {
+      body: this.$T('TIPS_SET_SUCCEED')
     })
     successNotification.onclick = () => {
       return true
     }
     this.logFileVisible = false
   }
-  cancelLogLevelSetting () {
+
+  async cancelLogLevelSetting () {
     this.logFileVisible = false
-    let logLevel = db.get('settings.logLevel')
+    let logLevel = await this.getConfig<string | string[]>('settings.logLevel')
     if (!Array.isArray(logLevel)) {
       if (logLevel && logLevel.length > 0) {
         logLevel = [logLevel]
@@ -540,12 +709,15 @@ export default class extends Vue {
     }
     this.form.logLevel = logLevel
   }
+
   confirmServerSetting () {
-    this.letPicGoSaveData({
+    // @ts-ignore
+    this.server.port = parseInt(this.server.port, 10)
+    this.saveConfig({
       'settings.server': this.server
     })
-    const successNotification = new Notification('设置PicGo-Server', {
-      body: '设置成功'
+    const successNotification = new Notification(this.$T('SETTINGS_SET_PICGO_SERVER'), {
+      body: this.$T('TIPS_SET_SUCCEED')
     })
     successNotification.onclick = () => {
       return true
@@ -553,18 +725,20 @@ export default class extends Vue {
     this.serverVisible = false
     ipcRenderer.send('updateServer')
   }
-  cancelServerSetting () {
+
+  async cancelServerSetting () {
     this.serverVisible = false
-    this.server = db.get('settings.server') || {
+    this.server = await this.getConfig('settings.server') || {
       port: 36677,
       host: '127.0.0.1',
       enable: true
     }
   }
+
   handleLevelDisabled (val: string) {
-    let currentLevel = val
+    const currentLevel = val
     let flagLevel
-    let result = this.form.logLevel.some(item => {
+    const result = this.form.logLevel.some(item => {
       if (item === 'all' || item === 'none') {
         flagLevel = item
       }
@@ -581,12 +755,24 @@ export default class extends Vue {
     }
     return false
   }
-  goConfigPage () {
-    remote.shell.openExternal('https://picgo.github.io/PicGo-Doc/zh/guide/config.html#picgo设置')
+
+  handleLanguageChange (val: string) {
+    this.$i18n.setLanguage(val)
+    this.forceUpdate()
+    ipcRenderer.send(CHANGE_LANGUAGE, val)
+    this.saveConfig({
+      'settings.language': val
+    })
   }
+
+  goConfigPage () {
+    ipcRenderer.send(OPEN_URL, 'https://picgo.github.io/PicGo-Doc/zh/guide/config.html#picgo设置')
+  }
+
   goShortCutPage () {
     this.$router.push('shortKey')
   }
+
   beforeDestroy () {
     ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
   }
@@ -611,10 +797,28 @@ export default class extends Vue {
     overflow-x hidden
   .setting-list
     .el-form
+      &-item
+        display: flex
+        justify-content space-between
+        padding-top 8px
+        padding-bottom 8px
+        border-bottom 1px solid darken(#eee, 50%)
+        margin-bottom 0
+        &:last-child
+          border-bottom none
+        &::after
+          display none
+        &::before
+          display none
       label
         line-height 32px
         padding-bottom 0
         color #eee
+        flex-basis: 50%
+        flex-shrink: 0
+      .el-form-item__custom-label
+        display flex
+        align-items center
       .el-button-group
         width 100%
         .el-button
@@ -628,9 +832,7 @@ export default class extends Vue {
         &.is-active
           color #409EFF
       .el-icon-question
-        font-size 20px
-        float right
-        margin-top 9px
+        margin-left 4px
         color #eee
         cursor pointer
         transition .2s color ease-in-out

src/renderer/pages/Plugin.vue

@@ -1,19 +1,25 @@
 <template>
   <div id="plugin-view">
     <div class="view-title">
-      插件设置 - <i class="el-icon-goods" @click="goAwesomeList"></i>
+      {{ $T('PLUGIN_SETTINGS') }} -
+      <el-tooltip :content="pluginListToolTip" placement="right">
+        <i class="el-icon-goods" @click="goAwesomeList"></i>
+      </el-tooltip>
+      <el-tooltip :content="importLocalPluginToolTip" placement="left">
+        <i class="el-icon-download" @click="handleImportLocalPlugin"/>
+      </el-tooltip>
     </div>
     <el-row class="handle-bar" :class="{ 'cut-width': pluginList.length > 6 }">
       <el-input
         v-model="searchText"
-        placeholder="搜索npm上的PicGo插件，或者点击上方按钮查看优秀插件列表"
+        :placeholder="$T('PLUGIN_SEARCH_PLACEHOLDER')"
         size="small"
       >
         <i slot="suffix" class="el-input__icon el-icon-close" v-if="searchText" @click="cleanSearch" style="cursor: pointer"></i>
       </el-input>
     </el-row>
     <el-row :gutter="10" class="plugin-list" v-loading="loading">
-      <el-col :span="12" v-for="item in pluginList" :key="item.name">
+      <el-col :span="12" v-for="item in pluginList" :key="item.fullName">
         <div class="plugin-item" :class="{ 'darwin': os === 'darwin' }">
           <div class="cli-only-badge" v-if="!item.gui" title="CLI only">CLI</div>
           <img class="plugin-item__logo" :src="item.logo"
@@ -37,19 +43,19 @@
                 <template v-if="searchText">
                   <template v-if="!item.hasInstall">
                     <span class="config-button install" v-if="!item.ing" @click="installPlugin(item)">
-                      安装
+                      {{ $T('PLUGIN_INSTALL') }}
                     </span>
                     <span v-else-if="item.ing" class="config-button ing">
-                      安装中
+                      {{ $T('PLUGIN_INSTALLING') }}
                     </span>
                   </template>
                   <span v-else class="config-button ing">
-                    已安装
+                    {{ $T('PLUGIN_INSTALLED') }}
                   </span>
                 </template>
                 <template v-else>
                   <span v-if="item.ing" class="config-button ing">
-                    进行中
+                    {{ $T('PLUGIN_DOING_SOMETHING') }}
                   </span>
                   <template v-else>
                     <i
@@ -71,12 +77,14 @@
       </el-col>
     </el-row>
     <el-row v-show="needReload" class="reload-mask" :class="{ 'cut-width': pluginList.length > 6 }">
-      <el-button type="primary" @click="reloadApp" size="mini" round>重启以生效</el-button>
+      <el-button type="primary" @click="reloadApp" size="mini" round>{{ $T('TIPS_NEED_RELOAD') }}</el-button>
     </el-row>
     <el-dialog
       :visible.sync="dialogVisible"
       :modal-append-to-body="false"
-      :title="`配置${configName}`"
+      :title="$T('CONFIG_THING', {
+        c: configName
+      })"
       width="70%"
     >
       <config-form
@@ -87,8 +95,8 @@
       >
       </config-form>
       <span slot="footer">
-        <el-button @click="dialogVisible = false" round>取消</el-button>
-        <el-button type="primary" @click="handleConfirmConfig" round>确定</el-button>
+        <el-button @click="dialogVisible = false" round>{{ $T('CANCEL') }}</el-button>
+        <el-button type="primary" @click="handleConfirmConfig" round>{{ $T('CONFIRM') }}</el-button>
       </span>
     </el-dialog>
   </div>
@@ -103,10 +111,17 @@ import ConfigForm from '@/components/ConfigForm.vue'
 import { debounce } from 'lodash'
 import {
   ipcRenderer,
-  remote,
   IpcRendererEvent
 } from 'electron'
-const { Menu } = remote
+import { handleStreamlinePluginName } from '~/universal/utils/common'
+import {
+  OPEN_URL,
+  RELOAD_APP,
+  PICGO_CONFIG_PLUGIN,
+  PICGO_HANDLE_PLUGIN_ING,
+  PICGO_TOGGLE_PLUGIN,
+  SHOW_PLUGIN_PAGE_MENU
+} from '#/events/constants'
 
 @Component({
   name: 'plugin',
@@ -125,6 +140,7 @@ export default class extends Vue {
   pluginNameList: string[] = []
   loading = true
   needReload = false
+  pluginListToolTip = this.$T('PLUGIN_LIST')importLocalPluginToolTip = this.$T('PLUGIN_IMPORT_LOCAL')
   id = ''
   os = ''
   defaultLogo: string = 'this.src="https://cdn.jsdelivr.net/gh/Molunerfinn/PicGo@dev/public/roundLogo.png"'
@@ -135,6 +151,7 @@ export default class extends Vue {
         ? `picgo-plugin-${this.searchText}`
         : this.searchText
   }
+
   @Watch('npmSearchText')
   onNpmSearchTextChange (val: string) {
     if (val) {
@@ -145,6 +162,7 @@ export default class extends Vue {
       this.getPluginList()
     }
   }
+
   @Watch('dialogVisible')
   onDialogVisible (val: boolean) {
     if (val) {
@@ -155,26 +173,33 @@ export default class extends Vue {
       document.querySelector('.main-content.el-row').style.zIndex = 10
     }
   }
-  created () {
+
+  async created () {
     this.os = process.platform
-    ipcRenderer.on('pluginList', (evt: IpcRendererEvent, list: IPicGoPlugin[]) => {
-      this.pluginList = list
-      this.pluginNameList = list.map(item => item.name)
+    ipcRenderer.on('hideLoading', () => {
       this.loading = false
     })
-    ipcRenderer.on('installSuccess', (evt: IpcRendererEvent, plugin: string) => {
+    ipcRenderer.on('pluginList', (evt: IpcRendererEvent, list: IPicGoPlugin[]) => {
+      this.pluginList = list
+      this.pluginNameList = list.map(item => item.fullName)
+      this.loading = false
+    })
+    ipcRenderer.on('installPlugin', (evt: IpcRendererEvent, { success, body }: {
+      success: boolean,
+      body: string
+    }) => {
       this.loading = false
       this.pluginList.forEach(item => {
-        if (item.name === plugin) {
+        if (item.fullName === body) {
           item.ing = false
-          item.hasInstall = true
+          item.hasInstall = success
         }
       })
     })
     ipcRenderer.on('updateSuccess', (evt: IpcRendererEvent, plugin: string) => {
       this.loading = false
       this.pluginList.forEach(item => {
-        if (item.name === plugin) {
+        if (item.fullName === plugin) {
           item.ing = false
           item.hasInstall = true
         }
@@ -186,7 +211,7 @@ export default class extends Vue {
     ipcRenderer.on('uninstallSuccess', (evt: IpcRendererEvent, plugin: string) => {
       this.loading = false
       this.pluginList = this.pluginList.filter(item => {
-        if (item.name === plugin) { // restore Uploader & Transformer after uninstalling
+        if (item.fullName === plugin) { // restore Uploader & Transformer after uninstalling
           if (item.config.transformer.name) {
             this.handleRestoreState('transformer', item.config.transformer.name)
           }
@@ -195,191 +220,131 @@ export default class extends Vue {
           }
           this.getPicBeds()
         }
-        return item.name !== plugin
+        return item.fullName !== plugin
       })
       this.pluginNameList = this.pluginNameList.filter(item => item !== plugin)
     })
+    ipcRenderer.on(PICGO_CONFIG_PLUGIN, (evt: IpcRendererEvent, currentType: string, configName: string, config: any) => {
+      this.currentType = currentType
+      this.configName = configName
+      this.dialogVisible = true
+      this.config = config
+    })
+    ipcRenderer.on(PICGO_HANDLE_PLUGIN_ING, (evt: IpcRendererEvent, fullName: string) => {
+      this.pluginList.forEach(item => {
+        if (item.fullName === fullName || (item.name === fullName)) {
+          item.ing = true
+        }
+      })
+      this.loading = true
+    })
+    ipcRenderer.on(PICGO_TOGGLE_PLUGIN, (evt: IpcRendererEvent, fullName: string, enabled: boolean) => {
+      const plugin = this.pluginList.find(item => item.fullName === fullName)
+      if (plugin) {
+        plugin.enabled = enabled
+        this.getPicBeds()
+        this.needReload = true
+      }
+    })
     this.getPluginList()
     this.getSearchResult = debounce(this.getSearchResult, 50)
-    this.needReload = this.$db.get('needReload')
+    this.needReload = await this.getConfig<boolean>('needReload') || false
   }
-  buildContextMenu (plugin: IPicGoPlugin) {
-    const _this = this
-    let menu = [{
-      label: '启用插件',
-      enabled: !plugin.enabled,
-      click () {
-        _this.letPicGoSaveData({
-          [`picgoPlugins.picgo-plugin-${plugin.name}`]: true
-        })
-        plugin.enabled = true
-        _this.getPicBeds()
-      }
-    }, {
-      label: '禁用插件',
-      enabled: plugin.enabled,
-      click () {
-        _this.letPicGoSaveData({
-          [`picgoPlugins.picgo-plugin-${plugin.name}`]: false
-        })
-        plugin.enabled = false
-        _this.getPicBeds()
-        if (plugin.config.transformer.name) {
-          _this.handleRestoreState('transformer', plugin.config.transformer.name)
-        }
-        if (plugin.config.uploader.name) {
-          _this.handleRestoreState('uploader', plugin.config.uploader.name)
-        }
-      }
-    }, {
-      label: '卸载插件',
-      click () {
-        _this.uninstallPlugin(plugin.name)
-      }
-    }, {
-      label: '更新插件',
-      click () {
-        _this.updatePlugin(plugin.name)
-      }
-    }]
-    for (let i in plugin.config) {
-      if (plugin.config[i].config.length > 0) {
-        const obj = {
-          label: `配置${i} - ${plugin.config[i].name}`,
-          click () {
-            _this.currentType = i
-            _this.configName = plugin.config[i].name
-            _this.dialogVisible = true
-            _this.config = plugin.config[i].config
-          }
-        }
-        menu.push(obj)
-      }
-    }
 
-    // handle transformer
-    if (plugin.config.transformer.name) {
-      let currentTransformer = this.$db.get('picBed.transformer') || 'path'
-      let pluginTransformer = plugin.config.transformer.name
-      const obj = {
-        label: `${currentTransformer === pluginTransformer ? '禁用' : '启用'}transformer - ${plugin.config.transformer.name}`,
-        click () {
-          _this.toggleTransformer(plugin.config.transformer.name)
-        }
-      }
-      menu.push(obj)
-    }
-
-    // plugin custom menus
-    if (plugin.guiMenu) {
-      menu.push({
-        // @ts-ignore
-        type: 'separator'
-      })
-      for (let i of plugin.guiMenu) {
-        menu.push({
-          label: i.label,
-          click () {
-            ipcRenderer.send('pluginActions', plugin.name, i.label)
-          }
-        })
-      }
-    }
-
-    this.menu = Menu.buildFromTemplate(menu)
-    this.menu.popup()
+  async buildContextMenu (plugin: IPicGoPlugin) {
+    ipcRenderer.send(SHOW_PLUGIN_PAGE_MENU, plugin)
   }
+
   getPluginList () {
     ipcRenderer.send('getPluginList')
   }
+
   getPicBeds () {
     ipcRenderer.send('getPicBeds')
   }
+
   installPlugin (item: IPicGoPlugin) {
     if (!item.gui) {
-      this.$confirm('该插件未对可视化界面进行优化, 是否继续安装?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm(this.$T('TIPS_PLUGIN_NOT_GUI_IMPLEMENT'), this.$T('TIPS_NOTICE'), {
+        confirmButtonText: this.$T('CONFIRM'),
+        cancelButtonText: this.$T('CANCEL'),
         type: 'warning'
       }).then(() => {
         item.ing = true
-        ipcRenderer.send('installPlugin', item.name)
+        ipcRenderer.send('installPlugin', item.fullName)
       }).catch(() => {
         console.log('Install canceled')
       })
     } else {
       item.ing = true
-      ipcRenderer.send('installPlugin', item.name)
+      ipcRenderer.send('installPlugin', item.fullName)
     }
   }
+
   uninstallPlugin (val: string) {
     this.pluginList.forEach(item => {
       if (item.name === val) {
         item.ing = true
       }
     })
+    this.loading = true
     ipcRenderer.send('uninstallPlugin', val)
   }
+
   updatePlugin (val: string) {
     this.pluginList.forEach(item => {
-      if (item.name === val) {
+      if (item.fullName === val) {
         item.ing = true
       }
     })
+    this.loading = true
     ipcRenderer.send('updatePlugin', val)
   }
+
   reloadApp () {
-    remote.app.relaunch()
-    remote.app.exit(0)
+    ipcRenderer.send(RELOAD_APP)
   }
-  handleReload () {
-    this.$db.set('needReload', true)
+
+  async handleReload () {
+    this.saveConfig({
+      needReload: true
+    })
     this.needReload = true
-    const successNotification = new Notification('更新成功', {
-      body: '请点击此通知重启应用以生效'
+    const successNotification = new Notification(this.$T('PLUGIN_UPDATE_SUCCEED'), {
+      body: this.$T('TIPS_NEED_RELOAD')
     })
     successNotification.onclick = () => {
       this.reloadApp()
     }
   }
+
   cleanSearch () {
     this.searchText = ''
   }
-  toggleTransformer (transformer: string) {
-    let currentTransformer = this.$db.get('picBed.transformer') || 'path'
-    if (currentTransformer === transformer) {
-      this.letPicGoSaveData({
-        'picBed.transformer': 'path'
-      })
-    } else {
-      this.letPicGoSaveData({
-        'picBed.transformer': transformer
-      })
-    }
-  }
+
   async handleConfirmConfig () {
     // @ts-ignore
     const result = await this.$refs.configForm.validate()
     if (result !== false) {
       switch (this.currentType) {
         case 'plugin':
-          this.letPicGoSaveData({
-            [`picgo-plugin-${this.configName}`]: result
+          this.saveConfig({
+            [`${this.configName}`]: result
           })
           break
         case 'uploader':
-          this.letPicGoSaveData({
+          this.saveConfig({
             [`picBed.${this.configName}`]: result
           })
           break
         case 'transformer':
-          this.letPicGoSaveData({
+          this.saveConfig({
             [`transformer.${this.configName}`]: result
           })
           break
       }
-      const successNotification = new Notification('设置结果', {
-        body: '设置成功'
+      const successNotification = new Notification(this.$T('SETTINGS_RESULT'), {
+        body: this.$T('TIPS_SET_SUCCEED')
       })
       successNotification.onclick = () => {
         return true
@@ -388,6 +353,7 @@ export default class extends Vue {
       this.getPluginList()
     }
   }
+
   getSearchResult (val: string) {
     // this.$http.get(`https://api.npms.io/v2/search?q=${val}`)
     this.$http.get(`https://registry.npmjs.com/-/v1/search?text=${val}`)
@@ -406,8 +372,9 @@ export default class extends Vue {
         this.loading = false
       })
   }
+
   handleSearchResult (item: INPMSearchResultObject) {
-    const name = item.package.name.replace(/picgo-plugin-/, '')
+    const name = handleStreamlinePluginName(item.package.name)
     let gui = false
     if (item.package.keywords && item.package.keywords.length > 0) {
       if (item.package.keywords.includes('picgo-gui-plugin')) {
@@ -416,52 +383,65 @@ export default class extends Vue {
     }
     return {
       name: name,
+      fullName: item.package.name,
       author: item.package.author.name,
       description: item.package.description,
       logo: `https://cdn.jsdelivr.net/npm/${item.package.name}/logo.png`,
       config: {},
       homepage: item.package.links ? item.package.links.homepage : '',
-      hasInstall: this.pluginNameList.some(plugin => plugin === item.package.name.replace(/picgo-plugin-/, '')),
+      hasInstall: this.pluginNameList.some(plugin => plugin === item.package.name),
       version: item.package.version,
       gui,
       ing: false // installing or uninstalling
     }
   }
+
   // restore Uploader & Transformer
-  handleRestoreState (item: string, name: string) {
+  async handleRestoreState (item: string, name: string) {
     if (item === 'uploader') {
-      const current = this.$db.get('picBed.current')
+      const current = await this.getConfig('picBed.current')
       if (current === name) {
-        this.letPicGoSaveData({
-          'picBed.current': 'smms'
+        this.saveConfig({
+          'picBed.current': 'smms',
+          'picBed.uploader': 'smms'
         })
       }
     }
     if (item === 'transformer') {
-      const current = this.$db.get('picBed.transformer')
+      const current = await this.getConfig('picBed.transformer')
       if (current === name) {
-        this.letPicGoSaveData({
+        this.saveConfig({
           'picBed.transformer': 'path'
         })
       }
     }
   }
+
   openHomepage (url: string) {
     if (url) {
-      remote.shell.openExternal(url)
+      ipcRenderer.send(OPEN_URL, url)
     }
   }
+
   goAwesomeList () {
-    remote.shell.openExternal('https://github.com/PicGo/Awesome-PicGo')
+    ipcRenderer.send(OPEN_URL, 'https://github.com/PicGo/Awesome-PicGo')
   }
-  letPicGoSaveData (data: IObj) {
+
+  saveConfig (data: IObj) {
     ipcRenderer.send('picgoSaveData', data)
   }
+
+  handleImportLocalPlugin () {
+    ipcRenderer.send('importLocalPlugin')
+    this.loading = true
+  }
+
   beforeDestroy () {
     ipcRenderer.removeAllListeners('pluginList')
-    ipcRenderer.removeAllListeners('installSuccess')
+    ipcRenderer.removeAllListeners('installPlugin')
     ipcRenderer.removeAllListeners('uninstallSuccess')
     ipcRenderer.removeAllListeners('updateSuccess')
+    ipcRenderer.removeAllListeners('hideLoading')
   }
 }
 </script>
@@ -491,6 +471,7 @@ $darwinBg = #172426
     font-size 20px
     text-align center
     margin 10px auto
+    position relative
     i.el-icon-goods
       font-size 20px
       vertical-align middle
@@ -498,6 +479,16 @@ $darwinBg = #172426
       transition color .2s ease-in-out
       &:hover
         color #49B1F5
+    i.el-icon-download
+      position absolute
+      right 0
+      top 8px
+      font-size 20px
+      vertical-align middle
+      cursor pointer
+      transition color .2s ease-in-out
+      &:hover
+        color #49B1F5
   .handle-bar
     margin-bottom 20px
     &.cut-width

src/renderer/pages/RenamePage.vue

@@ -4,7 +4,7 @@
       @submit.native.prevent
     >
       <el-form-item
-        label="文件改名"
+        :label="$T('FILE_RENAME')"
       >
         <el-input
           v-model="fileName"
@@ -15,13 +15,14 @@
     </el-form>
     <el-row>
       <div class="pull-right">
-        <el-button @click="cancel" round size="mini">取消</el-button>
-        <el-button type="primary" @click="confirmName" round size="mini">确定</el-button>
+        <el-button @click="cancel" round size="mini">{{ $T('CANCEL') }}</el-button>
+        <el-button type="primary" @click="confirmName" round size="mini">{{ $T('CONFIRM') }}</el-button>
       </div>
     </el-row>
   </div>
 </template>
 <script lang="ts">
+import { RENAME_FILE_NAME } from '#/events/constants'
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/mixin'
 import {
@@ -34,19 +35,25 @@ import {
 })
 export default class extends Vue {
   fileName: string = ''
+  originName: string = ''
   id: string | null = null
   created () {
-    ipcRenderer.on('rename', (event: IpcRendererEvent, name: string, id: string) => {
-      this.fileName = name
+    ipcRenderer.on(RENAME_FILE_NAME, (event: IpcRendererEvent, newName: string, originName: string, id: string) => {
+      this.fileName = newName
+      this.originName = originName
       this.id = id
     })
   }
+
   confirmName () {
-    ipcRenderer.send(`rename${this.id}`, this.fileName)
+    ipcRenderer.send(`${RENAME_FILE_NAME}${this.id}`, this.fileName)
   }
+
   cancel () {
-    ipcRenderer.send(`rename${this.id}`, null)
+    // if cancel, use origin file name
+    ipcRenderer.send(`${RENAME_FILE_NAME}${this.id}`, this.originName)
   }
+
   beforeDestroy () {
     ipcRenderer.removeAllListeners('rename')
   }

src/renderer/pages/ShortKey.vue

@@ -1,16 +1,19 @@
 <template>
   <div id="shortcut-page">
     <div class="view-title">
-      快捷键设置
+      {{ $T('SETTINGS_SET_SHORTCUT') }}
     </div>
     <el-row>
       <el-col :span="20" :offset="2">
         <el-table
+          class="shortcut-page-table-border"
           :data="list"
           size="mini"
+          header-cell-class-name="shortcut-page-table-border"
+          cell-class-name="shortcut-page-table-border"
         >
           <el-table-column
-            label="快捷键名称"
+            :label="$T('SHORTCUT_NAME')"
           >
             <template slot-scope="scope">
               {{ scope.row.label ? scope.row.label : scope.row.name }}
@@ -18,24 +21,24 @@
           </el-table-column>
           <el-table-column
             width="160px"
-            label="快捷键绑定"
+            :label="$T('SHORTCUT_BIND')"
             prop="key"
           >
           </el-table-column>
           <el-table-column
-            label="状态"
+            :label="$T('SHORTCUT_STATUS')"
           >
             <template slot-scope="scope">
               <el-tag
                 size="mini"
                 :type="scope.row.enable ? 'success' : 'danger'"
               >
-                {{ scope.row.enable ? '已启用' : '已禁用' }}
+                {{ scope.row.enable ? $T('SHORTCUT_ENABLED') : $T('SHORTCUT_DISABLED') }}
               </el-tag>
             </template>
           </el-table-column>
           <el-table-column
-            label="来源"
+            :label="$T('SHORTCUT_SOURCE')"
             width="100px"
           >
             <template slot-scope="scope">
@@ -43,7 +46,7 @@
             </template>
           </el-table-column>
           <el-table-column
-            label="操作"
+            :label="$T('SHORTCUT_HANDLE')"
           >
             <template slot-scope="scope">
               <el-button
@@ -53,14 +56,14 @@
                   disabled: scope.row.enable
                 }"
                 type="text">
-                {{ scope.row.enable ? '禁用' : '启用' }}
+                {{ scope.row.enable ? $T('SHORTCUT_DISABLE') : $T('SHORTCUT_ENABLE') }}
               </el-button>
               <el-button
                 class="edit"
                 size="mini"
                 @click="openKeyBindingDialog(scope.row, scope.$index)"
                 type="text">
-                编辑
+                {{ $T('SHORTCUT_EDIT') }}
               </el-button>
             </template>
           </el-table-column>
@@ -68,7 +71,7 @@
       </el-col>
     </el-row>
     <el-dialog
-      title="修改上传快捷键"
+      :title="$T('SHORTCUT_CHANGE_UPLOAD')"
       :visible.sync="keyBindingVisible"
       :modal-append-to-body="false"
     >
@@ -76,9 +79,7 @@
         label-position="top"
         label-width="80px"
       >
-        <el-form-item
-          label="快捷上传"
-        >
+        <el-form-item>
           <el-input
             class="align-center"
             @keydown.native.prevent="keyDetect($event)"
@@ -88,8 +89,12 @@
         </el-form-item>
       </el-form>
       <span slot="footer">
-        <el-button @click="cancelKeyBinding" round>取消</el-button>
-        <el-button type="primary" @click="confirmKeyBinding" round>确定</el-button>
+        <el-button @click="cancelKeyBinding" round>
+          {{ $T('CANCEL') }}
+        </el-button>
+        <el-button type="primary" @click="confirmKeyBinding" round>
+          {{ $T('CONFIRM') }}
+        </el-button>
       </span>
     </el-dialog>
   </div>
@@ -98,6 +103,7 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import keyDetect from '@/utils/key-binding'
 import { ipcRenderer, IpcRendererEvent } from 'electron'
+import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
 
 @Component({
   name: 'shortkey-page'
@@ -108,8 +114,8 @@ export default class extends Vue {
   command = ''
   shortKey = ''
   currentIndex = 0
-  created () {
-    const shortKeyConfig = this.$db.get('settings.shortKey') as IShortKeyConfigs
+  async created () {
+    const shortKeyConfig = (await this.getConfig<IShortKeyConfigs>('settings.shortKey'))!
     this.list = Object.keys(shortKeyConfig).map(item => {
       return {
         ...shortKeyConfig[item],
@@ -117,40 +123,45 @@ export default class extends Vue {
       }
     })
   }
+
   @Watch('keyBindingVisible')
   onKeyBindingVisibleChange (val: boolean) {
-    ipcRenderer.send('toggleShortKeyModifiedMode', val)
+    ipcRenderer.send(TOGGLE_SHORTKEY_MODIFIED_MODE, val)
   }
+
   calcOrigin (item: string) {
     const [origin] = item.split(':')
     return origin
   }
+
   calcOriginShowName (item: string) {
     return item.replace('picgo-plugin-', '')
   }
+
   toggleEnable (item: IShortKeyConfig) {
     const status = !item.enable
     item.enable = status
-    // this.$db.set(`settings.shortKey.${item.name}.enable`, status)
     ipcRenderer.send('bindOrUnbindShortKey', item, item.from)
   }
+
   keyDetect (event: KeyboardEvent) {
     this.shortKey = keyDetect(event).join('+')
   }
-  openKeyBindingDialog (config: IShortKeyConfig, index: number) {
+
+  async openKeyBindingDialog (config: IShortKeyConfig, index: number) {
     this.command = `${config.from}:${config.name}`
-    this.shortKey = this.$db.get(`settings.shortKey.${this.command}.key`)
+    this.shortKey = await this.getConfig(`settings.shortKey.${this.command}.key`) || ''
     this.currentIndex = index
     this.keyBindingVisible = true
   }
-  cancelKeyBinding () {
+
+  async cancelKeyBinding () {
     this.keyBindingVisible = false
-    this.shortKey = this.$db.get(`settings.shortKey.${this.command}.key`)
+    this.shortKey = await this.getConfig<string>(`settings.shortKey.${this.command}.key`) || ''
   }
-  confirmKeyBinding () {
-    const oldKey = this.$db.get(`settings.shortKey.${this.command}.key`)
-    // this.$db.set(`settings.shortKey.${this.command}.key`, this.shortKey)
-    // const newKey = this.$db.get(`settings.shortKey.${this.command}`)
+
+  async confirmKeyBinding () {
+    const oldKey = await this.getConfig<string>(`settings.shortKey.${this.command}.key`)
     const config = Object.assign({}, this.list[this.currentIndex])
     config.key = this.shortKey
     ipcRenderer.send('updateShortKey', config, oldKey, config.from)
@@ -161,13 +172,16 @@ export default class extends Vue {
       }
     })
   }
+
   beforeDestroy () {
-    ipcRenderer.send('toggleShortKeyModifiedMode', false)
+    ipcRenderer.send(TOGGLE_SHORTKEY_MODIFIED_MODE, false)
   }
 }
 </script>
 <style lang='stylus'>
 #shortcut-page
+  .shortcut-page-table-border
+    border-color darken(#eee, 50%)
   .el-dialog__body
     padding 10px 20px
     .el-form-item
@@ -180,6 +194,8 @@ export default class extends Vue {
   .el-table
     background-color: transparent
     color #ddd
+    &::before
+      background-color darken(#eee, 50%)
     thead
       color #bbb
     th,tr

src/renderer/pages/TrayPage.vue

@@ -3,7 +3,7 @@
     <!-- <div class="header-arrow"></div> -->
     <div class="content">
       <div class="wait-upload-img" v-if="clipboardFiles.length > 0">
-        <div class="list-title">等待上传</div>
+        <div class="list-title">{{ $T('WAIT_TO_UPLOAD') }}</div>
         <div v-for="(item, index) in clipboardFiles" :key="index" class="img-list">
           <div
             class="upload-img__container"
@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class="uploaded-img">
-        <div class="list-title">已上传</div>
+        <div class="list-title">{{ $T('ALREADY_UPLOAD') }}</div>
         <div v-for="item in files" :key="item.imgUrl" class="img-list">
           <div class="upload-img__container" @click="copyTheLink(item)">
             <img :src="item.imgUrl" class="upload-img">
@@ -28,41 +28,46 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/mixin'
-import pasteTemplate from '#/utils/pasteTemplate'
-import { ipcRenderer, clipboard } from 'electron'
+import { ipcRenderer } from 'electron'
+import { IResult } from '@picgo/store/dist/types'
+import { PASTE_TEXT } from '#/events/constants'
+
 @Component({
   name: 'tray-page',
   mixins: [mixin]
 })
 export default class extends Vue {
-  files = []
+  files: IResult<ImgInfo>[] = []
   notification = {
-    title: '复制链接成功',
+    title: this.$T('COPY_LINK_SUCCEED'),
     body: '',
     icon: ''
   }
+
   clipboardFiles: ImgInfo[] = []
   uploadFlag = false
   get reverseList () {
     return this.files.slice().reverse()
   }
-  getData () {
-    // @ts-ignore
-    this.files = this.$db.read().get('uploaded').slice().reverse().slice(0, 5).value()
+
+  async getData () {
+    this.files = (await this.$$db.get<ImgInfo>({ orderBy: 'desc', limit: 5 })).data
   }
-  copyTheLink (item: ImgInfo) {
+
+  async copyTheLink (item: ImgInfo) {
     this.notification.body = item.imgUrl!
     this.notification.icon = item.imgUrl!
     const myNotification = new Notification(this.notification.title, this.notification)
-    const pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
-    clipboard.writeText(pasteTemplate(pasteStyle, item))
+    ipcRenderer.invoke(PASTE_TEXT, item)
     myNotification.onclick = () => {
       return true
     }
   }
+
   calcHeight (width: number, height: number): number {
     return height * 160 / width
   }
+
   disableDragFile () {
     window.addEventListener('dragover', (e) => {
       e = e || event
@@ -73,6 +78,7 @@ export default class extends Vue {
       e.preventDefault()
     }, false)
   }
+
   uploadClipboardFiles () {
     if (this.uploadFlag) {
       return
@@ -80,29 +86,30 @@ export default class extends Vue {
     this.uploadFlag = true
     ipcRenderer.send('uploadClipboardFiles')
   }
+
   mounted () {
     this.disableDragFile()
     this.getData()
-    ipcRenderer.on('dragFiles', (event: Event, files: string[]) => {
-      files.forEach(item => {
-        this.$db.insert('uploaded', item)
-      })
-      // @ts-ignore
-      this.files = this.$db.read().get('uploaded').slice().reverse().slice(0, 5).value()
+    ipcRenderer.on('dragFiles', async (event: Event, files: string[]) => {
+      for (let i = 0; i < files.length; i++) {
+        const item = files[i]
+        await this.$$db.insert(item)
+      }
+      this.files = (await this.$$db.get<ImgInfo>({ orderBy: 'desc', limit: 5 })).data
     })
     ipcRenderer.on('clipboardFiles', (event: Event, files: ImgInfo[]) => {
       this.clipboardFiles = files
     })
-    ipcRenderer.on('uploadFiles', (event: Event) => {
-      // @ts-ignore
-      this.files = this.$db.read().get('uploaded').slice().reverse().slice(0, 5).value()
+    ipcRenderer.on('uploadFiles', async () => {
+      this.files = (await this.$$db.get<ImgInfo>({ orderBy: 'desc', limit: 5 })).data
       console.log(this.files)
       this.uploadFlag = false
     })
-    ipcRenderer.on('updateFiles', (event: Event) => {
+    ipcRenderer.on('updateFiles', () => {
       this.getData()
     })
   }
+
   beforeDestroy () {
     ipcRenderer.removeAllListeners('dragFiles')
     ipcRenderer.removeAllListeners('clipboardFiles')

src/renderer/pages/Upload.vue

@@ -3,7 +3,7 @@
     <el-row :gutter="16">
       <el-col :span="20" :offset="2">
         <div class="view-title">
-          图片上传 - {{ picBedName }} <i class="el-icon-caret-bottom" @click="handleChangePicBed"></i>
+          {{ $T('PICTURE_UPLOAD') }} - {{ picBedName }} <i class="el-icon-caret-bottom" @click="handleChangePicBed"></i>
         </div>
         <div
           id="upload-area"
@@ -15,7 +15,7 @@
           <div id="upload-dragger" @click="openUplodWindow">
             <i class="el-icon-upload"></i>
             <div class="upload-dragger__text">
-              将文件拖到此处，或 <span>点击上传</span>
+              {{ $T('DRAG_FILE_TO_HERE') }} <span>{{ $T('CLICK_TO_UPLOAD') }}</span>
             </div>
             <input type="file" id="file-uploader" @change="onChange" multiple>
           </div>
@@ -30,7 +30,7 @@
         <div class="paste-style">
           <div class="el-col-16">
             <div class="paste-style__text">
-              链接格式
+              {{ $T('LINK_FORMAT') }}
             </div>
             <el-radio-group v-model="pasteStyle" size="mini"
               @change="handlePasteStyleChange"
@@ -41,14 +41,15 @@
               <el-radio-button label="HTML"></el-radio-button>
               <el-radio-button label="URL"></el-radio-button>
               <el-radio-button label="UBB"></el-radio-button>
-              <el-radio-button label="Custom" title="自定义"></el-radio-button>
+              <el-radio-button label="Custom" :title="$T('CUSTOM')"></el-radio-button>
             </el-radio-group>
           </div>
           <div class="el-col-8">
             <div class="paste-style__text">
-              快捷上传
+              {{ $T('QUICK_UPLOAD') }}
             </div>
-            <el-button type="primary" round size="mini" @click="uploadClipboardFiles" class="paste-upload">剪贴板图片上传</el-button>
+            <el-button type="primary" round size="mini" @click="uploadClipboardFiles" class="quick-upload" style="width: 50%">{{ $T('CLIPBOARD_PICTURE') }}</el-button>
+            <el-button type="primary" round size="mini" @click="uploadURLFiles" class="quick-upload" style="width: 46%; margin-left: 6px">URL</el-button>
           </div>
         </div>
       </el-col>
@@ -59,10 +60,16 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import {
   ipcRenderer,
-  IpcRendererEvent,
-  remote
+  IpcRendererEvent
 } from 'electron'
-const { Menu } = remote
+import {
+  SHOW_INPUT_BOX,
+  SHOW_INPUT_BOX_RESPONSE,
+  SHOW_UPLOAD_PAGE_MENU
+} from '~/universal/events/constants'
+import {
+  isUrl
+} from '~/universal/utils/common'
 @Component({
   name: 'upload'
 })
@@ -74,7 +81,6 @@ export default class extends Vue {
   pasteStyle = ''
   picBed: IPicBedType[] = []
   picBedName = ''
-  menu: Electron.Menu | null= null
   mounted () {
     ipcRenderer.on('uploadProgress', (event: IpcRendererEvent, progress: number) => {
       if (progress !== -1) {
@@ -92,7 +98,9 @@ export default class extends Vue {
     })
     ipcRenderer.send('getPicBeds')
     ipcRenderer.on('getPicBeds', this.getPicBeds)
+    this.$bus.$on(SHOW_INPUT_BOX_RESPONSE, this.handleInputBoxValue)
   }
+
   @Watch('progress')
   onProgressChange (val: number) {
     if (val === 100) {
@@ -105,26 +113,60 @@ export default class extends Vue {
       }, 1200)
     }
   }
+
   beforeDestroy () {
+    this.$bus.$off(SHOW_INPUT_BOX_RESPONSE)
     ipcRenderer.removeAllListeners('uploadProgress')
     ipcRenderer.removeAllListeners('syncPicBed')
     ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
   }
+
   onDrop (e: DragEvent) {
     this.dragover = false
-    this.ipcSendFiles(e.dataTransfer!.files)
+    const items = e.dataTransfer!.items
+    if (items.length === 2 && items[0].type === 'text/uri-list') {
+      this.handleURLDrag(items, e.dataTransfer!)
+    } else if (items[0].type === 'text/plain') {
+      const str = e.dataTransfer!.getData(items[0].type)
+      if (isUrl(str)) {
+        ipcRenderer.send('uploadChoosedFiles', [{ path: str }])
+      } else {
+        this.$message.error(this.$T('TIPS_DRAG_VALID_PICTURE_OR_URL'))
+      }
+    } else {
+      this.ipcSendFiles(e.dataTransfer!.files)
+    }
   }
+
+  handleURLDrag (items: DataTransferItemList, dataTransfer: DataTransfer) {
+    // text/html
+    // Use this data to get a more precise URL
+    const urlString = dataTransfer.getData(items[1].type)
+    const urlMatch = urlString.match(/<img.*src="(.*?)"/)
+    if (urlMatch) {
+      ipcRenderer.send('uploadChoosedFiles', [
+        {
+          path: urlMatch[1]
+        }
+      ])
+    } else {
+      this.$message.error(this.$T('TIPS_DRAG_VALID_PICTURE_OR_URL'))
+    }
+  }
+
   openUplodWindow () {
     document.getElementById('file-uploader')!.click()
   }
+
   onChange (e: any) {
     this.ipcSendFiles(e.target.files);
     (document.getElementById('file-uploader') as HTMLInputElement).value = ''
   }
+
   ipcSendFiles (files: FileList) {
-    let sendFiles: IFileWithPath[] = []
-    Array.from(files).forEach((item, index) => {
-      let obj = {
+    const sendFiles: IFileWithPath[] = []
+    Array.from(files).forEach((item) => {
+      const obj = {
         name: item.name,
         path: item.path
       }
@@ -132,49 +174,57 @@ export default class extends Vue {
     })
     ipcRenderer.send('uploadChoosedFiles', sendFiles)
   }
-  getPasteStyle () {
-    this.pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
+
+  async getPasteStyle () {
+    this.pasteStyle = await this.getConfig('settings.pasteStyle') || 'markdown'
   }
+
   handlePasteStyleChange (val: string) {
-    this.$db.set('settings.pasteStyle', val)
+    this.saveConfig({
+      'settings.pasteStyle': val
+    })
   }
+
   uploadClipboardFiles () {
     ipcRenderer.send('uploadClipboardFilesFromUploadPage')
   }
-  getDefaultPicBed () {
-    const current: string = this.$db.get('picBed.current')
+
+  async uploadURLFiles () {
+    const str = await navigator.clipboard.readText()
+    this.$bus.$emit(SHOW_INPUT_BOX, {
+      value: isUrl(str) ? str : '',
+      title: this.$T('TIPS_INPUT_URL'),
+      placeholder: this.$T('TIPS_HTTP_PREFIX')
+    })
+  }
+
+  handleInputBoxValue (val: string) {
+    if (val === '') return false
+    if (isUrl(val)) {
+      ipcRenderer.send('uploadChoosedFiles', [{
+        path: val
+      }])
+    } else {
+      this.$message.error(this.$T('TIPS_INPUT_VALID_URL'))
+    }
+  }
+
+  async getDefaultPicBed () {
+    const currentPicBed = await this.getConfig<string>('picBed.current')
     this.picBed.forEach(item => {
-      if (item.type === current) {
+      if (item.type === currentPicBed) {
         this.picBedName = item.name
       }
     })
   }
+
   getPicBeds (event: Event, picBeds: IPicBedType[]) {
     this.picBed = picBeds
     this.getDefaultPicBed()
   }
-  handleChangePicBed () {
-    this.buildMenu()
-    // this.menu.popup(remote.getCurrentWindow())
-    this.menu!.popup()
-  }
-  buildMenu () {
-    const _this = this
-    const submenu = this.picBed.filter(item => item.visible).map(item => {
-      return {
-        label: item.name,
-        type: 'radio',
-        checked: this.$db.get('picBed.current') === item.type,
-        click () {
-          _this.letPicGoSaveData({
-            'picBed.current': item.type
-          })
-          ipcRenderer.send('syncPicBed')
-        }
-      }
-    })
-    // @ts-ignore
-    this.menu = Menu.buildFromTemplate(submenu)
+
+  async handleChangePicBed () {
+    ipcRenderer.send(SHOW_UPLOAD_PAGE_MENU)
   }
 }
 </script>
@@ -239,8 +289,6 @@ export default class extends Vue {
     .el-radio-button__inner
       border-left none
       border-radius 0 14px 14px 0
-  .paste-upload
-    width 100%
   .el-icon-caret-bottom
     cursor pointer
 </style>

src/renderer/pages/picbeds/AliYun.vue

@@ -72,6 +72,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/ConfirmButtonMixin'
+import { trimValues } from '@/utils/common'
 @Component({
   name: 'aliyun',
   mixins: [mixin]
@@ -86,18 +87,20 @@ export default class extends Vue {
     customUrl: '',
     options: ''
   }
-  created () {
-    const config = this.$db.get('picBed.aliyun') as IAliYunConfig
+
+  async created () {
+    const config = await this.getConfig<IAliYunConfig>('picBed.aliyun')
     if (config) {
       this.form = Object.assign({}, config)
     }
   }
+
   confirm () {
     // @ts-ignore
     this.$refs.aliyun.validate((valid) => {
       if (valid) {
-        this.letPicGoSaveData({
-          'picBed.aliyun': this.form
+        this.saveConfig({
+          'picBed.aliyun': trimValues(this.form)
         })
         const successNotification = new window.Notification('设置结果', {
           body: '设置成功'

src/renderer/pages/picbeds/GitHub.vue

@@ -25,7 +25,7 @@
             :rules="{
               required: true, message: '分支名不能为空', trigger: 'blur'
             }">
-            <el-input v-model="form.branch" @keyup.native.enter="confirm" placeholder="例如：master"></el-input>
+            <el-input v-model="form.branch" @keyup.native.enter="confirm" placeholder="例如：main"></el-input>
           </el-form-item>
           <el-form-item
             label="设定Token"
@@ -59,6 +59,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/ConfirmButtonMixin'
+import { trimValues } from '@/utils/common'
 @Component({
   name: 'github',
   mixins: [mixin]
@@ -71,18 +72,20 @@ export default class extends Vue {
     customUrl: '',
     branch: ''
   }
-  created () {
-    const config = this.$db.get('picBed.github') as IGitHubConfig
+
+  async created () {
+    const config = await this.getConfig<IGitHubConfig>('picBed.github')
     if (config) {
       this.form = Object.assign({}, config)
     }
   }
+
   confirm () {
     // @ts-ignore
     this.$refs.github.validate((valid) => {
       if (valid) {
-        this.letPicGoSaveData({
-          'picBed.github': this.form
+        this.saveConfig({
+          'picBed.github': trimValues(this.form)
         })
         const successNotification = new Notification('设置结果', {
           body: '设置成功'

src/renderer/pages/picbeds/Imgur.vue

@@ -39,6 +39,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/ConfirmButtonMixin'
+import { trimValues } from '@/utils/common'
 @Component({
   name: 'imgur',
   mixins: [mixin]
@@ -48,18 +49,20 @@ export default class extends Vue {
     clientId: '',
     proxy: ''
   }
-  created () {
-    const config = this.$db.get('picBed.imgur') as IImgurConfig
+
+  async created () {
+    const config = await this.getConfig<IImgurConfig>('picBed.imgur')
     if (config) {
       this.form = Object.assign({}, config)
     }
   }
+
   confirm () {
     // @ts-ignore
     this.$refs.imgur.validate((valid) => {
       if (valid) {
-        this.letPicGoSaveData({
-          'picBed.imgur': this.form
+        this.saveConfig({
+          'picBed.imgur': trimValues(this.form)
         })
         const successNotification = new Notification('设置结果', {
           body: '设置成功'

src/renderer/pages/picbeds/Others.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="others-view">
-    <el-row :gutter="16">
+    <el-row :gutter="16" class="setting-list">
       <el-col :span="16" :offset="4">
         <div class="view-title">
-          {{ picBedName }}设置
+          {{ picBedName }}{{ $T('SETTINGS') }}
         </div>
         <config-form
           v-if="config.length > 0"
@@ -14,14 +14,14 @@
         >
           <el-form-item>
             <el-button-group>
-              <el-button type="primary" @click="handleConfirm" round>确定</el-button>
-              <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type">设为默认图床</el-button>
+              <el-button type="primary" @click="handleConfirm" round>{{ $T('CONFIRM') }}</el-button>
+              <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type">{{ $T('SETTINGS_SET_DEFAULT_PICBED') }}</el-button>
             </el-button-group>
           </el-form-item>
         </config-form>
         <div v-else class="single">
-          <div class="notice">暂无配置项</div>
-          <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type" size="mini">设为默认图床</el-button>
+          <div class="notice">{{ $T('SETTINGS_NOT_CONFIG_OPTIONS') }}</div>
+          <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type" size="mini">{{ $T('SETTINGS_SET_DEFAULT_PICBED') }}</el-button>
         </div>
       </el-col>
     </el-row>
@@ -35,6 +35,7 @@ import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
+import { trimValues } from '@/utils/common'
 
 @Component({
   name: 'OtherPicBed',
@@ -52,38 +53,43 @@ export default class extends Vue {
     ipcRenderer.send('getPicBedConfig', this.$route.params.type)
     ipcRenderer.on('getPicBedConfig', this.getPicBeds)
   }
+
   async handleConfirm () {
     // @ts-ignore
     const result = await this.$refs.configForm.validate()
     if (result !== false) {
-      this.letPicGoSaveData({
-        [`picBed.${this.type}`]: result
+      this.saveConfig({
+        [`picBed.${this.type}`]: trimValues(result)
       })
-      const successNotification = new Notification('设置结果', {
-        body: '设置成功'
+      const successNotification = new Notification(this.$T('SETTINGS_RESULT'), {
+        body: this.$T('TIPS_SET_SUCCEED')
       })
       successNotification.onclick = () => {
         return true
       }
     }
   }
+
   setDefaultPicBed (type: string) {
-    this.letPicGoSaveData({
-      'picBed.current': type
+    this.saveConfig({
+      'picBed.current': type,
+      'picBed.uploader': type
     })
     // @ts-ignore 来自mixin的数据
     this.defaultPicBed = type
-    const successNotification = new Notification('设置默认图床', {
-      body: '设置成功'
+    const successNotification = new Notification(this.$T('SETTINGS_DEFAULT_PICBED'), {
+      body: this.$T('TIPS_SET_SUCCEED')
     })
     successNotification.onclick = () => {
       return true
     }
   }
+
   getPicBeds (event: IpcRendererEvent, config: any[], name: string) {
     this.config = config
     this.picBedName = name
   }
+
   beforeDestroy () {
     ipcRenderer.removeListener('getPicBedConfig', this.getPicBeds)
   }
@@ -91,6 +97,10 @@ export default class extends Vue {
 </script>
 <style lang='stylus'>
 #others-view
+  .setting-list
+    height 425px
+    overflow-y auto
+    overflow-x hidden
   .el-form
     label
       line-height 22px

src/renderer/pages/picbeds/Qiniu.vue

@@ -17,7 +17,7 @@
             :rules="{
               required: true, message: 'AccessKey不能为空', trigger: 'blur'
             }">
-            <el-input v-model="form.accessKey" placeholder="AccessKey" @keyup.native.enter="confirm('weiboForm')"></el-input>
+            <el-input v-model="form.accessKey" placeholder="AccessKey" @keyup.native.enter="confirm"></el-input>
           </el-form-item>
           <el-form-item
             label="设定SecretKey"
@@ -74,6 +74,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/ConfirmButtonMixin'
+import { trimValues } from '@/utils/common'
 @Component({
   name: 'qiniu',
   mixins: [mixin]
@@ -88,18 +89,20 @@ export default class extends Vue {
     options: '',
     path: ''
   }
-  created () {
-    const config = this.$db.get('picBed.qiniu') as IQiniuConfig
+
+  async created () {
+    const config = await this.getConfig<IQiniuConfig>('picBed.qiniu')
     if (config) {
       this.form = Object.assign({}, config)
     }
   }
+
   confirm () {
     // @ts-ignore
     this.$refs.qiniu.validate((valid) => {
       if (valid) {
-        this.letPicGoSaveData({
-          'picBed.qiniu': this.form
+        this.saveConfig({
+          'picBed.qiniu': trimValues(this.form)
         })
         const successNotification = new Notification('设置结果', {
           body: '设置成功'

src/renderer/pages/picbeds/SMMS.vue

@@ -5,12 +5,27 @@
         <div class="view-title">
           SM.MS设置
         </div>
-        <div class="content">
-          感谢SM.MS提供的优质服务
-        </div>
-        <div style="text-align: center; margin-top: 20px;">
-          <el-button type="success" @click="confirm" round :disabled="defaultPicBed === 'smms'" size="mini">设为默认图床</el-button>
-        </div>
+        <el-form
+          ref="smms"
+          label-position="right"
+          label-width="120px"
+          :model="form"
+          size="mini">
+          <el-form-item
+            label="设定Token"
+            prop="token"
+            :rules="{
+              required: true, message: 'Token不能为空', trigger: 'blur'
+            }">
+            <el-input v-model="form.token" type="password" placeholder="token" @keyup.native.enter="confirm"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button-group>
+              <el-button type="primary" @click="confirm" round>确定</el-button>
+              <el-button type="success" @click="setDefaultPicBed('smms')" round :disabled="defaultPicBed === 'smms'">设为默认图床</el-button>
+            </el-button-group>
+          </el-form-item>
+        </el-form>
       </el-col>
     </el-row>
   </div>
@@ -18,30 +33,66 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/ConfirmButtonMixin'
+import { trimValues } from '@/utils/common'
 @Component({
   name: 'smms',
   mixins: [mixin]
 })
 export default class extends Vue {
-  confirm () {
-    this.letPicGoSaveData({
-      'picBed.smms': true
-    })
-    // @ts-ignore 来自mixin
-    this.setDefaultPicBed('smms')
-    const successNotification = new window.Notification('设置结果', {
-      body: '设置成功'
-    })
-    successNotification.onclick = () => {
-      return true
+  form: ISMMSConfig = {
+    token: ''
+  }
+
+  async created () {
+    const config = await this.getConfig<string | boolean>('picBed.smms.token')
+    if (typeof config !== 'boolean') {
+      this.form.token = config || ''
     }
   }
+
+  confirm () {
+    // @ts-ignore
+    this.$refs.smms.validate((valid) => {
+      if (valid) {
+        this.saveConfig({
+          'picBed.smms': trimValues(this.form)
+        })
+        const successNotification = new window.Notification('设置结果', {
+          body: '设置成功'
+        })
+        successNotification.onclick = () => {
+          return true
+        }
+      } else {
+        return false
+      }
+    })
+  }
 }
 </script>
 <style lang='stylus'>
 #smms-view
-  .content
-    text-align center
-    font-size 14px
-    color #eee
+  .el-form
+    label
+      line-height 22px
+      padding-bottom 0
+      color #eee
+    .el-input__inner
+      border-radius 19px
+    &-item
+      margin-bottom 10.5px
+  .el-radio-group
+    width 100%
+    label
+      width 25%
+    .el-radio-button__inner
+      width 100%
+  .el-radio-button:first-child
+    .el-radio-button__inner
+      border-left none
+      border-radius 14px 0 0 14px
+  .el-radio-button:last-child
+    .el-radio-button__inner
+      border-left none
+      border-radius 0 14px 14px 0
 </style>

src/renderer/pages/picbeds/TcYun.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tcyun-view">
-    <el-row :gutter="16">
+    <el-row :gutter="16" class="setting-list-scroll">
       <el-col :span="16" :offset="4">
         <div class="view-title">
           腾讯云COS设置
@@ -30,7 +30,7 @@
             :rules="{
               required: true, message: 'SecretId不能为空', trigger: 'blur'
             }">
-            <el-input v-model="form.secretId" placeholder="SecretId" @keyup.native.enter="confirm('weiboForm')"></el-input>
+            <el-input v-model="form.secretId" placeholder="SecretId" @keyup.native.enter="confirm"></el-input>
           </el-form-item>
           <el-form-item
             label="设定SecretKey"
@@ -74,6 +74,11 @@
             >
             <el-input v-model="form.customUrl" @keyup.native.enter="confirm" placeholder="例如https://xxxx.com"></el-input>
           </el-form-item>
+          <el-form-item
+            label="设定网址后缀"
+            >
+            <el-input v-model="form.options" @keyup.native.enter="confirm" placeholder="例如?imageMogr2"></el-input>
+          </el-form-item>
           <el-form-item>
             <el-button-group>
               <el-button type="primary" @click="confirm" round>确定</el-button>
@@ -86,15 +91,18 @@
   </div>
 </template>
 <script lang="ts">
+import { ipcRenderer } from 'electron'
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/ConfirmButtonMixin'
-import { remote } from 'electron'
+import { OPEN_URL } from '#/events/constants'
+import { ITcyunConfig } from 'picgo/dist/types'
+import { trimValues } from '@/utils/common'
 @Component({
   name: 'tcyun',
   mixins: [mixin]
 })
 export default class extends Vue {
-  form: ITcYunConfig = {
+  form: ITcyunConfig = {
     secretId: '',
     secretKey: '',
     bucket: '',
@@ -102,20 +110,23 @@ export default class extends Vue {
     area: '',
     path: '',
     customUrl: '',
-    version: 'v4'
+    version: 'v5',
+    options: ''
   }
-  created () {
-    const config = this.$db.get('picBed.tcyun') as ITcYunConfig
+
+  async created () {
+    const config = await this.getConfig<ITcyunConfig>('picBed.tcyun')
     if (config) {
       this.form = Object.assign({}, config)
     }
   }
+
   confirm () {
     // @ts-ignore
     this.$refs.tcyun.validate((valid) => {
       if (valid) {
-        this.letPicGoSaveData({
-          'picBed.tcyun': this.form
+        this.saveConfig({
+          'picBed.tcyun': trimValues(this.form)
         })
         const successNotification = new window.Notification('设置结果', {
           body: '设置成功'
@@ -128,8 +139,9 @@ export default class extends Vue {
       }
     })
   }
+
   openWiki () {
-    remote.shell.openExternal('https://github.com/Molunerfinn/PicGo/wiki/%E8%AF%A6%E7%BB%86%E7%AA%97%E5%8F%A3%E7%9A%84%E4%BD%BF%E7%94%A8#腾讯云cos')
+    ipcRenderer.send(OPEN_URL, 'https://picgo.github.io/PicGo-Doc/zh/guide/config.html#%E8%85%BE%E8%AE%AF%E4%BA%91cos')
   }
 }
 </script>

src/renderer/pages/picbeds/UpYun.vue

@@ -67,30 +67,35 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import mixin from '@/utils/ConfirmButtonMixin'
+import { IUpyunConfig } from 'picgo/dist/types'
+import { trimValues } from '@/utils/common'
 @Component({
   name: 'upyun',
   mixins: [mixin]
 })
 export default class extends Vue {
-  form: IUpYunConfig = {
+  form: IUpyunConfig = {
     bucket: '',
     operator: '',
     password: '',
     options: '',
+    url: '',
     path: ''
   }
-  created () {
-    const config = this.$db.get('picBed.upyun') as IUpYunConfig
+
+  async created () {
+    const config = await this.getConfig<IUpyunConfig>('picBed.upyun')
     if (config) {
       this.form = Object.assign({}, config)
     }
   }
+
   confirm () {
     // @ts-ignore
     this.$refs.tcyun.validate((valid) => {
       if (valid) {
-        this.letPicGoSaveData({
-          'picBed.upyun': this.form
+        this.saveConfig({
+          'picBed.upyun': trimValues(this.form)
         })
         const successNotification = new Notification('设置结果', {
           body: '设置成功'

src/renderer/pages/picbeds/Weibo.vue

@@ -1,153 +0,0 @@
-<template>
-  <div id="weibo-view">
-    <el-row :gutter="16">
-      <el-col :span="16" :offset="4">
-        <div class="view-title">
-          微博图床设置[已停止支持]
-        </div>
-        <el-form
-          ref="weiboForm"
-          label-position="right"
-          label-width="120px"
-          size="small"
-          :model="form">
-          <el-form-item
-            label="设定用户名"
-            prop="username"
-            :rules="{
-              required: !chooseCookie, message: '用户名不能为空', trigger: 'blur'
-            }">
-            <el-input v-model="form.username" placeholder="用户名" @keyup.native.enter="confirm('weiboForm')" :disabled="chooseCookie"></el-input>
-          </el-form-item>
-          <el-form-item
-            label="设定密码"
-            prop="password"
-            :rules="{required: !chooseCookie,messsage: '密码不能为空',trigger: 'blur'}">
-            <el-input v-model="form.password" type="password" @keyup.native.enter="confirm('weiboForm')" placeholder="密码" :disabled="chooseCookie"></el-input>
-          </el-form-item>
-          <el-form-item
-            label="使用Cookie上传"
-          >
-            <el-switch
-              v-model="chooseCookie"
-              active-text="cookie模式"
-              @change="handleSwitchChange"
-            ></el-switch>
-            <i class="el-icon-question" @click="openWiki"></i>
-          </el-form-item>
-          <el-form-item
-            label="设定Cookie"
-            prop="cookie"
-            :rules="{
-              required: chooseCookie, message: '密码不能为空', trigger: 'blur'
-            }">
-            <el-input v-model="form.cookie" @keyup.native.enter="confirm('weiboForm')" placeholder="Cookie" :disabled="!chooseCookie"></el-input>
-          </el-form-item>
-          <el-form-item label="* 图片质量">
-            <el-radio-group v-model="quality">
-              <el-radio label="thumbnail">缩略图</el-radio>
-              <el-radio label="mw690">中等尺寸</el-radio>
-              <el-radio label="large">原图</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item>
-            <el-button-group>
-              <el-button type="primary" @click="confirm('weiboForm')" round>确定</el-button>
-              <el-button type="success" @click="setDefaultPicBed('weibo')" round :disabled="defaultPicBed === 'weibo'">设为默认图床</el-button>
-            </el-button-group>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script>
-import mixin from '@/utils/ConfirmButtonMixin'
-export default {
-  name: 'weibo',
-  mixins: [mixin],
-  data () {
-    return {
-      form: {
-        username: '',
-        password: '',
-        cookie: ''
-      },
-      chooseCookie: false,
-      quality: 'large'
-    }
-  },
-  created () {
-    const config = this.$db.get('picBed.weibo')
-    if (config) {
-      this.form.username = config.username
-      this.form.password = config.password
-      this.quality = config.quality || 'large'
-      this.form.cookie = config.cookie
-      this.chooseCookie = config.chooseCookie
-    }
-  },
-  methods: {
-    confirm (formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.letPicGoSaveData({
-            'picBed.weibo': {
-              username: this.form.username,
-              password: this.form.password,
-              quality: this.quality,
-              cookie: this.form.cookie,
-              chooseCookie: this.chooseCookie
-            }
-          })
-          const successNotification = new window.Notification('设置结果', {
-            body: '设置成功'
-          })
-          successNotification.onclick = () => {
-            return true
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    handleSwitchChange () {
-      this.$refs['weiboForm'].resetFields()
-    },
-    openWiki () {
-      this.$electron.remote.shell.openExternal('https://picgo.github.io/PicGo-Doc/zh/guide/config.html#微博图床')
-    }
-  }
-}
-</script>
-<style lang='stylus'>
-.el-message
-  left 60%
-#weibo-view
-  .el-form
-    label
-      line-height 22px
-      padding-bottom 0
-      color #eee
-    .el-button-group
-      width 100%
-      .el-button
-        width 50%
-    .el-input__inner
-      border-radius 19px
-    .el-radio-group
-      margin-left 25px
-    .el-switch__label
-      color #eee
-      &.is-active
-        color #409EFF
-    .el-icon-question
-      font-size 20px
-      float right
-      margin-top 9px
-      color #eee
-      cursor pointer
-      transition .2s color ease-in-out
-      &:hover
-        color #409EFF
-</style>

src/renderer/router/index.ts

@@ -22,20 +22,15 @@ export default new Router({
       component: () => import(/* webpackChunkName: "MiniPage" */ '@/pages/MiniPage.vue')
     },
     {
-      path: '/setting',
-      name: 'setting-page',
-      component: () => import(/* webpackChunkName: "SettingPage" */ '@/layouts/SettingPage.vue'),
+      path: '/main-page',
+      name: 'main-page',
+      component: () => import(/* webpackChunkName: "SettingPage" */ '@/layouts/Main.vue'),
       children: [
         {
           path: 'upload',
           component: () => import(/* webpackChunkName: "Upload" */ '@/pages/Upload.vue'),
           name: 'upload'
         },
-        {
-          path: 'weibo',
-          component: () => import(/* webpackChunkName: "Weibo" */ '@/pages/picbeds/Weibo.vue'),
-          name: 'weibo'
-        },
         {
           path: 'qiniu',
           component: () => import(/* webpackChunkName: "Qiniu" */ '@/pages/picbeds/Qiniu.vue'),

src/renderer/utils/ConfirmButtonMixin.ts

@@ -1,15 +1,23 @@
 import { Component, Vue } from 'vue-property-decorator'
-import { ipcRenderer } from 'electron'
+import { IConfig } from 'picgo'
 @Component
 export default class extends Vue {
-  defaultPicBed = this.$db.get('picBed.current')
+  defaultPicBed = 'smms'
+  async created () {
+    const config = await this.getConfig<IConfig>()
+    if (config) {
+      this.defaultPicBed = config?.picBed?.uploader || config?.picBed?.current || 'smms'
+    }
+  }
+
   setDefaultPicBed (type: string) {
-    this.letPicGoSaveData({
-      'picBed.current': type
+    this.saveConfig({
+      'picBed.current': type,
+      'picBed.uploader': type
     })
     this.defaultPicBed = type
-    const successNotification = new Notification('设置默认图床', {
-      body: '设置成功'
+    const successNotification = new Notification(this.$T('SETTINGS_DEFAULT_PICBED'), {
+      body: this.$T('TIPS_SET_SUCCEED')
     })
     successNotification.onclick = () => {
       return true

src/renderer/utils/analytics.ts

@@ -0,0 +1,23 @@
+/* eslint-disable camelcase */
+import {
+  TALKING_DATA_APPID, TALKING_DATA_EVENT
+} from '~/universal/events/constants'
+import pkg from 'root/package.json'
+import { ipcRenderer } from 'electron'
+import { handleTalkingDataEvent } from './common'
+const { version } = pkg
+
+export const initTalkingData = () => {
+  setTimeout(() => {
+    const talkingDataScript = document.createElement('script')
+
+    talkingDataScript.src = `http://sdk.talkingdata.com/app/h5/v1?appid=${TALKING_DATA_APPID}&vn=${version}&vc=${version}`
+
+    const head = document.getElementsByTagName('head')[0]
+    head.appendChild(talkingDataScript)
+  }, 0)
+}
+
+ipcRenderer.on(TALKING_DATA_EVENT, (_, data: ITalkingDataOptions) => {
+  handleTalkingDataEvent(data)
+})

src/renderer/utils/beforeOpen.ts

@@ -0,0 +1,10 @@
+import { i18n } from '~/universal/i18n'
+
+export const handleURLParams = () => {
+  const url = new URL(location.href)
+  const search = new URLSearchParams(url.search)
+  if (search.has('lang')) {
+    const lang = search.get('lang') || 'zh-CN'
+    i18n.setLanguage(lang)
+  }
+}

src/renderer/utils/bus.ts

@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()

src/renderer/utils/common.ts

@@ -0,0 +1,18 @@
+const isDevelopment = process.env.NODE_ENV !== 'production'
+/* eslint-disable camelcase */
+export const handleTalkingDataEvent = (data: ITalkingDataOptions) => {
+  const { EventId, Label = '', MapKv = {} } = data
+  MapKv.from = window.location.href
+  window.TDAPP.onEvent(EventId, Label, MapKv)
+  if (isDevelopment) {
+    console.log('talkingData', data)
+  }
+}
+
+export const trimValues = (obj: IStringKeyMap) => {
+  const newObj = {} as IStringKeyMap
+  Object.keys(obj).forEach(key => {
+    newObj[key] = typeof obj[key] === 'string' ? obj[key].trim() : obj[key]
+  })
+  return newObj
+}

src/renderer/utils/db.ts

@@ -0,0 +1,59 @@
+import { IObject, IResult, IGetResult, IFilter } from '@picgo/store/dist/types'
+import { ipcRenderer, IpcRendererEvent } from 'electron'
+import { uuid } from 'uuidv4'
+import {
+  PICGO_GET_DB,
+  PICGO_INSERT_DB,
+  PICGO_INSERT_MANY_DB,
+  PICGO_UPDATE_BY_ID_DB,
+  PICGO_GET_BY_ID_DB,
+  PICGO_REMOVE_BY_ID_DB
+} from '#/events/constants'
+import { IGalleryDB } from '#/types/extra-vue'
+export class GalleryDB implements IGalleryDB {
+  async get<T> (filter?: IFilter): Promise<IGetResult<T>> {
+    const res = await this.msgHandler<IGetResult<T>>(PICGO_GET_DB, filter)
+    return res
+  }
+
+  async insert<T> (value: T): Promise<IResult<T>> {
+    const res = await this.msgHandler<IResult<T>>(PICGO_INSERT_DB, value)
+    return res
+  }
+
+  async insertMany<T> (value: T[]): Promise<IResult<T>[]> {
+    const res = await this.msgHandler<IResult<T>[]>(PICGO_INSERT_MANY_DB, value)
+    return res
+  }
+
+  async updateById (id: string, value: IObject): Promise<boolean> {
+    const res = await this.msgHandler<boolean>(PICGO_UPDATE_BY_ID_DB, id, value)
+    return res
+  }
+
+  async getById<T> (id: string): Promise<IResult<T> | undefined> {
+    const res = await this.msgHandler<IResult<T> | undefined>(PICGO_GET_BY_ID_DB, id)
+    return res
+  }
+
+  async removeById (id: string): Promise<void> {
+    const res = await this.msgHandler<void>(PICGO_REMOVE_BY_ID_DB, id)
+    return res
+  }
+
+  private msgHandler<T> (method: string, ...args: any[]): Promise<T> {
+    return new Promise((resolve) => {
+      const callbackId = uuid()
+      const callback = (event: IpcRendererEvent, data: T, returnCallbackId: string) => {
+        if (returnCallbackId === callbackId) {
+          resolve(data)
+          ipcRenderer.removeListener(method, callback)
+        }
+      }
+      ipcRenderer.on(method, callback)
+      ipcRenderer.send(method, ...args, callbackId)
+    })
+  }
+}
+
+export default new GalleryDB()

src/renderer/utils/key-binding.ts

@@ -14,16 +14,16 @@ const isSpecialKey = (keyCode: number) => {
 
 const keyDetect = (event: KeyboardEvent) => {
   const meta = process.platform === 'darwin' ? 'Cmd' : 'Super'
-  let specialKey = {
+  const specialKey = {
     Ctrl: event.ctrlKey,
     Shift: event.shiftKey,
     Alt: event.altKey,
     [meta]: event.metaKey
   }
 
-  let pressKey = []
+  const pressKey = []
 
-  for (let i in specialKey) {
+  for (const i in specialKey) {
     if (specialKey[i]) {
       pressKey.push(i)
     }

src/renderer/utils/mainMixin.ts

@@ -1,8 +1,40 @@
 import { Component, Vue } from 'vue-property-decorator'
-import { ipcRenderer } from 'electron'
+import { ipcRenderer, IpcRendererEvent } from 'electron'
+import { PICGO_SAVE_CONFIG, PICGO_GET_CONFIG, FORCE_UPDATE } from '#/events/constants'
+import { uuid } from 'uuidv4'
 @Component
 export default class extends Vue {
-  letPicGoSaveData (data: IObj) {
-    ipcRenderer.send('picgoSaveData', data)
+  created () {
+    this.$bus.$on(FORCE_UPDATE, () => {
+      this.$forceUpdate()
+    })
+  }
+
+  // support string key + value or object config
+  saveConfig (config: IObj | string, value?: any) {
+    if (typeof config === 'string') {
+      config = {
+        [config]: value
+      }
+    }
+    ipcRenderer.send(PICGO_SAVE_CONFIG, config)
+  }
+
+  getConfig<T> (key?: string): Promise<T | undefined> {
+    return new Promise((resolve) => {
+      const callbackId = uuid()
+      const callback = (event: IpcRendererEvent, config: T | undefined, returnCallbackId: string) => {
+        if (returnCallbackId === callbackId) {
+          resolve(config)
+          ipcRenderer.removeListener(PICGO_GET_CONFIG, callback)
+        }
+      }
+      ipcRenderer.on(PICGO_GET_CONFIG, callback)
+      ipcRenderer.send(PICGO_GET_CONFIG, key, callbackId)
+    })
+  }
+
+  forceUpdate () {
+    this.$bus.$emit(FORCE_UPDATE)
   }
 }