mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-05-11 09:59:59 +08:00
🔨 Refactor: setting-page ui
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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
|
||||
})
|
||||
|
||||
@@ -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
|
||||
// _this.qrcodeVisible = true
|
||||
win?.webContents?.send(SHOW_MAIN_PAGE_QRCODE)
|
||||
}
|
||||
},
|
||||
{
|
||||
label: T('SHOW_DEVTOOLS'),
|
||||
click () {
|
||||
win?.webContents?.openDevTools()
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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="right"
|
||||
label-position="left"
|
||||
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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -5,23 +5,15 @@ const languageList = {
|
||||
'zh-CN': ZH_CN
|
||||
}
|
||||
|
||||
const lowercaseKeys = (obj: any) =>
|
||||
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 objectAdapter = new ObjectAdapter(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 }
|
||||
|
||||
@@ -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} 作为你默认图床:',
|
||||
|
||||
29
yarn.lock
29
yarn.lock
@@ -1324,12 +1324,13 @@
|
||||
husky "^1.3.1"
|
||||
ora "^3.4.0"
|
||||
|
||||
"@picgo/i18n@^0.0.4":
|
||||
version "0.0.4"
|
||||
resolved "https://registry.npmmirror.com/@picgo/i18n/download/@picgo/i18n-0.0.4.tgz#018b0d0999e1d11d6a6f911ee960f7065a9e33a1"
|
||||
integrity sha1-AYsNCZnh0R1qb5Ee6WD3BlqeM6E=
|
||||
"@picgo/i18n@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npmmirror.com/@picgo/i18n/-/i18n-1.0.0.tgz#a4d9d08624b55c3980f4f7628794fac47231da09"
|
||||
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==
|
||||
|
||||
Reference in New Issue
Block a user