mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-06-06 00:02:03 +08:00
🔨 Refactor(ts): change js -> ts
This commit is contained in:
Molunerfinn
@@ -5,9 +5,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'picgo'
|
||||
}
|
||||
export default {
|
||||
name: 'picgo'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
@@ -34,4 +34,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -58,68 +58,63 @@
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
Component,
|
||||
Vue,
|
||||
Prop,
|
||||
Watch
|
||||
} from 'vue-property-decorator'
|
||||
import { cloneDeep, union } from 'lodash'
|
||||
export default {
|
||||
name: 'config-form',
|
||||
props: {
|
||||
config: Array,
|
||||
type: String,
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
configList: [],
|
||||
ruleForm: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
watch: {
|
||||
config: {
|
||||
deep: true,
|
||||
handler (val) {
|
||||
this.ruleForm = Object.assign({}, {})
|
||||
const config = this.$db.get(`picBed.${this.id}`)
|
||||
if (val.length > 0) {
|
||||
this.configList = cloneDeep(val).map(item => {
|
||||
let defaultValue = item.default !== undefined
|
||||
? item.default : item.type === 'checkbox'
|
||||
? [] : null
|
||||
if (item.type === 'checkbox') {
|
||||
const defaults = item.choices.filter(i => {
|
||||
return i.checked
|
||||
}).map(i => i.value)
|
||||
defaultValue = union(defaultValue, defaults)
|
||||
}
|
||||
if (config && config[item.name] !== undefined) {
|
||||
defaultValue = config[item.name]
|
||||
}
|
||||
this.$set(this.ruleForm, item.name, defaultValue)
|
||||
return item
|
||||
})
|
||||
|
||||
@Component({
|
||||
name: 'config-form'
|
||||
})
|
||||
export default class extends Vue {
|
||||
@Prop(Array) readonly config: Array<any> = []
|
||||
@Prop(String) readonly type: string = ''
|
||||
@Prop(String) readonly id: string = ''
|
||||
configList = []
|
||||
ruleForm = {}
|
||||
@Watch('config', {
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
handleConfigChange (val: any) {
|
||||
this.ruleForm = Object.assign({}, {})
|
||||
const config = this.$db.get(`picBed.${this.id}`)
|
||||
if (val.length > 0) {
|
||||
this.configList = cloneDeep(val).map((item: any) => {
|
||||
let defaultValue = item.default !== undefined
|
||||
? item.default : item.type === 'checkbox'
|
||||
? [] : null
|
||||
if (item.type === 'checkbox') {
|
||||
const defaults = item.choices.filter((i: any) => {
|
||||
return i.checked
|
||||
}).map((i: any) => i.value)
|
||||
defaultValue = union(defaultValue, defaults)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async validate () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
resolve(this.ruleForm)
|
||||
} else {
|
||||
resolve(false)
|
||||
return false
|
||||
}
|
||||
})
|
||||
if (config && config[item.name] !== undefined) {
|
||||
defaultValue = config[item.name]
|
||||
}
|
||||
this.$set(this.ruleForm, item.name, defaultValue)
|
||||
return item
|
||||
})
|
||||
}
|
||||
}
|
||||
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'>
|
||||
@@ -139,4 +134,4 @@ export default {
|
||||
.el-switch__label
|
||||
&.is-active
|
||||
color #409EFF
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
label="用占位符$url来表示url的位置"
|
||||
prop="value"
|
||||
>
|
||||
<el-input
|
||||
<el-input
|
||||
class="align-center"
|
||||
v-model="customLink.value"
|
||||
:autofocus="true"
|
||||
@@ -136,161 +136,160 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import pkg from 'root/package.json'
|
||||
import keyDetect from 'utils/key-binding'
|
||||
import { remote } from 'electron'
|
||||
import db from '~/datastore'
|
||||
import keyDetect from '@/utils/key-binding'
|
||||
import { remote, ipcRenderer, IpcRendererEvent } from 'electron'
|
||||
import db from '#/datastore'
|
||||
import mixin from '@/utils/mixin'
|
||||
const { Menu, dialog, BrowserWindow } = remote
|
||||
export default {
|
||||
const customLinkRule = (rule: string, value: string, callback: (arg0?: Error) => void) => {
|
||||
if (!/\$url/.test(value)) {
|
||||
return callback(new Error('必须含有$url'))
|
||||
} else {
|
||||
return callback()
|
||||
}
|
||||
}
|
||||
@Component({
|
||||
name: 'setting-page',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
const customLinkRule = (rule, value, callback) => {
|
||||
if (!/\$url/.test(value)) {
|
||||
return callback(new Error('必须含有$url'))
|
||||
} else {
|
||||
return callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
version: process.env.NODE_ENV === 'production' ? pkg.version : 'Dev',
|
||||
defaultActive: 'upload',
|
||||
menu: null,
|
||||
visible: false,
|
||||
keyBindingVisible: false,
|
||||
customLinkVisible: false,
|
||||
customLink: {
|
||||
value: db.get('customLink') || '$url'
|
||||
},
|
||||
rules: {
|
||||
value: [
|
||||
{ validator: customLinkRule, trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
os: '',
|
||||
shortKey: {
|
||||
upload: db.get('shortKey.upload')
|
||||
},
|
||||
picBed: [],
|
||||
// for showInputBox
|
||||
showInputBoxVisible: false,
|
||||
inputBoxValue: '',
|
||||
inputBoxOptions: {
|
||||
title: '',
|
||||
placeholder: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [mixin]
|
||||
})
|
||||
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: ShortKeyMap = {
|
||||
upload: db.get('shortKey.upload')
|
||||
}
|
||||
picBed: PicBedType[] = []
|
||||
// for showInputBox
|
||||
showInputBoxVisible = false
|
||||
inputBoxValue = ''
|
||||
inputBoxOptions = {
|
||||
title: '',
|
||||
placeholder: ''
|
||||
}
|
||||
created () {
|
||||
this.os = process.platform
|
||||
this.buildMenu()
|
||||
this.$electron.ipcRenderer.send('getPicBeds')
|
||||
this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
|
||||
this.$electron.ipcRenderer.on('showInputBox', (evt, options) => {
|
||||
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
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleSelect (index) {
|
||||
const type = index.match(/picbeds-/)
|
||||
if (type === null) {
|
||||
}
|
||||
handleSelect (index: string) {
|
||||
const type = index.match(/picbeds-/)
|
||||
if (type === null) {
|
||||
this.$router.push({
|
||||
name: index
|
||||
})
|
||||
} else {
|
||||
const picBed = index.replace(/picbeds-/, '')
|
||||
if (this.$builtInPicBed.includes(picBed)) {
|
||||
this.$router.push({
|
||||
name: index
|
||||
name: picBed
|
||||
})
|
||||
} else {
|
||||
const picBed = index.replace(/picbeds-/, '')
|
||||
if (this.$builtInPicBed.includes(picBed)) {
|
||||
this.$router.push({
|
||||
name: picBed
|
||||
})
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: 'others',
|
||||
params: {
|
||||
type: picBed
|
||||
}
|
||||
this.$router.push({
|
||||
name: 'others',
|
||||
params: {
|
||||
type: picBed
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
minimizeWindow () {
|
||||
const window = BrowserWindow.getFocusedWindow()
|
||||
window!.minimize()
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
minimizeWindow () {
|
||||
const window = BrowserWindow.getFocusedWindow()
|
||||
window.minimize()
|
||||
},
|
||||
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)
|
||||
},
|
||||
openDialog () {
|
||||
this.menu.popup(remote.getCurrentWindow())
|
||||
},
|
||||
keyDetect (type, event) {
|
||||
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 () {
|
||||
this.$refs.customLink.validate((valid) => {
|
||||
if (valid) {
|
||||
db.set('customLink', this.customLink.value)
|
||||
this.customLinkVisible = false
|
||||
this.$electron.ipcRenderer.send('updateCustomLink')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
openMiniWindow () {
|
||||
this.$electron.ipcRenderer.send('openMiniWindow')
|
||||
},
|
||||
getPicBeds (event, picBeds) {
|
||||
this.picBed = picBeds
|
||||
},
|
||||
handleInputBoxClose () {
|
||||
this.$electron.ipcRenderer.send('showInputBox', this.inputBoxValue)
|
||||
}
|
||||
},
|
||||
beforeRouteEnter: (to, from, next) => {
|
||||
next(vm => {
|
||||
]
|
||||
this.menu = Menu.buildFromTemplate(template)
|
||||
}
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
openMiniWindow () {
|
||||
ipcRenderer.send('openMiniWindow')
|
||||
}
|
||||
getPicBeds (event: IpcRendererEvent, picBeds: PicBedType[]) {
|
||||
this.picBed = picBeds
|
||||
}
|
||||
handleInputBoxClose () {
|
||||
ipcRenderer.send('showInputBox', this.inputBoxValue)
|
||||
}
|
||||
beforeRouteEnter (to: any, from: any, next: any) {
|
||||
next((vm: this) => {
|
||||
vm.defaultActive = to.name
|
||||
})
|
||||
},
|
||||
}
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
this.$electron.ipcRenderer.removeAllListeners('showInputBox')
|
||||
ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
ipcRenderer.removeAllListeners('showInputBox')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -360,7 +359,7 @@ $darwinBg = transparentify(#172426, #000, 0.7)
|
||||
overflow-y auto
|
||||
width 170px
|
||||
.el-icon-info.setting-window
|
||||
position fixed
|
||||
position fixed
|
||||
bottom 4px
|
||||
left 4px
|
||||
cursor poiter
|
||||
@@ -384,7 +383,7 @@ $darwinBg = transparentify(#172426, #000, 0.7)
|
||||
&:before
|
||||
content ''
|
||||
position absolute
|
||||
width 3px
|
||||
width 3px
|
||||
height 20px
|
||||
right 0
|
||||
top 18px
|
||||
@@ -406,7 +405,7 @@ $darwinBg = transparentify(#172426, #000, 0.7)
|
||||
padding-top 22px
|
||||
position relative
|
||||
z-index 10
|
||||
.el-dialog__body
|
||||
.el-dialog__body
|
||||
padding 20px
|
||||
.support
|
||||
text-align center
|
||||
@@ -424,4 +423,4 @@ $darwinBg = transparentify(#172426, #000, 0.7)
|
||||
background #6f6f6f
|
||||
*::-webkit-scrollbar-track
|
||||
background-color transparent
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import axios from 'axios'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import db from '../datastore/index'
|
||||
import { webFrame } from 'electron'
|
||||
import './assets/fonts/iconfont.css'
|
||||
import VueLazyLoad from 'vue-lazyload'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(VueLazyLoad)
|
||||
|
||||
webFrame.setVisualZoomLevelLimits(1, 1)
|
||||
webFrame.setLayoutZoomLevelLimits(0, 0)
|
||||
|
||||
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
|
||||
Vue.http = Vue.prototype.$http = axios
|
||||
Vue.prototype.$db = db
|
||||
Vue.prototype.$builtInPicBed = [
|
||||
'smms',
|
||||
'weibo',
|
||||
'imgur',
|
||||
'qiniu',
|
||||
'tcyun',
|
||||
'upyun',
|
||||
'aliyun',
|
||||
'github'
|
||||
]
|
||||
Vue.config.productionTip = false
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
components: { App },
|
||||
router,
|
||||
store,
|
||||
template: '<App/>'
|
||||
}).$mount('#app')
|
||||
@@ -72,7 +72,7 @@
|
||||
:options="options"
|
||||
></gallerys>
|
||||
<el-col :span="6" v-for="(item, index) in images" :key="item.id" class="gallery-list__img">
|
||||
<div
|
||||
<div
|
||||
class="gallery-list__item"
|
||||
@click="zoomImage(index)"
|
||||
>
|
||||
@@ -83,7 +83,7 @@
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
@@ -102,257 +102,266 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
// @ts-ignore
|
||||
import gallerys from 'vue-gallery'
|
||||
import pasteStyle from '~/main/utils/pasteTemplate'
|
||||
export default {
|
||||
import pasteStyle from '#/utils/pasteTemplate'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import {
|
||||
ipcRenderer,
|
||||
clipboard,
|
||||
IpcRendererEvent
|
||||
} from 'electron'
|
||||
@Component({
|
||||
name: 'gallery',
|
||||
components: {
|
||||
gallerys
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
images: [],
|
||||
idx: null,
|
||||
options: {
|
||||
titleProperty: 'fileName',
|
||||
urlProperty: 'imgUrl',
|
||||
closeOnSlideClick: true
|
||||
},
|
||||
dialogVisible: false,
|
||||
imgInfo: {
|
||||
id: null,
|
||||
imgUrl: ''
|
||||
},
|
||||
choosedList: {},
|
||||
choosedPicBed: [],
|
||||
searchText: '',
|
||||
handleBarActive: false,
|
||||
pasteStyle: '',
|
||||
pasteStyleMap: {
|
||||
Markdown: 'markdown',
|
||||
HTML: 'HTML',
|
||||
URL: 'URL',
|
||||
UBB: 'UBB',
|
||||
Custom: 'Custom'
|
||||
},
|
||||
picBed: []
|
||||
}
|
||||
},
|
||||
beforeRouteEnter (to, from, next) {
|
||||
next(vm => {
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
images: ImgInfo[] = []
|
||||
idx: null | number = null
|
||||
options = {
|
||||
titleProperty: 'fileName',
|
||||
urlProperty: 'imgUrl',
|
||||
closeOnSlideClick: true
|
||||
}
|
||||
dialogVisible = false
|
||||
imgInfo = {
|
||||
id: null,
|
||||
imgUrl: ''
|
||||
}
|
||||
choosedList: ObjT<boolean> = {}
|
||||
choosedPicBed: string[] = []
|
||||
searchText = ''
|
||||
handleBarActive = false
|
||||
pasteStyle = ''
|
||||
pasteStyleMap = {
|
||||
Markdown: 'markdown',
|
||||
HTML: 'HTML',
|
||||
URL: 'URL',
|
||||
UBB: 'UBB',
|
||||
Custom: 'Custom'
|
||||
}
|
||||
picBed: PicBedType[] = []
|
||||
beforeRouteEnter (to: any, from: any, next: any) {
|
||||
next((vm: any) => {
|
||||
vm.getGallery()
|
||||
vm.getPasteStyle()
|
||||
vm.getPicBeds()
|
||||
})
|
||||
},
|
||||
}
|
||||
created () {
|
||||
this.$electron.ipcRenderer.on('updateGallery', (event) => {
|
||||
ipcRenderer.on('updateGallery', (event: IpcRendererEvent) => {
|
||||
this.$nextTick(() => {
|
||||
this.filterList = this.getGallery()
|
||||
})
|
||||
})
|
||||
this.$electron.ipcRenderer.send('getPicBeds')
|
||||
this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
|
||||
},
|
||||
computed: {
|
||||
filterList: {
|
||||
get () {
|
||||
return this.getGallery()
|
||||
},
|
||||
set (val) {
|
||||
return this.val
|
||||
ipcRenderer.send('getPicBeds')
|
||||
ipcRenderer.on('getPicBeds', this.getPicBeds)
|
||||
}
|
||||
get filterList () {
|
||||
return this.getGallery()
|
||||
}
|
||||
set filterList (val) {
|
||||
this.images = val
|
||||
}
|
||||
getPicBeds (event: IpcRendererEvent, picBeds: PicBedType[]) {
|
||||
this.picBed = picBeds
|
||||
}
|
||||
getGallery () {
|
||||
if (this.choosedPicBed.length > 0) {
|
||||
let arr: ImgInfo[] = []
|
||||
this.choosedPicBed.forEach(item => {
|
||||
let obj: Obj = {
|
||||
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
|
||||
} 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()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPicBeds (event, picBeds) {
|
||||
this.picBed = picBeds
|
||||
},
|
||||
getGallery () {
|
||||
if (this.choosedPicBed.length > 0) {
|
||||
let arr = []
|
||||
this.choosedPicBed.forEach(item => {
|
||||
let obj = {
|
||||
type: item
|
||||
}
|
||||
if (this.searchText) {
|
||||
obj.fileName = this.searchText
|
||||
}
|
||||
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
|
||||
} else {
|
||||
if (this.searchText) {
|
||||
let data = this.$db.read().get('uploaded')
|
||||
.filter(item => {
|
||||
return item.fileName.indexOf(this.searchText) !== -1
|
||||
}).reverse().value()
|
||||
this.images = data
|
||||
} else {
|
||||
this.images = this.$db.read().get('uploaded').slice().reverse().value()
|
||||
}
|
||||
}
|
||||
return this.images
|
||||
},
|
||||
zoomImage (index) {
|
||||
this.idx = index
|
||||
this.changeZIndexForGallery(true)
|
||||
},
|
||||
changeZIndexForGallery (isOpen) {
|
||||
if (isOpen) {
|
||||
document.querySelector('.main-content.el-row').style.zIndex = 101
|
||||
} else {
|
||||
document.querySelector('.main-content.el-row').style.zIndex = 10
|
||||
}
|
||||
},
|
||||
handleClose () {
|
||||
this.idx = null
|
||||
this.changeZIndexForGallery(false)
|
||||
},
|
||||
copy (item) {
|
||||
const style = this.$db.get('settings.pasteStyle') || 'markdown'
|
||||
const copyLink = pasteStyle(style, item)
|
||||
return this.images
|
||||
}
|
||||
zoomImage (index: number) {
|
||||
this.idx = index
|
||||
this.changeZIndexForGallery(true)
|
||||
}
|
||||
changeZIndexForGallery (isOpen: boolean) {
|
||||
if (isOpen) {
|
||||
// @ts-ignore
|
||||
document.querySelector('.main-content.el-row').style.zIndex = 101
|
||||
} else {
|
||||
// @ts-ignore
|
||||
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)
|
||||
const obj = {
|
||||
title: '复制链接成功',
|
||||
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.get('uploaded').getById(id)
|
||||
// @ts-ignore
|
||||
this.$db.read().get('uploaded').removeById(id).write()
|
||||
ipcRenderer.send('removeFiles', [file])
|
||||
const obj = {
|
||||
title: '复制链接成功',
|
||||
body: copyLink,
|
||||
icon: item.url || item.imgUrl
|
||||
title: '操作结果',
|
||||
body: '删除成功'
|
||||
}
|
||||
const myNotification = new window.Notification(obj.title, obj)
|
||||
this.$electron.clipboard.writeText(copyLink)
|
||||
const myNotification = new Notification(obj.title, obj)
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
},
|
||||
remove (id) {
|
||||
this.$confirm('此操作将把该图片移出相册, 是否继续?', '提示', {
|
||||
this.getGallery()
|
||||
}).catch(() => {
|
||||
return true
|
||||
})
|
||||
}
|
||||
openDialog (item: ImgInfo) {
|
||||
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()
|
||||
const obj = {
|
||||
title: '修改图片URL成功',
|
||||
body: this.imgInfo.imgUrl,
|
||||
icon: this.imgInfo.imgUrl
|
||||
}
|
||||
const myNotification = new Notification(obj.title, obj)
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
this.dialogVisible = false
|
||||
this.getGallery()
|
||||
}
|
||||
choosePicBed (type: string) {
|
||||
let idx = this.choosedPicBed.indexOf(type)
|
||||
if (idx !== -1) {
|
||||
this.choosedPicBed.splice(idx, 1)
|
||||
} else {
|
||||
this.choosedPicBed.push(type)
|
||||
}
|
||||
}
|
||||
cleanSearch () {
|
||||
this.searchText = ''
|
||||
}
|
||||
isMultiple (obj: Obj) {
|
||||
return Object.values(obj).some(item => item)
|
||||
}
|
||||
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: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const file = this.$db.get('uploaded').getById(id)
|
||||
this.$db.read().get('uploaded').removeById(id).write()
|
||||
this.$electron.ipcRenderer.send('removeFiles', [file])
|
||||
let files: ImgInfo[] = []
|
||||
Object.keys(this.choosedList).forEach(key => {
|
||||
if (this.choosedList[key]) {
|
||||
// @ts-ignore
|
||||
const file = this.$db.read().get('uploaded').getById(key).value()
|
||||
files.push(file)
|
||||
// @ts-ignore
|
||||
this.$db.read().get('uploaded').removeById(key).write()
|
||||
}
|
||||
})
|
||||
this.choosedList = {}
|
||||
this.getGallery()
|
||||
const obj = {
|
||||
title: '操作结果',
|
||||
body: '删除成功'
|
||||
}
|
||||
const myNotification = new window.Notification(obj.title, obj)
|
||||
ipcRenderer.send('removeFiles', files)
|
||||
const myNotification = new Notification(obj.title, obj)
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
this.getGallery()
|
||||
}).catch(() => {
|
||||
return true
|
||||
})
|
||||
},
|
||||
openDialog (item) {
|
||||
this.imgInfo.id = item.id
|
||||
this.imgInfo.imgUrl = item.imgUrl
|
||||
this.dialogVisible = true
|
||||
},
|
||||
confirmModify () {
|
||||
this.$db.read().get('uploaded')
|
||||
.getById(this.imgInfo.id)
|
||||
.assign({imgUrl: this.imgInfo.imgUrl})
|
||||
.write()
|
||||
}
|
||||
}
|
||||
multiCopy () {
|
||||
if (Object.values(this.choosedList).some(item => item)) {
|
||||
let copyString = ''
|
||||
const style = this.$db.get('settings.pasteStyle') || 'markdown'
|
||||
// choosedList -> { [id]: true or false }; true means choosed. false means not choosed.
|
||||
Object.keys(this.choosedList).forEach(key => {
|
||||
if (this.choosedList[key]) {
|
||||
// @ts-ignore
|
||||
const item = this.$db.read().get('uploaded').getById(key).value()
|
||||
copyString += pasteStyle(style, item) + '\n'
|
||||
this.choosedList[key] = false
|
||||
}
|
||||
})
|
||||
const obj = {
|
||||
title: '修改图片URL成功',
|
||||
body: this.imgInfo.imgUrl,
|
||||
icon: this.imgInfo.imgUrl
|
||||
title: '批量复制链接成功',
|
||||
body: copyString
|
||||
}
|
||||
const myNotification = new window.Notification(obj.title, obj)
|
||||
const myNotification = new Notification(obj.title, obj)
|
||||
clipboard.writeText(copyString)
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
this.dialogVisible = false
|
||||
this.getGallery()
|
||||
},
|
||||
choosePicBed (type) {
|
||||
let idx = this.choosedPicBed.indexOf(type)
|
||||
if (idx !== -1) {
|
||||
this.choosedPicBed.splice(idx, 1)
|
||||
} else {
|
||||
this.choosedPicBed.push(type)
|
||||
}
|
||||
},
|
||||
cleanSearch () {
|
||||
this.searchText = ''
|
||||
},
|
||||
isMultiple (obj) {
|
||||
return Object.values(obj).some(item => item)
|
||||
},
|
||||
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: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let files = []
|
||||
Object.keys(this.choosedList).forEach(key => {
|
||||
if (this.choosedList[key]) {
|
||||
const file = this.$db.read().get('uploaded').getById(key).value()
|
||||
files.push(file)
|
||||
this.$db.read().get('uploaded').removeById(key).write()
|
||||
}
|
||||
})
|
||||
this.choosedList = {}
|
||||
this.getGallery()
|
||||
const obj = {
|
||||
title: '操作结果',
|
||||
body: '删除成功'
|
||||
}
|
||||
this.$electron.ipcRenderer.send('removeFiles', files)
|
||||
const myNotification = new window.Notification(obj.title, obj)
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
}).catch(() => {
|
||||
return true
|
||||
})
|
||||
}
|
||||
},
|
||||
multiCopy () {
|
||||
if (Object.values(this.choosedList).some(item => item)) {
|
||||
let copyString = ''
|
||||
const style = this.$db.get('settings.pasteStyle') || 'markdown'
|
||||
// choosedList -> { [id]: true or false }; true means choosed. false means not choosed.
|
||||
Object.keys(this.choosedList).forEach(key => {
|
||||
if (this.choosedList[key]) {
|
||||
const item = this.$db.read().get('uploaded').getById(key).value()
|
||||
copyString += pasteStyle(style, item) + '\n'
|
||||
this.choosedList[key] = false
|
||||
}
|
||||
})
|
||||
const obj = {
|
||||
title: '批量复制链接成功',
|
||||
body: copyString
|
||||
}
|
||||
const myNotification = new window.Notification(obj.title, obj)
|
||||
this.$electron.clipboard.writeText(copyString)
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleHandleBar () {
|
||||
this.handleBarActive = !this.handleBarActive
|
||||
},
|
||||
getPasteStyle () {
|
||||
this.pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
|
||||
},
|
||||
handlePasteStyleChange (val) {
|
||||
this.$db.set('settings.pasteStyle', val)
|
||||
this.pasteStyle = val
|
||||
}
|
||||
},
|
||||
}
|
||||
toggleHandleBar () {
|
||||
this.handleBarActive = !this.handleBarActive
|
||||
}
|
||||
getPasteStyle () {
|
||||
this.pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
|
||||
}
|
||||
handlePasteStyleChange (val: string) {
|
||||
this.$db.set('settings.pasteStyle', val)
|
||||
this.pasteStyle = val
|
||||
}
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('updateGallery')
|
||||
this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
ipcRenderer.removeAllListeners('updateGallery')
|
||||
ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -428,7 +437,7 @@ export default {
|
||||
&-fake
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
left 0
|
||||
opacity 0
|
||||
width 100%
|
||||
z-index -1
|
||||
@@ -456,4 +465,4 @@ export default {
|
||||
margin-bottom 10px
|
||||
.el-input__inner
|
||||
border-radius 14px
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -15,31 +15,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import mixin from '@/utils/mixin'
|
||||
export default {
|
||||
import { Component, Vue, Watch } from 'vue-property-decorator'
|
||||
import {
|
||||
ipcRenderer,
|
||||
IpcRendererEvent,
|
||||
remote
|
||||
} from 'electron'
|
||||
@Component({
|
||||
name: 'mini-page',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
logo: 'static/squareLogo.png',
|
||||
dragover: false,
|
||||
progress: 0,
|
||||
showProgress: false,
|
||||
showError: false,
|
||||
dragging: false,
|
||||
wX: '',
|
||||
wY: '',
|
||||
screenX: '',
|
||||
screenY: '',
|
||||
menu: null,
|
||||
os: '',
|
||||
picBed: []
|
||||
}
|
||||
},
|
||||
mixins: [mixin]
|
||||
})
|
||||
export default class extends Vue {
|
||||
logo = 'static/squareLogo.png'
|
||||
dragover = false
|
||||
progress = 0
|
||||
showProgress = false
|
||||
showError = false
|
||||
dragging = false
|
||||
wX: number = -1
|
||||
wY: number = -1
|
||||
screenX: number = -1
|
||||
screenY: number = -1
|
||||
menu: Electron.Menu | null = null
|
||||
os = ''
|
||||
picBed: PicBedType[] = []
|
||||
created () {
|
||||
this.os = process.platform
|
||||
this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
|
||||
ipcRenderer.on('uploadProgress', (event: IpcRendererEvent, progress: number) => {
|
||||
if (progress !== -1) {
|
||||
this.showProgress = true
|
||||
this.progress = progress
|
||||
@@ -49,140 +53,141 @@ export default {
|
||||
}
|
||||
})
|
||||
this.getPicBeds()
|
||||
},
|
||||
}
|
||||
mounted () {
|
||||
window.addEventListener('mousedown', this.handleMouseDown, false)
|
||||
window.addEventListener('mousemove', this.handleMouseMove, false)
|
||||
window.addEventListener('mouseup', this.handleMouseUp, false)
|
||||
},
|
||||
watch: {
|
||||
progress (val) {
|
||||
if (val === 100) {
|
||||
setTimeout(() => {
|
||||
this.showProgress = false
|
||||
this.showError = false
|
||||
}, 1000)
|
||||
setTimeout(() => {
|
||||
this.progress = 0
|
||||
}, 1200)
|
||||
}
|
||||
|
||||
@Watch('progress')
|
||||
onProgressChange (val: number) {
|
||||
if (val === 100) {
|
||||
setTimeout(() => {
|
||||
this.showProgress = false
|
||||
this.showError = false
|
||||
}, 1000)
|
||||
setTimeout(() => {
|
||||
this.progress = 0
|
||||
}, 1200)
|
||||
}
|
||||
}
|
||||
getPicBeds () {
|
||||
this.picBed = ipcRenderer.sendSync('getPicBeds')
|
||||
this.buildMenu()
|
||||
}
|
||||
onDrop (e: DragEvent) {
|
||||
this.dragover = false
|
||||
this.ipcSendFiles(e.dataTransfer!.files)
|
||||
}
|
||||
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: FileWithPath[] = []
|
||||
Array.from(files).forEach((item, index) => {
|
||||
let obj = {
|
||||
name: item.name,
|
||||
path: item.path
|
||||
}
|
||||
sendFiles.push(obj)
|
||||
})
|
||||
ipcRenderer.send('uploadChoosedFiles', sendFiles)
|
||||
}
|
||||
handleMouseDown (e: MouseEvent) {
|
||||
this.dragging = true
|
||||
this.wX = e.pageX
|
||||
this.wY = e.pageY
|
||||
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({
|
||||
x: xLoc,
|
||||
y: yLoc,
|
||||
width: 64,
|
||||
height: 64
|
||||
})
|
||||
}
|
||||
}
|
||||
handleMouseUp (e: MouseEvent) {
|
||||
this.dragging = false
|
||||
if (this.screenX === e.screenX && this.screenY === e.screenY) {
|
||||
if (e.button === 0) { // left mouse
|
||||
this.openUploadWindow()
|
||||
} else {
|
||||
this.getPicBeds()
|
||||
this.openContextMenu()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPicBeds () {
|
||||
this.picBed = this.$electron.ipcRenderer.sendSync('getPicBeds')
|
||||
this.buildMenu()
|
||||
},
|
||||
onDrop (e) {
|
||||
this.dragover = false
|
||||
this.ipcSendFiles(e.dataTransfer.files)
|
||||
},
|
||||
openUploadWindow () {
|
||||
document.getElementById('file-uploader').click()
|
||||
},
|
||||
onChange (e) {
|
||||
this.ipcSendFiles(e.target.files)
|
||||
document.getElementById('file-uploader').value = ''
|
||||
},
|
||||
ipcSendFiles (files) {
|
||||
let sendFiles = []
|
||||
Array.from(files).forEach((item, index) => {
|
||||
let obj = {
|
||||
name: item.name,
|
||||
path: item.path
|
||||
}
|
||||
sendFiles.push(obj)
|
||||
})
|
||||
this.$electron.ipcRenderer.send('uploadChoosedFiles', sendFiles)
|
||||
},
|
||||
handleMouseDown (e) {
|
||||
this.dragging = true
|
||||
this.wX = e.pageX
|
||||
this.wY = e.pageY
|
||||
this.screenX = e.screenX
|
||||
this.screenY = e.screenY
|
||||
},
|
||||
handleMouseMove (e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (this.dragging) {
|
||||
const xLoc = e.screenX - this.wX
|
||||
const yLoc = e.screenY - this.wY
|
||||
this.$electron.remote.BrowserWindow.getFocusedWindow().setBounds({
|
||||
x: xLoc,
|
||||
y: yLoc,
|
||||
width: 64,
|
||||
height: 64
|
||||
})
|
||||
}
|
||||
},
|
||||
handleMouseUp (e) {
|
||||
this.dragging = false
|
||||
if (this.screenX === e.screenX && this.screenY === e.screenY) {
|
||||
if (e.button === 0) { // left mouse
|
||||
this.openUploadWindow()
|
||||
} else {
|
||||
this.getPicBeds()
|
||||
this.openContextMenu()
|
||||
}
|
||||
openContextMenu () {
|
||||
this.menu!.popup()
|
||||
}
|
||||
buildMenu () {
|
||||
const _this = this
|
||||
const submenu = this.picBed.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
type: 'radio',
|
||||
checked: this.$db.get('picBed.current') === item.type,
|
||||
click () {
|
||||
_this.$db.set('picBed.current', item.type)
|
||||
ipcRenderer.send('syncPicBed')
|
||||
}
|
||||
}
|
||||
},
|
||||
openContextMenu () {
|
||||
this.menu.popup(this.$electron.remote.getCurrentWindow())
|
||||
},
|
||||
buildMenu () {
|
||||
const _this = this
|
||||
const submenu = this.picBed.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
type: 'radio',
|
||||
checked: this.$db.get('picBed.current') === item.type,
|
||||
click () {
|
||||
_this.$db.set('picBed.current', item.type)
|
||||
_this.$electron.ipcRenderer.send('syncPicBed')
|
||||
}
|
||||
})
|
||||
const template = [
|
||||
{
|
||||
label: '打开详细窗口',
|
||||
click () {
|
||||
ipcRenderer.send('openSettingWindow')
|
||||
}
|
||||
})
|
||||
const template = [
|
||||
{
|
||||
label: '打开详细窗口',
|
||||
click () {
|
||||
_this.$electron.ipcRenderer.send('openSettingWindow')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '选择默认图床',
|
||||
type: 'submenu',
|
||||
submenu
|
||||
},
|
||||
{
|
||||
label: '剪贴板图片上传',
|
||||
click () {
|
||||
_this.$electron.ipcRenderer.send('uploadClipboardFilesFromUploadPage')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '最小化窗口',
|
||||
role: 'minimize'
|
||||
},
|
||||
{
|
||||
label: '重启应用',
|
||||
click () {
|
||||
_this.$electron.remote.app.relaunch()
|
||||
_this.$electron.remote.app.exit(0)
|
||||
}
|
||||
},
|
||||
{
|
||||
role: 'quit',
|
||||
label: '退出'
|
||||
},
|
||||
{
|
||||
label: '选择默认图床',
|
||||
type: 'submenu',
|
||||
submenu
|
||||
},
|
||||
{
|
||||
label: '剪贴板图片上传',
|
||||
click () {
|
||||
ipcRenderer.send('uploadClipboardFilesFromUploadPage')
|
||||
}
|
||||
]
|
||||
this.menu = this.$electron.remote.Menu.buildFromTemplate(template)
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '最小化窗口',
|
||||
role: 'minimize'
|
||||
},
|
||||
{
|
||||
label: '重启应用',
|
||||
click () {
|
||||
remote.app.relaunch()
|
||||
remote.app.exit(0)
|
||||
}
|
||||
},
|
||||
{
|
||||
role: 'quit',
|
||||
label: '退出'
|
||||
}
|
||||
]
|
||||
// @ts-ignore
|
||||
this.menu = remote.Menu.buildFromTemplate(template)
|
||||
}
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
|
||||
this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
ipcRenderer.removeAllListeners('uploadProgress')
|
||||
ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
window.removeEventListener('mousedown', this.handleMouseDown, false)
|
||||
window.removeEventListener('mousemove', this.handleMouseMove, false)
|
||||
window.removeEventListener('mouseup', this.handleMouseUp, false)
|
||||
@@ -225,4 +230,4 @@ export default {
|
||||
background rgba(0,0,0,0.3)
|
||||
#file-uploader
|
||||
display none
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
<div class="custom-title">
|
||||
用占位符 <b>$fileName</b> 来表示文件名的位置
|
||||
</div>
|
||||
<el-input
|
||||
<el-input
|
||||
class="align-center"
|
||||
v-model="customLink.value"
|
||||
:autofocus="true"
|
||||
@@ -171,7 +171,7 @@
|
||||
<el-form-item
|
||||
label="代理地址"
|
||||
>
|
||||
<el-input
|
||||
<el-input
|
||||
v-model="proxy"
|
||||
:autofocus="true"
|
||||
placeholder="例如：http://127.0.0.1:1080"
|
||||
@@ -241,32 +241,224 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import keyDetect from 'utils/key-binding'
|
||||
<script lang="ts">
|
||||
import keyDetect from '@/utils/key-binding'
|
||||
import pkg from 'root/package.json'
|
||||
import path from 'path'
|
||||
import {
|
||||
ipcRenderer,
|
||||
remote
|
||||
} from 'electron'
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import db from '#/datastore'
|
||||
const release = 'https://api.github.com/repos/Molunerfinn/PicGo/releases/latest'
|
||||
const downloadUrl = 'https://github.com/Molunerfinn/PicGo/releases/latest'
|
||||
export default {
|
||||
name: 'picgo-setting',
|
||||
computed: {
|
||||
needUpdate () {
|
||||
if (this.latestVersion) {
|
||||
return this.compareVersion2Update(this.version, this.latestVersion)
|
||||
const customLinkRule = (rule: string, value: string, callback: (arg0?: Error) => void) => {
|
||||
if (!/\$url/.test(value)) {
|
||||
return callback(new Error('必须含有$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'),
|
||||
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
|
||||
}
|
||||
picBed: PicBedType[] = []
|
||||
logFileVisible = false
|
||||
keyBindingVisible = false
|
||||
customLinkVisible = false
|
||||
checkUpdateVisible = false
|
||||
proxyVisible = false
|
||||
customLink = {
|
||||
value: db.get('settings.customLink') || '$url'
|
||||
}
|
||||
shortKey: ShortKeyMap = {
|
||||
upload: db.get('settings.shortKey.upload')
|
||||
}
|
||||
proxy = db.get('picBed.proxy') || ''
|
||||
rules = {
|
||||
value: [
|
||||
{ validator: customLinkRule, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
logLevel = {
|
||||
all: '全部-All',
|
||||
success: '成功-Success',
|
||||
error: '错误-Error',
|
||||
info: '普通-Info',
|
||||
warn: '提醒-Warn',
|
||||
none: '不记录日志-None'
|
||||
}
|
||||
version = pkg.version
|
||||
latestVersion = ''
|
||||
os = ''
|
||||
|
||||
get needUpdate () {
|
||||
if (this.latestVersion) {
|
||||
return this.compareVersion2Update(this.version, this.latestVersion)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
created () {
|
||||
this.os = process.platform
|
||||
ipcRenderer.send('getPicBeds')
|
||||
ipcRenderer.on('getPicBeds', this.getPicBeds)
|
||||
}
|
||||
getPicBeds (event: Event, picBeds: PicBedType[]) {
|
||||
this.picBed = picBeds
|
||||
this.form.showPicBedList = this.picBed.map(item => {
|
||||
if (item.visible) {
|
||||
return item.name
|
||||
}
|
||||
}) 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)
|
||||
}
|
||||
openLogSetting () {
|
||||
this.logFileVisible = true
|
||||
}
|
||||
keyDetect (type: string, event: KeyboardEvent) {
|
||||
this.shortKey[type] = keyDetect(event).join('+')
|
||||
}
|
||||
cancelKeyBinding () {
|
||||
this.keyBindingVisible = false
|
||||
this.shortKey = db.get('settings.shortKey')
|
||||
}
|
||||
cancelCustomLink () {
|
||||
this.customLinkVisible = false
|
||||
this.customLink.value = db.get('settings.customLink') || '$url'
|
||||
}
|
||||
confirmCustomLink () {
|
||||
// @ts-ignore
|
||||
this.$refs.customLink.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
db.set('settings.customLink', this.customLink.value)
|
||||
this.customLinkVisible = false
|
||||
ipcRenderer.send('updateCustomLink')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
cancelProxy () {
|
||||
this.proxyVisible = false
|
||||
this.proxy = db.get('picBed.proxy') || undefined
|
||||
}
|
||||
confirmProxy () {
|
||||
this.proxyVisible = false
|
||||
db.set('picBed.proxy', this.proxy)
|
||||
const successNotification = new Notification('设置代理', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const customLinkRule = (rule, value, callback) => {
|
||||
if (!/\$url/.test(value)) {
|
||||
return callback(new Error('必须含有$url'))
|
||||
}
|
||||
updateHelperChange (val: boolean) {
|
||||
db.set('settings.showUpdateTip', val)
|
||||
}
|
||||
handleShowPicBedListChange (val: string[]) {
|
||||
const list = this.picBed.map(item => {
|
||||
if (!val.includes(item.name)) {
|
||||
item.visible = false
|
||||
} else {
|
||||
return callback()
|
||||
item.visible = true
|
||||
}
|
||||
return item
|
||||
})
|
||||
db.set('picBed.list', list)
|
||||
ipcRenderer.send('getPicBeds')
|
||||
}
|
||||
handleAutoStartChange (val: boolean) {
|
||||
db.set('settings.autoStart', val)
|
||||
ipcRenderer.send('autoStart', val)
|
||||
}
|
||||
handleRename (val: boolean) {
|
||||
db.set('settings.rename', val)
|
||||
}
|
||||
handleAutoRename (val: boolean) {
|
||||
db.set('settings.autoRename', val)
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
let logLevel = this.$db.get('settings.logLevel')
|
||||
return false
|
||||
}
|
||||
checkUpdate () {
|
||||
this.checkUpdateVisible = true
|
||||
this.$http.get(release)
|
||||
.then(res => {
|
||||
this.latestVersion = res.data.name
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
confirmCheckVersion () {
|
||||
if (this.needUpdate) {
|
||||
remote.shell.openExternal(downloadUrl)
|
||||
}
|
||||
this.checkUpdateVisible = false
|
||||
}
|
||||
cancelCheckVersion () {
|
||||
this.checkUpdateVisible = false
|
||||
}
|
||||
handleUploadNotification (val: boolean) {
|
||||
db.set('settings.uploadNotification', val)
|
||||
}
|
||||
handleMiniWindowOntop (val: boolean) {
|
||||
db.set('settings.miniWindowOntop', val)
|
||||
this.$message.info('需要重启生效')
|
||||
}
|
||||
confirmLogLevelSetting () {
|
||||
if (this.form.logLevel.length === 0) {
|
||||
return this.$message.error('请选择日志记录等级')
|
||||
}
|
||||
db.set('settings.logLevel', this.form.logLevel)
|
||||
const successNotification = new Notification('设置日志', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
this.logFileVisible = false
|
||||
}
|
||||
cancelLogLevelSetting () {
|
||||
this.logFileVisible = false
|
||||
let logLevel = db.get('settings.logLevel')
|
||||
if (!Array.isArray(logLevel)) {
|
||||
if (logLevel && logLevel.length > 0) {
|
||||
logLevel = [logLevel]
|
||||
@@ -274,225 +466,36 @@ export default {
|
||||
logLevel = ['all']
|
||||
}
|
||||
}
|
||||
return {
|
||||
form: {
|
||||
updateHelper: this.$db.get('settings.showUpdateTip'),
|
||||
showPicBedList: [],
|
||||
autoStart: this.$db.get('settings.autoStart') || false,
|
||||
rename: this.$db.get('settings.rename') || false,
|
||||
autoRename: this.$db.get('settings.autoRename') || false,
|
||||
uploadNotification: this.$db.get('settings.uploadNotification') || false,
|
||||
miniWindowOntop: this.$db.get('settings.miniWindowOntop') || false,
|
||||
logLevel
|
||||
},
|
||||
picBed: [],
|
||||
logFileVisible: false,
|
||||
keyBindingVisible: false,
|
||||
customLinkVisible: false,
|
||||
checkUpdateVisible: false,
|
||||
proxyVisible: false,
|
||||
customLink: {
|
||||
value: this.$db.get('settings.customLink') || '$url'
|
||||
},
|
||||
shortKey: {
|
||||
upload: this.$db.get('settings.shortKey.upload')
|
||||
},
|
||||
proxy: this.$db.get('picBed.proxy') || undefined,
|
||||
rules: {
|
||||
value: [
|
||||
{ validator: customLinkRule, trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
logLevel: {
|
||||
all: '全部-All',
|
||||
success: '成功-Success',
|
||||
error: '错误-Error',
|
||||
info: '普通-Info',
|
||||
warn: '提醒-Warn',
|
||||
none: '不记录日志-None'
|
||||
},
|
||||
version: pkg.version,
|
||||
latestVersion: '',
|
||||
os: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.os = process.platform
|
||||
this.$electron.ipcRenderer.send('getPicBeds')
|
||||
this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
|
||||
},
|
||||
methods: {
|
||||
getPicBeds (event, picBeds) {
|
||||
this.picBed = picBeds
|
||||
this.form.showPicBedList = this.picBed.map(item => {
|
||||
if (item.visible) {
|
||||
return item.name
|
||||
}
|
||||
})
|
||||
},
|
||||
openFile (file) {
|
||||
const { app, shell } = this.$electron.remote
|
||||
const STORE_PATH = app.getPath('userData')
|
||||
const FILE = path.join(STORE_PATH, `/${file}`)
|
||||
shell.openItem(FILE)
|
||||
},
|
||||
openLogSetting () {
|
||||
this.logFileVisible = true
|
||||
},
|
||||
keyDetect (type, event) {
|
||||
this.shortKey[type] = keyDetect(event).join('+')
|
||||
},
|
||||
cancelKeyBinding () {
|
||||
this.keyBindingVisible = false
|
||||
this.shortKey = this.$db.get('settings.shortKey')
|
||||
},
|
||||
cancelCustomLink () {
|
||||
this.customLinkVisible = false
|
||||
this.customLink.value = this.$db.get('settings.customLink') || '$url'
|
||||
},
|
||||
confirmCustomLink () {
|
||||
this.$refs.customLink.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.set('settings.customLink', this.customLink.value)
|
||||
this.customLinkVisible = false
|
||||
this.$electron.ipcRenderer.send('updateCustomLink')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
cancelProxy () {
|
||||
this.proxyVisible = false
|
||||
this.proxy = this.$db.get('picBed.proxy') || undefined
|
||||
},
|
||||
confirmProxy () {
|
||||
this.proxyVisible = false
|
||||
this.$db.set('picBed.proxy', this.proxy)
|
||||
const successNotification = new window.Notification('设置代理', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
this.form.logLevel = logLevel
|
||||
}
|
||||
handleLevelDisabled (val: string) {
|
||||
let currentLevel = val
|
||||
let flagLevel
|
||||
let result = this.form.logLevel.some(item => {
|
||||
if (item === 'all' || item === 'none') {
|
||||
flagLevel = item
|
||||
}
|
||||
return (item === 'all' || item === 'none')
|
||||
})
|
||||
if (result) {
|
||||
if (currentLevel !== flagLevel) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
updateHelperChange (val) {
|
||||
this.$db.set('settings.showUpdateTip', val)
|
||||
},
|
||||
handleShowPicBedListChange (val) {
|
||||
const list = this.picBed.map(item => {
|
||||
if (!val.includes(item.name)) {
|
||||
item.visible = false
|
||||
} else {
|
||||
item.visible = true
|
||||
}
|
||||
return item
|
||||
})
|
||||
this.$db.set('picBed.list', list)
|
||||
this.$electron.ipcRenderer.send('getPicBeds')
|
||||
},
|
||||
handleAutoStartChange (val) {
|
||||
this.$db.set('settings.autoStart', val)
|
||||
this.$electron.ipcRenderer.send('autoStart', val)
|
||||
},
|
||||
handleRename (val) {
|
||||
this.$db.set('settings.rename', val)
|
||||
},
|
||||
handleAutoRename (val) {
|
||||
this.$db.set('settings.autoRename', val)
|
||||
},
|
||||
compareVersion2Update (current, latest) {
|
||||
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
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
checkUpdate () {
|
||||
this.checkUpdateVisible = true
|
||||
this.$http.get(release)
|
||||
.then(res => {
|
||||
this.latestVersion = res.data.name
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
confirmCheckVersion () {
|
||||
if (this.needUpdate) {
|
||||
this.$electron.remote.shell.openExternal(downloadUrl)
|
||||
}
|
||||
this.checkUpdateVisible = false
|
||||
},
|
||||
cancelCheckVersion () {
|
||||
this.checkUpdateVisible = false
|
||||
},
|
||||
handleUploadNotification (val) {
|
||||
this.$db.set('settings.uploadNotification', val)
|
||||
},
|
||||
handleMiniWindowOntop (val) {
|
||||
this.$db.set('settings.miniWindowOntop', val)
|
||||
this.$message('需要重启生效')
|
||||
},
|
||||
confirmLogLevelSetting () {
|
||||
if (this.form.logLevel.length === 0) {
|
||||
return this.$message.error('请选择日志记录等级')
|
||||
}
|
||||
this.$db.set('settings.logLevel', this.form.logLevel)
|
||||
const successNotification = new window.Notification('设置日志', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
} else if (this.form.logLevel.length > 0) {
|
||||
if (val === 'all' || val === 'none') {
|
||||
return true
|
||||
}
|
||||
this.logFileVisible = false
|
||||
},
|
||||
cancelLogLevelSetting () {
|
||||
this.logFileVisible = false
|
||||
let logLevel = this.$db.get('settings.logLevel')
|
||||
if (!Array.isArray(logLevel)) {
|
||||
if (logLevel && logLevel.length > 0) {
|
||||
logLevel = [logLevel]
|
||||
} else {
|
||||
logLevel = ['all']
|
||||
}
|
||||
}
|
||||
this.form.logLevel = logLevel
|
||||
},
|
||||
handleLevelDisabled (val) {
|
||||
let currentLevel = val
|
||||
let flagLevel
|
||||
let result = this.form.logLevel.some(item => {
|
||||
if (item === 'all' || item === 'none') {
|
||||
flagLevel = item
|
||||
}
|
||||
return (item === 'all' || item === 'none')
|
||||
})
|
||||
if (result) {
|
||||
if (currentLevel !== flagLevel) {
|
||||
return true
|
||||
}
|
||||
} else if (this.form.logLevel.length > 0) {
|
||||
if (val === 'all' || val === 'none') {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
goConfigPage () {
|
||||
this.$electron.remote.shell.openExternal('https://picgo.github.io/PicGo-Doc/zh/guide/config.html#picgo设置')
|
||||
},
|
||||
goShortCutPage () {
|
||||
this.$router.push('shortcut-page')
|
||||
}
|
||||
},
|
||||
return false
|
||||
}
|
||||
goConfigPage () {
|
||||
remote.shell.openExternal('https://picgo.github.io/PicGo-Doc/zh/guide/config.html#picgo设置')
|
||||
}
|
||||
goShortCutPage () {
|
||||
this.$router.push('shortcut')
|
||||
}
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -515,7 +518,7 @@ export default {
|
||||
overflow-x hidden
|
||||
.setting-list
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 32px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -549,4 +552,4 @@ export default {
|
||||
margin-left 0
|
||||
.confirm-button
|
||||
width 100%
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -93,58 +93,65 @@
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ConfigForm from '@/components/ConfigForm'
|
||||
<script lang="ts">
|
||||
import {
|
||||
Component,
|
||||
Vue,
|
||||
Watch
|
||||
} from 'vue-property-decorator'
|
||||
import ConfigForm from '@/components/ConfigForm.vue'
|
||||
import { debounce } from 'lodash'
|
||||
export default {
|
||||
import {
|
||||
ipcRenderer,
|
||||
remote,
|
||||
IpcRendererEvent
|
||||
} from 'electron'
|
||||
const { Menu } = remote
|
||||
|
||||
@Component({
|
||||
name: 'plugin',
|
||||
components: {
|
||||
ConfigForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchText: '',
|
||||
pluginList: [],
|
||||
menu: null,
|
||||
config: [],
|
||||
currentType: '',
|
||||
configName: '',
|
||||
dialogVisible: false,
|
||||
pluginNameList: [],
|
||||
loading: true,
|
||||
needReload: false,
|
||||
id: '',
|
||||
os: ''
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
searchText = ''
|
||||
pluginList: IPicGoPlugin[] = []
|
||||
menu: Electron.Menu | null = null
|
||||
config: any[] = []
|
||||
currentType = ''
|
||||
configName = ''
|
||||
dialogVisible = false
|
||||
pluginNameList: string[] = []
|
||||
loading = true
|
||||
needReload = false
|
||||
id = ''
|
||||
os = ''
|
||||
get npmSearchText () {
|
||||
return this.searchText.match('picgo-plugin-')
|
||||
? this.searchText
|
||||
: this.searchText !== ''
|
||||
? `picgo-plugin-${this.searchText}`
|
||||
: this.searchText
|
||||
}
|
||||
@Watch('npmSearchText')
|
||||
onNpmSearchTextChange (val: string) {
|
||||
if (val) {
|
||||
this.loading = true
|
||||
this.pluginList = []
|
||||
this.getSearchResult(val)
|
||||
} else {
|
||||
this.getPluginList()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
npmSearchText () {
|
||||
return this.searchText.match('picgo-plugin-')
|
||||
? this.searchText
|
||||
: this.searchText !== ''
|
||||
? `picgo-plugin-${this.searchText}`
|
||||
: this.searchText
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
npmSearchText (val) {
|
||||
if (val) {
|
||||
this.loading = true
|
||||
this.pluginList = []
|
||||
this.getSearchResult(val)
|
||||
} else {
|
||||
this.getPluginList()
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
created () {
|
||||
this.os = process.platform
|
||||
this.$electron.ipcRenderer.on('pluginList', (evt, list) => {
|
||||
ipcRenderer.on('pluginList', (evt: IpcRendererEvent, list: IPicGoPlugin[]) => {
|
||||
this.pluginList = list
|
||||
this.pluginNameList = list.map(item => item.name)
|
||||
this.loading = false
|
||||
})
|
||||
this.$electron.ipcRenderer.on('installSuccess', (evt, plugin) => {
|
||||
ipcRenderer.on('installSuccess', (evt: IpcRendererEvent, plugin: string) => {
|
||||
this.loading = false
|
||||
this.pluginList.forEach(item => {
|
||||
if (item.name === plugin) {
|
||||
@@ -153,7 +160,7 @@ export default {
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$electron.ipcRenderer.on('updateSuccess', (evt, plugin) => {
|
||||
ipcRenderer.on('updateSuccess', (evt: IpcRendererEvent, plugin: string) => {
|
||||
this.loading = false
|
||||
this.pluginList.forEach(item => {
|
||||
if (item.name === plugin) {
|
||||
@@ -165,7 +172,7 @@ export default {
|
||||
this.handleReload()
|
||||
this.getPluginList()
|
||||
})
|
||||
this.$electron.ipcRenderer.on('uninstallSuccess', (evt, plugin) => {
|
||||
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
|
||||
@@ -184,241 +191,241 @@ export default {
|
||||
this.getPluginList()
|
||||
this.getSearchResult = debounce(this.getSearchResult, 50)
|
||||
this.needReload = this.$db.get('needReload')
|
||||
},
|
||||
methods: {
|
||||
buildContextMenu (plugin) {
|
||||
const _this = this
|
||||
let menu = [{
|
||||
label: '启用插件',
|
||||
enabled: !plugin.enabled,
|
||||
click () {
|
||||
_this.$db.set(`picgoPlugins.picgo-plugin-${plugin.name}`, true)
|
||||
plugin.enabled = true
|
||||
_this.getPicBeds()
|
||||
}
|
||||
buildContextMenu (plugin: IPicGoPlugin) {
|
||||
const _this = this
|
||||
let menu = [{
|
||||
label: '启用插件',
|
||||
enabled: !plugin.enabled,
|
||||
click () {
|
||||
_this.$db.set(`picgoPlugins.picgo-plugin-${plugin.name}`, true)
|
||||
plugin.enabled = true
|
||||
_this.getPicBeds()
|
||||
}
|
||||
}, {
|
||||
label: '禁用插件',
|
||||
enabled: plugin.enabled,
|
||||
click () {
|
||||
_this.$db.set(`picgoPlugins.picgo-plugin-${plugin.name}`, false)
|
||||
plugin.enabled = false
|
||||
_this.getPicBeds()
|
||||
if (plugin.config.transformer.name) {
|
||||
_this.handleRestoreState('transformer', plugin.config.transformer.name)
|
||||
}
|
||||
}, {
|
||||
label: '禁用插件',
|
||||
enabled: plugin.enabled,
|
||||
click () {
|
||||
_this.$db.set(`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)
|
||||
if (plugin.config.uploader.name) {
|
||||
_this.handleRestoreState('uploader', plugin.config.uploader.name)
|
||||
}
|
||||
}
|
||||
|
||||
// handle transformer
|
||||
if (plugin.config.transformer.name) {
|
||||
let currentTransformer = this.$db.get('picBed.transformer') || 'path'
|
||||
let pluginTransformer = plugin.config.transformer.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: `${currentTransformer === pluginTransformer ? '禁用' : '启用'}transformer - ${plugin.config.transformer.name}`,
|
||||
label: `配置${i} - ${plugin.config[i].name}`,
|
||||
click () {
|
||||
_this.toggleTransformer(plugin.config.transformer.name)
|
||||
_this.currentType = i
|
||||
_this.configName = plugin.config[i].name
|
||||
_this.dialogVisible = true
|
||||
_this.config = plugin.config[i].config
|
||||
}
|
||||
}
|
||||
menu.push(obj)
|
||||
}
|
||||
}
|
||||
|
||||
// plugin custom menus
|
||||
if (plugin.guiMenu) {
|
||||
// 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({
|
||||
type: 'separator'
|
||||
label: i.label,
|
||||
click () {
|
||||
ipcRenderer.send('pluginActions', plugin.name, i.label)
|
||||
}
|
||||
})
|
||||
for (let i of plugin.guiMenu) {
|
||||
menu.push({
|
||||
label: i.label,
|
||||
click () {
|
||||
_this.$electron.ipcRenderer.send('pluginActions', plugin.name, i.label)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.menu = this.$electron.remote.Menu.buildFromTemplate(menu)
|
||||
this.menu.popup(this.$electron.remote.getCurrentWindow())
|
||||
},
|
||||
getPluginList () {
|
||||
this.$electron.ipcRenderer.send('getPluginList')
|
||||
},
|
||||
getPicBeds () {
|
||||
this.$electron.ipcRenderer.send('getPicBeds')
|
||||
},
|
||||
installPlugin (item) {
|
||||
if (!item.gui) {
|
||||
this.$confirm('该插件未对可视化界面进行优化, 是否继续安装?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
item.ing = true
|
||||
this.$electron.ipcRenderer.send('installPlugin', item.name)
|
||||
}).catch(() => {
|
||||
console.log('Install canceled')
|
||||
})
|
||||
} else {
|
||||
this.menu = Menu.buildFromTemplate(menu)
|
||||
this.menu.popup()
|
||||
}
|
||||
getPluginList () {
|
||||
ipcRenderer.send('getPluginList')
|
||||
}
|
||||
getPicBeds () {
|
||||
ipcRenderer.send('getPicBeds')
|
||||
}
|
||||
installPlugin (item: IPicGoPlugin) {
|
||||
if (!item.gui) {
|
||||
this.$confirm('该插件未对可视化界面进行优化, 是否继续安装?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
item.ing = true
|
||||
ipcRenderer.send('installPlugin', item.name)
|
||||
}).catch(() => {
|
||||
console.log('Install canceled')
|
||||
})
|
||||
} else {
|
||||
item.ing = true
|
||||
ipcRenderer.send('installPlugin', item.name)
|
||||
}
|
||||
}
|
||||
uninstallPlugin (val: string) {
|
||||
this.pluginList.forEach(item => {
|
||||
if (item.name === val) {
|
||||
item.ing = true
|
||||
this.$electron.ipcRenderer.send('installPlugin', item.name)
|
||||
}
|
||||
},
|
||||
uninstallPlugin (val) {
|
||||
this.pluginList.forEach(item => {
|
||||
if (item.name === val) {
|
||||
item.ing = true
|
||||
}
|
||||
})
|
||||
this.$electron.ipcRenderer.send('uninstallPlugin', val)
|
||||
},
|
||||
updatePlugin (val) {
|
||||
this.pluginList.forEach(item => {
|
||||
if (item.name === val) {
|
||||
item.ing = true
|
||||
}
|
||||
})
|
||||
this.$electron.ipcRenderer.send('updatePlugin', val)
|
||||
},
|
||||
reloadApp () {
|
||||
this.$electron.remote.app.relaunch()
|
||||
this.$electron.remote.app.exit(0)
|
||||
},
|
||||
handleReload () {
|
||||
this.$db.set('needReload', true)
|
||||
this.needReload = true
|
||||
const successNotification = new window.Notification('更新成功', {
|
||||
body: '请点击此通知重启应用以生效'
|
||||
})
|
||||
ipcRenderer.send('uninstallPlugin', val)
|
||||
}
|
||||
updatePlugin (val: string) {
|
||||
this.pluginList.forEach(item => {
|
||||
if (item.name === val) {
|
||||
item.ing = true
|
||||
}
|
||||
})
|
||||
ipcRenderer.send('updatePlugin', val)
|
||||
}
|
||||
reloadApp () {
|
||||
remote.app.relaunch()
|
||||
remote.app.exit(0)
|
||||
}
|
||||
handleReload () {
|
||||
this.$db.set('needReload', true)
|
||||
this.needReload = true
|
||||
const successNotification = new Notification('更新成功', {
|
||||
body: '请点击此通知重启应用以生效'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
this.reloadApp()
|
||||
}
|
||||
}
|
||||
cleanSearch () {
|
||||
this.searchText = ''
|
||||
}
|
||||
toggleTransformer (transformer: string) {
|
||||
let currentTransformer = this.$db.get('picBed.transformer') || 'path'
|
||||
if (currentTransformer === transformer) {
|
||||
this.$db.set('picBed.transformer', 'path')
|
||||
} else {
|
||||
this.$db.set('picBed.transformer', transformer)
|
||||
}
|
||||
}
|
||||
async handleConfirmConfig () {
|
||||
// @ts-ignore
|
||||
const result = await this.$refs.configForm.validate()
|
||||
if (result !== false) {
|
||||
switch (this.currentType) {
|
||||
case 'plugin':
|
||||
this.$db.set(`picgo-plugin-${this.configName}`, result)
|
||||
break
|
||||
case 'uploader':
|
||||
this.$db.set(`picBed.${this.configName}`, result)
|
||||
break
|
||||
case 'transformer':
|
||||
this.$db.set(`transformer.${this.configName}`, result)
|
||||
break
|
||||
}
|
||||
const successNotification = new Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
this.reloadApp()
|
||||
return true
|
||||
}
|
||||
},
|
||||
cleanSearch () {
|
||||
this.searchText = ''
|
||||
},
|
||||
toggleTransformer (transformer) {
|
||||
let currentTransformer = this.$db.get('picBed.transformer') || 'path'
|
||||
if (currentTransformer === transformer) {
|
||||
this.$db.set('picBed.transformer', 'path')
|
||||
} else {
|
||||
this.$db.set('picBed.transformer', transformer)
|
||||
}
|
||||
},
|
||||
async handleConfirmConfig () {
|
||||
const result = await this.$refs.configForm.validate()
|
||||
if (result !== false) {
|
||||
switch (this.currentType) {
|
||||
case 'plugin':
|
||||
this.$db.set(`picgo-plugin-${this.configName}`, result)
|
||||
break
|
||||
case 'uploader':
|
||||
this.$db.set(`picBed.${this.configName}`, result)
|
||||
break
|
||||
case 'transformer':
|
||||
this.$db.set(`transformer.${this.configName}`, result)
|
||||
break
|
||||
}
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
this.dialogVisible = false
|
||||
this.getPluginList()
|
||||
}
|
||||
},
|
||||
getSearchResult: function (val) {
|
||||
// this.$http.get(`https://api.npms.io/v2/search?q=${val}`)
|
||||
this.$http.get(`https://registry.npmjs.com/-/v1/search?text=${val}`)
|
||||
.then(res => {
|
||||
this.pluginList = res.data.objects.map(item => {
|
||||
return this.handleSearchResult(item)
|
||||
})
|
||||
this.loading = false
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleSearchResult (item) {
|
||||
const name = item.package.name.replace(/picgo-plugin-/, '')
|
||||
let gui = false
|
||||
if (item.package.keywords && item.package.keywords.length > 0) {
|
||||
if (item.package.keywords.includes('picgo-gui-plugin')) {
|
||||
gui = true
|
||||
}
|
||||
}
|
||||
return {
|
||||
name: 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-/, '')),
|
||||
version: item.package.version,
|
||||
gui,
|
||||
ing: false // installing or uninstalling
|
||||
}
|
||||
},
|
||||
// restore Uploader & Transformer
|
||||
handleRestoreState (item, name) {
|
||||
if (item === 'uploader') {
|
||||
const current = this.$db.get('picBed.current')
|
||||
if (current === name) {
|
||||
this.$db.set('picBed.current', 'smms')
|
||||
}
|
||||
}
|
||||
if (item === 'transformer') {
|
||||
const current = this.$db.get('picBed.transformer')
|
||||
if (current === name) {
|
||||
this.$db.set('picBed.transformer', 'path')
|
||||
}
|
||||
}
|
||||
},
|
||||
openHomepage (url) {
|
||||
if (url) {
|
||||
this.$electron.remote.shell.openExternal(url)
|
||||
}
|
||||
},
|
||||
goAwesomeList () {
|
||||
this.$electron.remote.shell.openExternal('https://github.com/PicGo/Awesome-PicGo')
|
||||
this.dialogVisible = false
|
||||
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}`)
|
||||
.then((res: INPMSearchResult) => {
|
||||
this.pluginList = res.data.objects.map((item: INPMSearchResultObject) => {
|
||||
return this.handleSearchResult(item)
|
||||
})
|
||||
this.loading = false
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
handleSearchResult (item: INPMSearchResultObject) {
|
||||
const name = item.package.name.replace(/picgo-plugin-/, '')
|
||||
let gui = false
|
||||
if (item.package.keywords && item.package.keywords.length > 0) {
|
||||
if (item.package.keywords.includes('picgo-gui-plugin')) {
|
||||
gui = true
|
||||
}
|
||||
}
|
||||
return {
|
||||
name: 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-/, '')),
|
||||
version: item.package.version,
|
||||
gui,
|
||||
ing: false // installing or uninstalling
|
||||
}
|
||||
}
|
||||
// restore Uploader & Transformer
|
||||
handleRestoreState (item: string, name: string) {
|
||||
if (item === 'uploader') {
|
||||
const current = this.$db.get('picBed.current')
|
||||
if (current === name) {
|
||||
this.$db.set('picBed.current', 'smms')
|
||||
}
|
||||
}
|
||||
if (item === 'transformer') {
|
||||
const current = this.$db.get('picBed.transformer')
|
||||
if (current === name) {
|
||||
this.$db.set('picBed.transformer', 'path')
|
||||
}
|
||||
}
|
||||
}
|
||||
openHomepage (url: string) {
|
||||
if (url) {
|
||||
remote.shell.openExternal(url)
|
||||
}
|
||||
}
|
||||
goAwesomeList () {
|
||||
remote.shell.openExternal('https://github.com/PicGo/Awesome-PicGo')
|
||||
}
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('pluginList')
|
||||
this.$electron.ipcRenderer.removeAllListeners('installSuccess')
|
||||
this.$electron.ipcRenderer.removeAllListeners('uninstallSuccess')
|
||||
this.$electron.ipcRenderer.removeAllListeners('updateSuccess')
|
||||
ipcRenderer.removeAllListeners('pluginList')
|
||||
ipcRenderer.removeAllListeners('installSuccess')
|
||||
ipcRenderer.removeAllListeners('uninstallSuccess')
|
||||
ipcRenderer.removeAllListeners('updateSuccess')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -562,4 +569,4 @@ $darwinBg = #172426
|
||||
padding 10px 0
|
||||
&.cut-width
|
||||
width calc(100% - 48px)
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<el-form-item
|
||||
label="文件改名"
|
||||
>
|
||||
<el-input
|
||||
<el-input
|
||||
v-model="fileName"
|
||||
size="small"
|
||||
@keyup.enter.native="confirmName"
|
||||
@@ -21,33 +21,34 @@
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import mixin from '@/utils/mixin'
|
||||
export default {
|
||||
import {
|
||||
ipcRenderer,
|
||||
IpcRendererEvent
|
||||
} from 'electron'
|
||||
@Component({
|
||||
name: 'rename-page',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
fileName: '',
|
||||
id: null
|
||||
}
|
||||
},
|
||||
mixins: [mixin]
|
||||
})
|
||||
export default class extends Vue {
|
||||
fileName: string = ''
|
||||
id: string | null = null
|
||||
created () {
|
||||
this.$electron.ipcRenderer.on('rename', (event, name, id) => {
|
||||
ipcRenderer.on('rename', (event: IpcRendererEvent, name: string, id: string) => {
|
||||
this.fileName = name
|
||||
this.id = id
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
confirmName () {
|
||||
this.$electron.ipcRenderer.send(`rename${this.id}`, this.fileName)
|
||||
},
|
||||
cancel () {
|
||||
this.$electron.ipcRenderer.send(`rename${this.id}`, null)
|
||||
}
|
||||
},
|
||||
}
|
||||
confirmName () {
|
||||
ipcRenderer.send(`rename${this.id}`, this.fileName)
|
||||
}
|
||||
cancel () {
|
||||
ipcRenderer.send(`rename${this.id}`, null)
|
||||
}
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('rename')
|
||||
ipcRenderer.removeAllListeners('rename')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -58,4 +59,4 @@ export default {
|
||||
float right
|
||||
.el-form-item__label
|
||||
color #ddd
|
||||
</style>
|
||||
</style>
|
||||
|
||||
181
src/renderer/pages/ShortCut.vue
Normal file
181
src/renderer/pages/ShortCut.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div id="shortcut-page">
|
||||
<div class="view-title">
|
||||
快捷键设置
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="20" :offset="2">
|
||||
<el-table
|
||||
:data="list"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
label="快捷键名称"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.label ? scope.row.label : scope.row.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
width="180px"
|
||||
label="快捷键绑定"
|
||||
prop="key"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
size="mini"
|
||||
:type="scope.row.enable ? 'success' : 'danger'"
|
||||
>
|
||||
{{ scope.row.enable ? '已启用' : '已禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="来源"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ calcOrigin(scope.row.name) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="toggleEnable(scope.row)"
|
||||
size="mini"
|
||||
:class="{
|
||||
disabled: scope.row.enable
|
||||
}"
|
||||
type="text">
|
||||
{{ scope.row.enable ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
class="edit"
|
||||
size="mini"
|
||||
@click="openKeyBindingDialog(scope.row.name, scope.$index)"
|
||||
type="text">
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
title="修改上传快捷键"
|
||||
:visible.sync="keyBindingVisible"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
label="快捷上传"
|
||||
>
|
||||
<el-input
|
||||
class="align-center"
|
||||
@keydown.native.prevent="keyDetect($event)"
|
||||
v-model="shortKey"
|
||||
:autofocus="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="cancelKeyBinding" round>取消</el-button>
|
||||
<el-button type="primary" @click="confirmKeyBinding" round>确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch } from 'vue-property-decorator'
|
||||
import keyDetect from '@/utils/key-binding'
|
||||
import { ipcRenderer } from 'electron'
|
||||
|
||||
@Component({
|
||||
name: 'shortcut-page'
|
||||
})
|
||||
export default class extends Vue {
|
||||
list: ShortKeyConfig[] = []
|
||||
keyBindingVisible = false
|
||||
shortKeyName = ''
|
||||
shortKey = ''
|
||||
currentIndex = 0
|
||||
created () {
|
||||
const shortKeyConfig = this.$db.get('settings.shortKey') as ShortKeyConfigs
|
||||
this.list = Object.keys(shortKeyConfig).map(item => shortKeyConfig[item])
|
||||
}
|
||||
@Watch('keyBindingVisible')
|
||||
onKeyBindingVisibleChange (val: boolean) {
|
||||
ipcRenderer.send('toggleShortKeyModifiedMode', val)
|
||||
}
|
||||
calcOrigin (item: string) {
|
||||
const [origin] = item.split(':')
|
||||
return origin
|
||||
}
|
||||
toggleEnable (item: ShortKeyConfig) {
|
||||
const status = !item.enable
|
||||
item.enable = status
|
||||
this.$db.set(`settings.shortKey.${item.name}.enable`, status)
|
||||
ipcRenderer.send('updateShortKey', item)
|
||||
}
|
||||
keyDetect (event: KeyboardEvent) {
|
||||
this.shortKey = keyDetect(event).join('+')
|
||||
}
|
||||
openKeyBindingDialog (name: string, index: number) {
|
||||
this.shortKeyName = name
|
||||
this.shortKey = this.$db.get(`settings.shortKey.${name}.key`)
|
||||
this.currentIndex = index
|
||||
this.keyBindingVisible = true
|
||||
}
|
||||
cancelKeyBinding () {
|
||||
this.keyBindingVisible = false
|
||||
this.shortKey = this.$db.get(`settings.shortKey.${this.shortKeyName}.key`)
|
||||
}
|
||||
confirmKeyBinding () {
|
||||
const oldKey = this.$db.get(`settings.shortKey.${this.shortKeyName}.key`)
|
||||
this.$db.set(`settings.shortKey.${this.shortKeyName}.key`, this.shortKey)
|
||||
const newKey = this.$db.get(`settings.shortKey.${this.shortKeyName}`)
|
||||
ipcRenderer.send('updateShortKey', newKey, oldKey)
|
||||
this.list[this.currentIndex].key = this.shortKey
|
||||
this.keyBindingVisible = false
|
||||
}
|
||||
beforeDestroy () {
|
||||
ipcRenderer.send('toggleShortKeyModifiedMode', false)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
#shortcut-page
|
||||
.el-dialog__body
|
||||
padding 10px 20px
|
||||
.el-form-item
|
||||
margin-bottom 0
|
||||
.el-button
|
||||
&.disabled
|
||||
color: #F56C6C
|
||||
&.edit
|
||||
color: #67C23A
|
||||
.el-table
|
||||
background-color: transparent
|
||||
color #ddd
|
||||
thead
|
||||
color #bbb
|
||||
th,tr
|
||||
background-color: transparent
|
||||
&__body
|
||||
tr.el-table__row--striped
|
||||
td
|
||||
background transparent
|
||||
&--enable-row-hover
|
||||
.el-table__body
|
||||
tr:hover
|
||||
&>td
|
||||
background #333
|
||||
</style>
|
||||
@@ -25,92 +25,91 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '@/utils/mixin'
|
||||
import pasteTemplate from '~/main/utils/pasteTemplate'
|
||||
export default {
|
||||
name: 'tray-page',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
files: [],
|
||||
notification: {
|
||||
title: '复制链接成功',
|
||||
body: '',
|
||||
icon: ''
|
||||
},
|
||||
clipboardFiles: [],
|
||||
uploadFlag: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
reverseList () {
|
||||
return this.files.slice().reverse()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.disableDragFile()
|
||||
this.getData()
|
||||
this.$electron.ipcRenderer.on('dragFiles', (event, files) => {
|
||||
files.forEach(item => {
|
||||
this.$db.insert('uploaded', item)
|
||||
})
|
||||
this.files = this.$db.read().get('uploaded').slice().reverse().slice(0, 5).value()
|
||||
})
|
||||
this.$electron.ipcRenderer.on('clipboardFiles', (event, files) => {
|
||||
this.clipboardFiles = files
|
||||
})
|
||||
this.$electron.ipcRenderer.on('uploadFiles', (event) => {
|
||||
this.files = this.$db.read().get('uploaded').slice().reverse().slice(0, 5).value()
|
||||
console.log(this.files)
|
||||
this.uploadFlag = false
|
||||
})
|
||||
this.$electron.ipcRenderer.on('updateFiles', (event) => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('dragFiles')
|
||||
this.$electron.ipcRenderer.removeAllListeners('clipboardFiles')
|
||||
this.$electron.ipcRenderer.removeAllListeners('uploadClipboardFiles')
|
||||
this.$electron.ipcRenderer.removeAllListeners('updateFiles')
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
this.files = this.$db.read().get('uploaded').slice().reverse().slice(0, 5).value()
|
||||
},
|
||||
copyTheLink (item) {
|
||||
this.notification.body = item.imgUrl
|
||||
this.notification.icon = item.imgUrl
|
||||
const myNotification = new window.Notification(this.notification.title, this.notification)
|
||||
const pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
|
||||
this.$electron.clipboard.writeText(pasteTemplate(pasteStyle, item))
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
},
|
||||
calcHeight (width, height) {
|
||||
return height * 160 / width
|
||||
},
|
||||
disableDragFile () {
|
||||
window.addEventListener('dragover', (e) => {
|
||||
e = e || event
|
||||
e.preventDefault()
|
||||
}, false)
|
||||
window.addEventListener('drop', (e) => {
|
||||
e = e || event
|
||||
e.preventDefault()
|
||||
}, false)
|
||||
},
|
||||
uploadClipboardFiles () {
|
||||
if (this.uploadFlag) {
|
||||
return
|
||||
}
|
||||
this.uploadFlag = true
|
||||
this.$electron.ipcRenderer.send('uploadClipboardFiles')
|
||||
}
|
||||
<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'
|
||||
@Component({
|
||||
name: 'tray-page',
|
||||
mixins: [mixin]
|
||||
})
|
||||
export default class extends Vue {
|
||||
files = []
|
||||
notification = {
|
||||
title: '复制链接成功',
|
||||
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()
|
||||
}
|
||||
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))
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
}
|
||||
calcHeight (width: number, height: number): number {
|
||||
return height * 160 / width
|
||||
}
|
||||
disableDragFile () {
|
||||
window.addEventListener('dragover', (e) => {
|
||||
e = e || event
|
||||
e.preventDefault()
|
||||
}, false)
|
||||
window.addEventListener('drop', (e) => {
|
||||
e = e || event
|
||||
e.preventDefault()
|
||||
}, false)
|
||||
}
|
||||
uploadClipboardFiles () {
|
||||
if (this.uploadFlag) {
|
||||
return
|
||||
}
|
||||
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('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()
|
||||
console.log(this.files)
|
||||
this.uploadFlag = false
|
||||
})
|
||||
ipcRenderer.on('updateFiles', (event: Event) => {
|
||||
this.getData()
|
||||
})
|
||||
}
|
||||
beforeDestroy () {
|
||||
ipcRenderer.removeAllListeners('dragFiles')
|
||||
ipcRenderer.removeAllListeners('clipboardFiles')
|
||||
ipcRenderer.removeAllListeners('uploadClipboardFiles')
|
||||
ipcRenderer.removeAllListeners('updateFiles')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
<input type="file" id="file-uploader" @change="onChange" multiple>
|
||||
</div>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="progress"
|
||||
:show-text="false"
|
||||
<el-progress
|
||||
:percentage="progress"
|
||||
:show-text="false"
|
||||
class="upload-progress"
|
||||
:class="{ 'show': showProgress }"
|
||||
:status="showError ? 'exception' : 'text'"
|
||||
:status="showError ? 'exception' : undefined"
|
||||
></el-progress>
|
||||
<div class="paste-style">
|
||||
<div class="el-col-16">
|
||||
@@ -55,23 +55,28 @@
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'upload',
|
||||
data () {
|
||||
return {
|
||||
dragover: false,
|
||||
progress: 0,
|
||||
showProgress: false,
|
||||
showError: false,
|
||||
pasteStyle: '',
|
||||
picBed: [],
|
||||
picBedName: '',
|
||||
menu: null
|
||||
}
|
||||
},
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch } from 'vue-property-decorator'
|
||||
import {
|
||||
ipcRenderer,
|
||||
IpcRendererEvent,
|
||||
remote
|
||||
} from 'electron'
|
||||
const { Menu } = remote
|
||||
@Component({
|
||||
name: 'upload'
|
||||
})
|
||||
export default class extends Vue {
|
||||
dragover = false
|
||||
progress = 0
|
||||
showProgress = false
|
||||
showError = false
|
||||
pasteStyle = ''
|
||||
picBed: PicBedType[] = []
|
||||
picBedName = ''
|
||||
menu: Electron.Menu | null= null
|
||||
mounted () {
|
||||
this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
|
||||
ipcRenderer.on('uploadProgress', (event: IpcRendererEvent, progress: number) => {
|
||||
if (progress !== -1) {
|
||||
this.showProgress = true
|
||||
this.progress = progress
|
||||
@@ -82,93 +87,92 @@ export default {
|
||||
})
|
||||
this.getPasteStyle()
|
||||
this.getDefaultPicBed()
|
||||
this.$electron.ipcRenderer.on('syncPicBed', () => {
|
||||
ipcRenderer.on('syncPicBed', () => {
|
||||
this.getDefaultPicBed()
|
||||
})
|
||||
this.$electron.ipcRenderer.send('getPicBeds')
|
||||
this.$electron.ipcRenderer.on('getPicBeds', this.getPicBeds)
|
||||
},
|
||||
watch: {
|
||||
progress (val) {
|
||||
if (val === 100) {
|
||||
setTimeout(() => {
|
||||
this.showProgress = false
|
||||
this.showError = false
|
||||
}, 1000)
|
||||
setTimeout(() => {
|
||||
this.progress = 0
|
||||
}, 1200)
|
||||
}
|
||||
ipcRenderer.send('getPicBeds')
|
||||
ipcRenderer.on('getPicBeds', this.getPicBeds)
|
||||
}
|
||||
@Watch('progress')
|
||||
onProgressChange (val: number) {
|
||||
if (val === 100) {
|
||||
setTimeout(() => {
|
||||
this.showProgress = false
|
||||
this.showError = false
|
||||
}, 1000)
|
||||
setTimeout(() => {
|
||||
this.progress = 0
|
||||
}, 1200)
|
||||
}
|
||||
},
|
||||
}
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
|
||||
this.$electron.ipcRenderer.removeAllListeners('syncPicBed')
|
||||
this.$electron.ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
},
|
||||
methods: {
|
||||
onDrop (e) {
|
||||
this.dragover = false
|
||||
this.ipcSendFiles(e.dataTransfer.files)
|
||||
},
|
||||
openUplodWindow () {
|
||||
document.getElementById('file-uploader').click()
|
||||
},
|
||||
onChange (e) {
|
||||
this.ipcSendFiles(e.target.files)
|
||||
document.getElementById('file-uploader').value = ''
|
||||
},
|
||||
ipcSendFiles (files) {
|
||||
let sendFiles = []
|
||||
Array.from(files).forEach((item, index) => {
|
||||
let obj = {
|
||||
name: item.name,
|
||||
path: item.path
|
||||
ipcRenderer.removeAllListeners('uploadProgress')
|
||||
ipcRenderer.removeAllListeners('syncPicBed')
|
||||
ipcRenderer.removeListener('getPicBeds', this.getPicBeds)
|
||||
}
|
||||
onDrop (e: DragEvent) {
|
||||
this.dragover = false
|
||||
this.ipcSendFiles(e.dataTransfer!.files)
|
||||
}
|
||||
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: FileWithPath[] = []
|
||||
Array.from(files).forEach((item, index) => {
|
||||
let obj = {
|
||||
name: item.name,
|
||||
path: item.path
|
||||
}
|
||||
sendFiles.push(obj)
|
||||
})
|
||||
ipcRenderer.send('uploadChoosedFiles', sendFiles)
|
||||
}
|
||||
getPasteStyle () {
|
||||
this.pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
|
||||
}
|
||||
handlePasteStyleChange (val: string) {
|
||||
this.$db.set('settings.pasteStyle', val)
|
||||
}
|
||||
uploadClipboardFiles () {
|
||||
ipcRenderer.send('uploadClipboardFilesFromUploadPage')
|
||||
}
|
||||
getDefaultPicBed () {
|
||||
const current: string = this.$db.get('picBed.current')
|
||||
this.picBed.forEach(item => {
|
||||
if (item.type === current) {
|
||||
this.picBedName = item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
getPicBeds (event: Event, picBeds: PicBedType[]) {
|
||||
this.picBed = picBeds
|
||||
this.getDefaultPicBed()
|
||||
}
|
||||
handleChangePicBed () {
|
||||
this.buildMenu()
|
||||
// this.menu.popup(remote.getCurrentWindow())
|
||||
this.menu!.popup()
|
||||
}
|
||||
buildMenu () {
|
||||
const _this = this
|
||||
const submenu = this.picBed.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
type: 'radio',
|
||||
checked: this.$db.get('picBed.current') === item.type,
|
||||
click () {
|
||||
_this.$db.set('picBed.current', item.type)
|
||||
ipcRenderer.send('syncPicBed')
|
||||
}
|
||||
sendFiles.push(obj)
|
||||
})
|
||||
this.$electron.ipcRenderer.send('uploadChoosedFiles', sendFiles)
|
||||
},
|
||||
getPasteStyle () {
|
||||
this.pasteStyle = this.$db.get('settings.pasteStyle') || 'markdown'
|
||||
},
|
||||
handlePasteStyleChange (val) {
|
||||
this.$db.set('settings.pasteStyle', val)
|
||||
},
|
||||
uploadClipboardFiles () {
|
||||
this.$electron.ipcRenderer.send('uploadClipboardFilesFromUploadPage')
|
||||
},
|
||||
getDefaultPicBed () {
|
||||
const current = this.$db.get('picBed.current')
|
||||
this.picBed.forEach(item => {
|
||||
if (item.type === current) {
|
||||
this.picBedName = item.name
|
||||
}
|
||||
})
|
||||
},
|
||||
getPicBeds (event, picBeds) {
|
||||
this.picBed = picBeds
|
||||
this.getDefaultPicBed()
|
||||
},
|
||||
handleChangePicBed () {
|
||||
this.buildMenu()
|
||||
this.menu.popup(this.$electron.remote.getCurrentWindow())
|
||||
},
|
||||
buildMenu () {
|
||||
const _this = this
|
||||
const submenu = this.picBed.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
type: 'radio',
|
||||
checked: this.$db.get('picBed.current') === item.type,
|
||||
click () {
|
||||
_this.$db.set('picBed.current', item.type)
|
||||
_this.$electron.ipcRenderer.send('syncPicBed')
|
||||
}
|
||||
}
|
||||
})
|
||||
this.menu = this.$electron.remote.Menu.buildFromTemplate(submenu)
|
||||
}
|
||||
}
|
||||
})
|
||||
// @ts-ignore
|
||||
this.menu = Menu.buildFromTemplate(submenu)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -235,4 +239,6 @@ export default {
|
||||
border-radius 0 14px 14px 0
|
||||
.paste-upload
|
||||
width 100%
|
||||
</style>
|
||||
.el-icon-caret-bottom
|
||||
cursor pointer
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="view-title">
|
||||
阿里云OSS设置
|
||||
</div>
|
||||
<el-form
|
||||
<el-form
|
||||
ref="aliyun"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
<style lang='stylus'>
|
||||
#aliyun-view
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -122,7 +122,7 @@ export default {
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
@@ -146,4 +146,4 @@ export default {
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="view-title">
|
||||
GitHub设置
|
||||
</div>
|
||||
<el-form
|
||||
<el-form
|
||||
ref="github"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
@@ -102,7 +102,7 @@ export default {
|
||||
<style lang='stylus'>
|
||||
#github-view
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="view-title">
|
||||
Imgur图床设置
|
||||
</div>
|
||||
<el-form
|
||||
<el-form
|
||||
ref="imgur"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
@@ -79,7 +79,7 @@ export default {
|
||||
<style lang='stylus'>
|
||||
#imgur-view
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -90,7 +90,7 @@ export default {
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
@@ -114,4 +114,4 @@ export default {
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
<style lang='stylus'>
|
||||
#others-view
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -106,4 +106,4 @@ export default {
|
||||
margin-bottom 10px
|
||||
.single
|
||||
text-align center
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="view-title">
|
||||
七牛图床设置
|
||||
</div>
|
||||
<el-form
|
||||
<el-form
|
||||
ref="qiniu"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
@@ -119,7 +119,7 @@ export default {
|
||||
<style lang='stylus'>
|
||||
#qiniu-view
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -130,7 +130,7 @@ export default {
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
@@ -141,4 +141,4 @@ export default {
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="view-title">
|
||||
腾讯云COS设置
|
||||
</div>
|
||||
<el-form
|
||||
<el-form
|
||||
ref="tcyun"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
@@ -137,7 +137,7 @@ export default {
|
||||
<style lang='stylus'>
|
||||
#tcyun-view
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -148,7 +148,7 @@ export default {
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
@@ -172,4 +172,4 @@ export default {
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="view-title">
|
||||
又拍云设置
|
||||
</div>
|
||||
<el-form
|
||||
<el-form
|
||||
ref="tcyun"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
@@ -110,7 +110,7 @@ export default {
|
||||
<style lang='stylus'>
|
||||
#tcyun-view
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -119,7 +119,7 @@ export default {
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
@@ -130,4 +130,4 @@ export default {
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="view-title">
|
||||
微博图床设置
|
||||
</div>
|
||||
<el-form
|
||||
<el-form
|
||||
ref="weiboForm"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
@@ -123,7 +123,7 @@ export default {
|
||||
left 60%
|
||||
#weibo-view
|
||||
.el-form
|
||||
label
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
@@ -148,4 +148,4 @@ export default {
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'tray-page',
|
||||
component: require('@/pages/TrayPage').default
|
||||
},
|
||||
{
|
||||
path: '/rename-page',
|
||||
name: 'rename-page',
|
||||
component: require('@/pages/RenamePage').default
|
||||
},
|
||||
{
|
||||
path: '/mini-page',
|
||||
name: 'mini-page',
|
||||
component: require('@/pages/MiniPage').default
|
||||
},
|
||||
{
|
||||
path: '/setting',
|
||||
name: 'setting-page',
|
||||
component: require('@/layouts/SettingPage').default,
|
||||
children: [
|
||||
{
|
||||
path: 'upload',
|
||||
component: require('@/pages/Upload').default,
|
||||
name: 'upload'
|
||||
},
|
||||
{
|
||||
path: 'weibo',
|
||||
component: require('@/pages/picbeds/Weibo').default,
|
||||
name: 'weibo'
|
||||
},
|
||||
{
|
||||
path: 'qiniu',
|
||||
component: require('@/pages/picbeds/Qiniu').default,
|
||||
name: 'qiniu'
|
||||
},
|
||||
{
|
||||
path: 'tcyun',
|
||||
component: require('@/pages/picbeds/TcYun').default,
|
||||
name: 'tcyun'
|
||||
},
|
||||
{
|
||||
path: 'upyun',
|
||||
component: require('@/pages/picbeds/UpYun').default,
|
||||
name: 'upyun'
|
||||
},
|
||||
{
|
||||
path: 'github',
|
||||
component: require('@/pages/picbeds/GitHub').default,
|
||||
name: 'github'
|
||||
},
|
||||
{
|
||||
path: 'smms',
|
||||
component: require('@/pages/picbeds/SMMS').default,
|
||||
name: 'smms'
|
||||
},
|
||||
{
|
||||
path: 'aliyun',
|
||||
component: require('@/pages/picbeds/AliYun').default,
|
||||
name: 'aliyun'
|
||||
},
|
||||
{
|
||||
path: 'imgur',
|
||||
component: require('@/pages/picbeds/Imgur').default,
|
||||
name: 'imgur'
|
||||
},
|
||||
{
|
||||
path: 'others/:type',
|
||||
component: require('@/pages/picbeds/Others').default,
|
||||
name: 'others'
|
||||
},
|
||||
{
|
||||
path: 'gallery',
|
||||
component: require('@/pages/Gallery').default,
|
||||
name: 'gallery',
|
||||
meta: {
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'setting',
|
||||
component: require('@/pages/PicGoSetting').default,
|
||||
name: 'setting'
|
||||
},
|
||||
{
|
||||
path: 'plugin',
|
||||
component: require('@/pages/Plugin').default,
|
||||
name: 'plugin'
|
||||
},
|
||||
{
|
||||
path: 'shortcut-page',
|
||||
component: require('@/pages/ShortCutPage').default,
|
||||
name: 'shortcut-page'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/'
|
||||
}
|
||||
]
|
||||
})
|
||||
108
src/renderer/router/index.ts
Normal file
108
src/renderer/router/index.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'tray-page',
|
||||
component: () => import(/* webpackChunkName: "tray" */ '@/pages/TrayPage.vue')
|
||||
},
|
||||
{
|
||||
path: '/rename-page',
|
||||
name: 'rename-page',
|
||||
component: () => import(/* webpackChunkName: "RenamePage" */ '@/pages/RenamePage.vue')
|
||||
},
|
||||
{
|
||||
path: '/mini-page',
|
||||
name: 'mini-page',
|
||||
component: () => import(/* webpackChunkName: "MiniPage" */ '@/pages/MiniPage.vue')
|
||||
},
|
||||
{
|
||||
path: '/setting',
|
||||
name: 'setting-page',
|
||||
component: () => import(/* webpackChunkName: "SettingPage" */ '@/layouts/SettingPage.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'),
|
||||
name: 'qiniu'
|
||||
},
|
||||
{
|
||||
path: 'tcyun',
|
||||
component: () => import(/* webpackChunkName: "TcYun" */ '@/pages/picbeds/TcYun.vue'),
|
||||
name: 'tcyun'
|
||||
},
|
||||
{
|
||||
path: 'upyun',
|
||||
component: () => import(/* webpackChunkName: "UpYun" */ '@/pages/picbeds/UpYun.vue'),
|
||||
name: 'upyun'
|
||||
},
|
||||
{
|
||||
path: 'github',
|
||||
component: () => import(/* webpackChunkName: "GitHub" */ '@/pages/picbeds/GitHub.vue'),
|
||||
name: 'github'
|
||||
},
|
||||
{
|
||||
path: 'smms',
|
||||
component: () => import(/* webpackChunkName: "SMMS" */ '@/pages/picbeds/SMMS.vue'),
|
||||
name: 'smms'
|
||||
},
|
||||
{
|
||||
path: 'aliyun',
|
||||
component: () => import(/* webpackChunkName: "AliYun" */ '@/pages/picbeds/AliYun.vue'),
|
||||
name: 'aliyun'
|
||||
},
|
||||
{
|
||||
path: 'imgur',
|
||||
component: () => import(/* webpackChunkName: "Imgur" */ '@/pages/picbeds/Imgur.vue'),
|
||||
name: 'imgur'
|
||||
},
|
||||
{
|
||||
path: 'others/:type',
|
||||
component: () => import(/* webpackChunkName: "Other" */ '@/pages/picbeds/Others.vue'),
|
||||
name: 'others'
|
||||
},
|
||||
{
|
||||
path: 'gallery',
|
||||
component: () => import(/* webpackChunkName: "Gallery" */ '@/pages/Gallery.vue'),
|
||||
name: 'gallery',
|
||||
meta: {
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'setting',
|
||||
component: () => import(/* webpackChunkName: "setting" */ '@/pages/PicGoSetting.vue'),
|
||||
name: 'setting'
|
||||
},
|
||||
{
|
||||
path: 'plugin',
|
||||
component: () => import(/* webpackChunkName: "Plugin" */ '@/pages/Plugin.vue'),
|
||||
name: 'plugin'
|
||||
},
|
||||
{
|
||||
path: 'shortcut',
|
||||
component: () => import(/* webpackChunkName: "ShortkeyPage" */ '@/pages/ShortCut.vue'),
|
||||
name: 'shortcut'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/'
|
||||
}
|
||||
]
|
||||
})
|
||||
@@ -1,20 +0,0 @@
|
||||
export default {
|
||||
name: '',
|
||||
data () {
|
||||
return {
|
||||
defaultPicBed: this.$db.get('picBed.current')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setDefaultPicBed (type) {
|
||||
this.$db.set('picBed.current', type)
|
||||
this.defaultPicBed = type
|
||||
const successNotification = new window.Notification('设置默认图床', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/renderer/utils/ConfirmButtonMixin.ts
Normal file
15
src/renderer/utils/ConfirmButtonMixin.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
@Component
|
||||
export default class extends Vue {
|
||||
defaultPicBed = this.$db.get('picBed.current')
|
||||
setDefaultPicBed (type: string) {
|
||||
this.$db.set('picBed.current', type)
|
||||
this.defaultPicBed = type
|
||||
const successNotification = new Notification('设置默认图床', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
class LS {
|
||||
get (name) {
|
||||
get (name: string) {
|
||||
if (localStorage.getItem(name)) {
|
||||
return JSON.parse(localStorage.getItem(name))
|
||||
return JSON.parse(localStorage.getItem(name) as string)
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
set (name, value) {
|
||||
set (name: string, value: any) {
|
||||
return localStorage.setItem(name, JSON.stringify(value))
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import keycode from 'keycode'
|
||||
|
||||
const isSpecialKey = (keyCode) => {
|
||||
const isSpecialKey = (keyCode: number) => {
|
||||
const keyArr = [
|
||||
16, // Shift
|
||||
17, // Ctrl
|
||||
@@ -12,14 +12,14 @@ const isSpecialKey = (keyCode) => {
|
||||
return keyArr.includes(keyCode)
|
||||
}
|
||||
|
||||
const keyDetect = (event) => {
|
||||
const keyDetect = (event: KeyboardEvent) => {
|
||||
const meta = process.platform === 'darwin' ? 'Cmd' : 'Super'
|
||||
let specialKey = {
|
||||
Ctrl: event.ctrlKey,
|
||||
Shift: event.shiftKey,
|
||||
Alt: event.altKey
|
||||
Alt: event.altKey,
|
||||
[meta]: event.metaKey
|
||||
}
|
||||
specialKey[meta] = event.metaKey
|
||||
|
||||
let pressKey = []
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
export default {
|
||||
mounted () {
|
||||
this.disableDragEvent()
|
||||
},
|
||||
methods: {
|
||||
disableDragEvent () {
|
||||
window.addEventListener('dragenter', this.disableDrag, false)
|
||||
window.addEventListener('dragover', this.disableDrag)
|
||||
window.addEventListener('drop', this.disableDrag)
|
||||
},
|
||||
disableDrag (e) {
|
||||
const dropzone = document.getElementById('upload-area')
|
||||
if (dropzone === null || !dropzone.contains(e.target)) {
|
||||
e.preventDefault()
|
||||
e.dataTransfer.effectAllowed = 'none'
|
||||
e.dataTransfer.dropEffect = 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('dragenter', this.disableDrag, false)
|
||||
window.removeEventListener('dragover', this.disableDrag)
|
||||
window.removeEventListener('drop', this.disableDrag)
|
||||
}
|
||||
}
|
||||
25
src/renderer/utils/mixin.ts
Normal file
25
src/renderer/utils/mixin.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
@Component
|
||||
export default class extends Vue {
|
||||
mounted () {
|
||||
this.disableDragEvent()
|
||||
}
|
||||
disableDragEvent () {
|
||||
window.addEventListener('dragenter', this.disableDrag, false)
|
||||
window.addEventListener('dragover', this.disableDrag)
|
||||
window.addEventListener('drop', this.disableDrag)
|
||||
}
|
||||
disableDrag (e: DragEvent) {
|
||||
const dropzone = document.getElementById('upload-area')
|
||||
if (dropzone === null || !dropzone.contains(<Node>e.target)) {
|
||||
e.preventDefault()
|
||||
e.dataTransfer!.effectAllowed = 'none'
|
||||
e.dataTransfer!.dropEffect = 'none'
|
||||
}
|
||||
}
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('dragenter', this.disableDrag, false)
|
||||
window.removeEventListener('dragover', this.disableDrag)
|
||||
window.removeEventListener('drop', this.disableDrag)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user