🔨 Refactor: setting-page ui

package.json

@@ -35,7 +35,7 @@
     ]
   },
   "dependencies": {
-    "@picgo/i18n": "^0.0.4",
+    "@picgo/i18n": "^1.0.0",
     "@picgo/store": "^1.0.3",
     "axios": "^0.19.0",
     "core-js": "^3.3.2",

src/main/events/ipcList.ts

@@ -177,7 +177,7 @@ export default {
     })
     ipcMain.on(SHOW_MAIN_PAGE_MENU, () => {
       const window = windowManager.get(IWindowList.SETTING_WINDOW)!
-      const menu = buildMainPageMenu()
+      const menu = buildMainPageMenu(window)
       menu.popup({
         window
       })

src/main/events/remotes/menu.ts

@@ -9,7 +9,7 @@ import {
 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 } from '~/universal/events/constants'
+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'
@@ -87,7 +87,7 @@ const buildMiniPageMenu = () => {
   return Menu.buildFromTemplate(template)
 }
 
-const buildMainPageMenu = () => {
+const buildMainPageMenu = (win: BrowserWindow) => {
   const template = [
     {
       label: T('ABOUT'),
@@ -102,14 +102,19 @@ const buildMainPageMenu = () => {
     {
       label: T('SPONSOR_PICGO'),
       click () {
-        // TODO: show donation
+        win?.webContents?.send(SHOW_MAIN_PAGE_DONATION)
       }
     },
     {
       label: T('SHOW_PICBED_QRCODE'),
       click () {
-        // TODO: qrcode
+        win?.webContents?.send(SHOW_MAIN_PAGE_QRCODE)
-        // _this.qrcodeVisible = true
+      }
+    },
+    {
+      label: T('SHOW_DEVTOOLS'),
+      click () {
+        win?.webContents?.openDevTools()
       }
     },
     {

src/renderer/layouts/Main.vue

@@ -158,7 +158,9 @@ import InputBoxDialog from '@/components/InputBoxDialog.vue'
 import {
   MINIMIZE_WINDOW,
   CLOSE_WINDOW,
-  SHOW_MAIN_PAGE_MENU
+  SHOW_MAIN_PAGE_MENU,
+  SHOW_MAIN_PAGE_QRCODE,
+  SHOW_MAIN_PAGE_DONATION
 } from '~/universal/events/constants'
 @Component({
   name: 'main-page',
@@ -184,6 +186,12 @@ export default class extends Vue {
     ipcRenderer.send('getPicBeds')
     ipcRenderer.on('getPicBeds', this.getPicBeds)
     this.handleGetPicPeds()
+    ipcRenderer.on(SHOW_MAIN_PAGE_QRCODE, () => {
+      this.qrcodeVisible = true
+    })
+    ipcRenderer.on(SHOW_MAIN_PAGE_DONATION, () => {
+      this.visible = true
+    })
   }
 
   @Watch('choosedPicBedForQRCode')

src/renderer/pages/PicGoSetting.vue

@@ -4,11 +4,11 @@
       {{ $T('PICGO_SETTINGS') }} - <i class="el-icon-document" @click="goConfigPage"></i>
     </div>
     <el-row class="setting-list">
-      <el-col :span="16" :offset="4">
+      <el-col :span="20" :offset="2">
         <el-row>
         <el-form
-          label-width="160px"
+          label-position="left"
-          label-position="right"
+          label-width="10"
           size="small"
         >
           <el-form-item
@@ -139,6 +139,7 @@
             ></el-switch>
           </el-form-item>
           <el-form-item
+            :style="{ marginRight: '-64px' }"
             :label="$T('CHOOSE_SHOWED_PICBED')"
           >
             <el-checkbox-group
@@ -756,10 +757,25 @@ 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-button-group
         width 100%
         .el-button

src/renderer/pages/ShortKey.vue

@@ -6,8 +6,11 @@
     <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="$T('SHORTCUT_NAME')"
@@ -177,6 +180,8 @@ export default class extends Vue {
 </script>
 <style lang='stylus'>
 #shortcut-page
+  .shortcut-page-table-border
+    border-color darken(#eee, 50%)
   .el-dialog__body
     padding 10px 20px
     .el-form-item
@@ -189,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/universal/events/constants.ts

@@ -29,3 +29,5 @@ export const PICGO_TOGGLE_PLUGIN = 'PICGO_TOGGLE_PLUGIN'
 export const PASTE_TEXT = 'PASTE_TEXT'
 export const SET_MINI_WINDOW_POS = 'SET_MINI_WINDOW_POS'
 export const RENAME_FILE_NAME = 'RENAME_FILE_NAME'
+export const SHOW_MAIN_PAGE_QRCODE = 'SHOW_MAIN_PAGE_QRCODE'
+export const SHOW_MAIN_PAGE_DONATION = 'SHOW_MAIN_PAGE_DONATION'

src/universal/i18n/index.ts

@@ -5,23 +5,15 @@ const languageList = {
   'zh-CN': ZH_CN
 }
 
-const lowercaseKeys = (obj: any) =>
+const objectAdapter = new ObjectAdapter(languageList)
-  Object.keys(obj).reduce((acc: any, key: string) => {
-    acc[key.toLowerCase()] = obj[key]
-    return acc
-  }, {})
-
-// FIXME: @picgo/i18n no lowecase
-const objectAdapter = new ObjectAdapter(lowercaseKeys(languageList))
 
 const i18n = new I18n({
   adapter: objectAdapter,
-  defaultLanguage: 'zh-cn'
+  defaultLanguage: 'zh-CN'
 })
 
-// FIXME: @picgo/i18n args should be optional
 const T = (key: ILocalesKey, args: IStringKeyMap = {}): string => {
-  return i18n.translate(key, args)!
+  return i18n.translate(key, args) || ''
 }
 
 export { i18n, T }

src/universal/i18n/zh-CN.ts

@@ -23,6 +23,7 @@ export const ZH_CN = {
   CONFIG_THING: '配置${c}',
   FIND_NEW_VERSION: '发现新版本',
   NO_MORE_NOTICE: '以后不再提醒',
+  SHOW_DEVTOOLS: '打开开发者工具',
 
   // ---renderer i18n---
   CHOOSE_YOUR_DEFAULT_PICBED: '选择 ${d} 作为你默认图床：',

yarn.lock

@@ -1324,12 +1324,13 @@
     husky "^1.3.1"
     ora "^3.4.0"
 
-"@picgo/i18n@^0.0.4":
+"@picgo/i18n@^1.0.0":
-  version "0.0.4"
+  version "1.0.0"
-  resolved "https://registry.npmmirror.com/@picgo/i18n/download/@picgo/i18n-0.0.4.tgz#018b0d0999e1d11d6a6f911ee960f7065a9e33a1"
+  resolved "https://registry.npmmirror.com/@picgo/i18n/-/i18n-1.0.0.tgz#a4d9d08624b55c3980f4f7628794fac47231da09"
-  integrity sha1-AYsNCZnh0R1qb5Ee6WD3BlqeM6E=
+  integrity sha512-D0fqwox9AZ1pnvgFqBKQe+16U08FkPLnUW1wQSBEdn+EvI48IC3jIWDTZd1MSQzXeODnh/w4eAiUyARrf2Hzig==
   dependencies:
-    chalk "^4.0.0"
+    chalk "4.1.2"
+    tslib "^2.3.1"
 
 "@picgo/store@^1.0.3":
   version "1.0.3"
@@ -3432,6 +3433,14 @@ chalk@2.3.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.2.0"
 
+chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -3460,14 +3469,6 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
-  version "4.1.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -12297,7 +12298,7 @@ tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.1, tslib@^2.1.0:
+tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==