mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-07-25 07:48:19 +08:00
Changed: renderer files' structure
This commit is contained in:
Molunerfinn
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<div id="mini-page"
|
||||
:style="{ backgroundImage: 'url(' + logo + ')' }"
|
||||
:class="{ linux: os === 'linux' }"
|
||||
>
|
||||
<!-- <i class="el-icon-upload2"></i> -->
|
||||
<div
|
||||
id="upload-area"
|
||||
:class="{ 'is-dragover': dragover, uploading: showProgress, linux: os === 'linux' }" @drop.prevent="onDrop" @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
|
||||
:style="{ backgroundPosition: '0 ' + progress + '%'}"
|
||||
>
|
||||
<div id="upload-dragger" @dblclick="openUplodWindow">
|
||||
<input type="file" id="file-uploader" @change="onChange" multiple>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from './mixin'
|
||||
import picBed from '../../datastore/pic-bed.js'
|
||||
export default {
|
||||
name: 'mini-page',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
logo: 'static/logo.png',
|
||||
dragover: false,
|
||||
progress: 0,
|
||||
showProgress: false,
|
||||
showError: false,
|
||||
dragging: false,
|
||||
wX: '',
|
||||
wY: '',
|
||||
screenX: '',
|
||||
screenY: '',
|
||||
menu: null,
|
||||
os: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.os = process.platform
|
||||
},
|
||||
mounted () {
|
||||
this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
|
||||
if (progress !== -1) {
|
||||
this.showProgress = true
|
||||
this.progress = progress
|
||||
} else {
|
||||
this.progress = 100
|
||||
this.showError = true
|
||||
}
|
||||
})
|
||||
this.buildMenu()
|
||||
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)
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
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.openUplodWindow()
|
||||
} else {
|
||||
let _this = this
|
||||
const types = picBed.map(item => item.type)
|
||||
let submenuItem = this.menu.items[1].submenu.items
|
||||
submenuItem.forEach((item, index) => {
|
||||
const result = _this.$db.read().get('picBed.current').value() === types[index]
|
||||
if (result) {
|
||||
item.click()
|
||||
return true
|
||||
}
|
||||
})
|
||||
this.openContextMenu()
|
||||
}
|
||||
}
|
||||
},
|
||||
openContextMenu () {
|
||||
this.menu.popup(this.$electron.remote.getCurrentWindow())
|
||||
},
|
||||
buildMenu () {
|
||||
const _this = this
|
||||
const submenu = picBed.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
type: 'radio',
|
||||
checked: this.$db.read().get('picBed.current').value() === item.type,
|
||||
click () {
|
||||
_this.$db.read().set('picBed.current', item.type).write()
|
||||
_this.$electron.ipcRenderer.send('syncPicBed')
|
||||
}
|
||||
}
|
||||
})
|
||||
const template = [
|
||||
{
|
||||
label: '打开详细窗口',
|
||||
click () {
|
||||
_this.$electron.ipcRenderer.send('openSettingWindow')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '选择默认图床',
|
||||
type: 'submenu',
|
||||
submenu
|
||||
},
|
||||
{
|
||||
label: '剪贴板图片上传',
|
||||
click () {
|
||||
_this.$electron.ipcRenderer.send('uploadClipboardFilesFromUploadPage')
|
||||
}
|
||||
},
|
||||
{
|
||||
role: 'quit',
|
||||
label: '退出'
|
||||
}
|
||||
]
|
||||
this.menu = this.$electron.remote.Menu.buildFromTemplate(template)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('uploadProgress')
|
||||
window.removeEventListener('mousedown', this.handleMouseDown, false)
|
||||
window.removeEventListener('mousemove', this.handleMouseMove, false)
|
||||
window.removeEventListener('mouseup', this.handleMouseUp, false)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
#mini-page
|
||||
background #409EFF
|
||||
color #FFF
|
||||
height 100vh
|
||||
width 100vw
|
||||
border-radius 50%
|
||||
text-align center
|
||||
line-height 100vh
|
||||
font-size 40px
|
||||
background-size 90vh 90vw
|
||||
background-position center center
|
||||
background-repeat no-repeat
|
||||
position relative
|
||||
border 4px solid #fff
|
||||
box-sizing border-box
|
||||
cursor pointer
|
||||
&.linux
|
||||
border-radius 0
|
||||
background-size 100vh 100vw
|
||||
#upload-area
|
||||
height 100%
|
||||
width 100%
|
||||
border-radius 50%
|
||||
transition all .2s ease-in-out
|
||||
&.linux
|
||||
border-radius 0
|
||||
&.uploading
|
||||
background: linear-gradient(to top, #409EFF 50%, #fff 51%)
|
||||
background-size 200%
|
||||
#upload-dragger
|
||||
height 100%
|
||||
&.is-dragover
|
||||
background rgba(0,0,0,0.3)
|
||||
#file-uploader
|
||||
display none
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<div id="rename-page">
|
||||
<el-form
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item
|
||||
label="文件改名"
|
||||
>
|
||||
<el-input
|
||||
v-model="fileName"
|
||||
size="small"
|
||||
@keyup.enter.native="confirmName"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<div class="pull-right">
|
||||
<el-button @click="cancel" round size="mini">取消</el-button>
|
||||
<el-button type="primary" @click="confirmName" round size="mini">确定</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from './mixin'
|
||||
export default {
|
||||
name: 'rename-page',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
fileName: '',
|
||||
id: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$electron.ipcRenderer.on('rename', (event, name, id) => {
|
||||
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)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('rename')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
#rename-page
|
||||
padding 0 20px
|
||||
.pull-right
|
||||
float right
|
||||
.el-form-item__label
|
||||
color #ddd
|
||||
</style>
|
||||
@@ -1,358 +0,0 @@
|
||||
<template>
|
||||
<div id="setting-page">
|
||||
<div class="fake-title-bar">
|
||||
PicGo - {{ version }}
|
||||
<div class="handle-bar" v-if="os !== 'darwin'">
|
||||
<i class="el-icon-minus" @click="minimizeWindow"></i>
|
||||
<i class="el-icon-circle-plus-outline" @click="openMiniWindow"></i>
|
||||
<i class="el-icon-close" @click="closeWindow"></i>
|
||||
</div>
|
||||
</div>
|
||||
<el-row style="padding-top: 22px;" class="main-content">
|
||||
<el-col :span="5" class="side-bar-menu">
|
||||
<el-menu
|
||||
class="picgo-sidebar"
|
||||
:default-active="defaultActive"
|
||||
@select="handleSelect"
|
||||
:unique-opened="true"
|
||||
>
|
||||
<el-menu-item index="upload">
|
||||
<i class="el-icon-upload"></i>
|
||||
<span slot="title">上传区</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="gallery">
|
||||
<i class="el-icon-picture"></i>
|
||||
<span slot="title">相册</span>
|
||||
</el-menu-item>
|
||||
<el-submenu
|
||||
index="sub-menu"
|
||||
>
|
||||
<template slot="title">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span>图床设置</span>
|
||||
</template>
|
||||
<template
|
||||
v-for="item in picBed"
|
||||
>
|
||||
<el-menu-item
|
||||
v-if="item.visible"
|
||||
:index="item.type"
|
||||
:key="item.type"
|
||||
>
|
||||
<!-- <i :class="`el-icon-ui-${item.type}`"></i> -->
|
||||
<span slot="title">{{ item.name }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-menu-item index="setting">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">PicGo设置</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="plugin">
|
||||
<i class="el-icon-share"></i>
|
||||
<span slot="title">插件设置</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<i class="el-icon-info setting-window" @click="openDialog"></i>
|
||||
</el-col>
|
||||
<el-col :span="19" :offset="5" style="height: 428px">
|
||||
<router-view></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
title="赞助PicGo"
|
||||
:visible.sync="visible"
|
||||
width="70%"
|
||||
top="10vh"
|
||||
>
|
||||
PicGo是免费开源的软件，如果你喜欢它，对你有帮助，不妨请我喝杯咖啡？
|
||||
<el-row class="support">
|
||||
<el-col :span="12">
|
||||
<img src="https://user-images.githubusercontent.com/12621342/34188165-e7cdf372-e56f-11e7-8732-1338c88b9bb7.jpg" alt="支付宝">
|
||||
<div class="support-title">支付宝</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img src="https://user-images.githubusercontent.com/12621342/34188201-212cda84-e570-11e7-9b7a-abb298699d85.jpg" alt="支付宝">
|
||||
<div class="support-title">微信</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="修改快捷键"
|
||||
:visible.sync="keyBindingVisible"
|
||||
>
|
||||
<el-form
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
label="快捷上传"
|
||||
>
|
||||
<el-input
|
||||
class="align-center"
|
||||
@keydown.native.prevent="keyDetect('upload', $event)"
|
||||
v-model="shortKey.upload"
|
||||
:autofocus="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="cancelKeyBinding">取消</el-button>
|
||||
<el-button type="primary" @click="confirmKeyBinding">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="自定义链接格式"
|
||||
:visible.sync="customLinkVisible"
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
:model="customLink"
|
||||
ref="customLink"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item
|
||||
label="用占位符$url来表示url的位置"
|
||||
prop="value"
|
||||
>
|
||||
<el-input
|
||||
class="align-center"
|
||||
v-model="customLink.value"
|
||||
:autofocus="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>
|
||||
如[]($url)
|
||||
</div>
|
||||
<span slot="footer">
|
||||
<el-button @click="cancelCustomLink">取消</el-button>
|
||||
<el-button type="primary" @click="confirmCustomLink">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import pkg from '../../../package.json'
|
||||
import keyDetect from 'utils/key-binding'
|
||||
import { remote } from 'electron'
|
||||
import db from '../../datastore'
|
||||
import mixin from './mixin'
|
||||
const { Menu, dialog, BrowserWindow } = remote
|
||||
export default {
|
||||
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.read().get('customLink').value() || '$url'
|
||||
},
|
||||
rules: {
|
||||
value: [
|
||||
{ validator: customLinkRule, trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
os: '',
|
||||
shortKey: {
|
||||
upload: db.read().get('shortKey.upload').value()
|
||||
},
|
||||
picBed: this.$picBed
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.os = process.platform
|
||||
this.buildMenu()
|
||||
},
|
||||
methods: {
|
||||
handleSelect (index) {
|
||||
this.$router.push({
|
||||
name: index
|
||||
})
|
||||
},
|
||||
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.read().get('shortKey').value()
|
||||
},
|
||||
confirmKeyBinding () {
|
||||
const oldKey = db.read().get('shortKey').value()
|
||||
db.read().set('shortKey', this.shortKey).write()
|
||||
this.keyBindingVisible = false
|
||||
this.$electron.ipcRenderer.send('updateShortKey', oldKey)
|
||||
},
|
||||
cancelCustomLink () {
|
||||
this.customLinkVisible = false
|
||||
this.customLink.value = db.read().get('customLink').value() || '$url'
|
||||
},
|
||||
confirmCustomLink () {
|
||||
this.$refs.customLink.validate((valid) => {
|
||||
if (valid) {
|
||||
db.read().set('customLink', this.customLink.value).write()
|
||||
this.customLinkVisible = false
|
||||
this.$electron.ipcRenderer.send('updateCustomLink')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
openMiniWindow () {
|
||||
this.$electron.ipcRenderer.send('openMiniWindow')
|
||||
}
|
||||
},
|
||||
beforeRouteEnter: (to, from, next) => {
|
||||
next(vm => {
|
||||
vm.defaultActive = to.name
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
#setting-page
|
||||
.fake-title-bar
|
||||
-webkit-app-region drag
|
||||
height h = 22px
|
||||
width 100%
|
||||
text-align center
|
||||
color #eee
|
||||
font-size 12px
|
||||
line-height h
|
||||
position fixed
|
||||
z-index 100
|
||||
.handle-bar
|
||||
position absolute
|
||||
top 2px
|
||||
right 4px
|
||||
width 60px
|
||||
z-index 10000
|
||||
-webkit-app-region no-drag
|
||||
i
|
||||
cursor pointer
|
||||
font-size 16px
|
||||
.el-icon-minus
|
||||
&:hover
|
||||
color #409EFF
|
||||
.el-icon-close
|
||||
&:hover
|
||||
color #F15140
|
||||
.el-icon-circle-plus-outline
|
||||
&:hover
|
||||
color #69C282
|
||||
.side-bar-menu
|
||||
position fixed
|
||||
height calc(100vh - 22px)
|
||||
overflow-x hidden
|
||||
overflow-y auto
|
||||
width 170px
|
||||
.el-icon-info.setting-window
|
||||
position fixed
|
||||
bottom 4px
|
||||
left 4px
|
||||
cursor pointer
|
||||
color #878d99
|
||||
transition .2s all ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
.el-menu
|
||||
border-right none
|
||||
background transparent
|
||||
width 170px
|
||||
&-item
|
||||
color #eee
|
||||
position relative
|
||||
&:focus,
|
||||
&:hover
|
||||
color #fff
|
||||
background transparent
|
||||
&.is-active
|
||||
color active-color = #409EFF
|
||||
&:before
|
||||
content ''
|
||||
position absolute
|
||||
width 3px
|
||||
height 20px
|
||||
right 0
|
||||
top 18px
|
||||
background active-color
|
||||
.el-submenu__title
|
||||
span
|
||||
color #eee
|
||||
&:hover
|
||||
background transparent
|
||||
span
|
||||
color #fff
|
||||
.el-submenu
|
||||
.el-menu-item
|
||||
min-width 166px
|
||||
&.is-active
|
||||
&:before
|
||||
top 16px
|
||||
.main-content
|
||||
padding-top 22px
|
||||
position relative
|
||||
z-index 10
|
||||
.el-dialog__body
|
||||
padding 20px
|
||||
.support
|
||||
text-align center
|
||||
&-title
|
||||
text-align center
|
||||
color #878d99
|
||||
.align-center
|
||||
input
|
||||
text-align center
|
||||
*::-webkit-scrollbar
|
||||
width 8px
|
||||
height 8px
|
||||
*::-webkit-scrollbar-thumb
|
||||
border-radius 4px
|
||||
background #6f6f6f
|
||||
*::-webkit-scrollbar-track
|
||||
background-color transparent
|
||||
</style>
|
||||
@@ -1,154 +0,0 @@
|
||||
<template>
|
||||
<div id="aliyun-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="view-title">
|
||||
阿里云OSS设置
|
||||
</div>
|
||||
<el-form
|
||||
ref="aliyun"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
:model="form"
|
||||
size="mini">
|
||||
<el-form-item
|
||||
label="设定KeyId"
|
||||
prop="accessKeyId"
|
||||
:rules="{
|
||||
required: true, message: 'AccessKeyId不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.accessKeyId" placeholder="AccessKeyId" @keyup.native.enter="confirm"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定KeySecret"
|
||||
prop="accessKeySecret"
|
||||
:rules="{
|
||||
required: true, message: 'AccessKeySecret不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.accessKeySecret" type="password" @keyup.native.enter="confirm" placeholder="AccessKeySecret"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定存储空间名"
|
||||
prop="bucket"
|
||||
:rules="{
|
||||
required: true, message: 'Bucket不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.bucket" @keyup.native.enter="confirm" placeholder="Bucket"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="确认存储区域"
|
||||
prop="area"
|
||||
:rules="{
|
||||
required: true, message: '区域代码不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.area" @keyup.native.enter="confirm" placeholder="例如oss-cn-beijing"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="指定存储路径"
|
||||
>
|
||||
<el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定自定义域名"
|
||||
>
|
||||
<el-input v-model="form.customUrl" @keyup.native.enter="confirm" placeholder="例如https://xxxx.com"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="confirm" round>确定</el-button>
|
||||
<el-button type="success" @click="setDefaultPicBed('aliyun')" round :disabled="defaultPicBed === 'aliyun'">设为默认图床</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'aliyun',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
accessKeyId: '',
|
||||
accessKeySecret: '',
|
||||
bucket: '',
|
||||
area: '',
|
||||
path: '',
|
||||
customUrl: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const config = this.$db.get('picBed.aliyun').value()
|
||||
if (config) {
|
||||
for (let i in config) {
|
||||
this.form[i] = config[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$refs.aliyun.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.set('picBed.aliyun', this.form).write()
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#aliyun-view
|
||||
.el-form
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
.el-input__inner
|
||||
border-radius 19px
|
||||
&-item
|
||||
margin-bottom 10.5px
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 14px 0 0 14px
|
||||
.el-radio-button:last-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
.el-switch__label
|
||||
color #eee
|
||||
&.is-active
|
||||
color #409EFF
|
||||
.el-icon-question
|
||||
font-size 20px
|
||||
float right
|
||||
margin-top 9px
|
||||
color #eee
|
||||
cursor pointer
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
</style>
|
||||
@@ -1,397 +0,0 @@
|
||||
<template>
|
||||
<div id="gallery-view">
|
||||
<div class="view-title">
|
||||
相册 - {{ filterList.length }} <i class="el-icon-caret-bottom" @click="toggleHandleBar" :class="{'active': handleBarActive}"></i>
|
||||
</div>
|
||||
<transition name="el-zoom-in-center">
|
||||
<el-row v-show="handleBarActive">
|
||||
<el-col :span="20" :offset="2" :class="{ 'long-list': filterList.length > 4 }">
|
||||
<el-row class="handle-bar" :gutter="16">
|
||||
<el-col :span="6" v-for="item in $picBed" :key="item.type">
|
||||
<div class="pic-bed-item" @click="choosePicBed(item.type)" :class="{active: choosedPicBed.indexOf(item.type) !== -1}">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="handle-bar" :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-input placeholder="搜索" size="mini" v-model="searchText">
|
||||
<i slot="suffix" class="el-input__icon el-icon-close" v-if="searchText" @click="cleanSearch" style="cursor: pointer"></i>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="item-base copy" :class="{ active: isMultiple(choosedList)}" @click="multiCopy">
|
||||
<i class="el-icon-document"></i> 批量复制
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="item-base delete" :class="{ active: isMultiple(choosedList)}" @click="multiDelete">
|
||||
<i class="el-icon-delete"></i> 批量删除
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</transition>
|
||||
<el-row class="gallery-list" :class="{ small: handleBarActive }">
|
||||
<el-col :span="20" :offset="2">
|
||||
<el-row :gutter="16">
|
||||
<gallerys
|
||||
:images="images"
|
||||
:index="idx"
|
||||
@close="handleClose"
|
||||
:options="options"
|
||||
></gallerys>
|
||||
<el-col :span="6" v-for="(item, index) in images" :key="item.id" class="gallery-list__img">
|
||||
<div
|
||||
class="gallery-list__item"
|
||||
v-lazy:background-image="item.imgUrl"
|
||||
@click="zoomImage(index)"
|
||||
>
|
||||
</div>
|
||||
<div class="gallery-list__tool-panel">
|
||||
<i class="el-icon-document" @click="copy(item.imgUrl)"></i>
|
||||
<i class="el-icon-edit-outline" @click="openDialog(item)"></i>
|
||||
<i class="el-icon-delete" @click="remove(item.id)"></i>
|
||||
<el-checkbox v-model="choosedList[item.id]" class="pull-right" @change=" handleBarActive = true"></el-checkbox>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
title="修改图片URL"
|
||||
width="500px"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<el-input v-model="imgInfo.imgUrl"></el-input>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmModify">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import gallerys from 'vue-gallery'
|
||||
import pasteStyle from '../../../main/utils/pasteTemplate'
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'gallery',
|
||||
mixins: [mixin],
|
||||
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
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getGallery()
|
||||
this.$electron.ipcRenderer.on('updateGallery', (event) => {
|
||||
this.$nextTick(() => {
|
||||
this.filterList = this.getGallery()
|
||||
})
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
filterList: {
|
||||
get () {
|
||||
return this.getGallery()
|
||||
},
|
||||
set (val) {
|
||||
return this.val
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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 (url) {
|
||||
const style = this.$db.read().get('settings.pasteStyle').value() || 'markdown'
|
||||
const copyLink = pasteStyle(style, url)
|
||||
const obj = {
|
||||
title: '复制链接成功',
|
||||
body: copyLink,
|
||||
icon: url
|
||||
}
|
||||
const myNotification = new window.Notification(obj.title, obj)
|
||||
this.$electron.clipboard.writeText(copyLink)
|
||||
myNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
},
|
||||
remove (id) {
|
||||
this.$confirm('此操作将把该图片移出相册, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$db.read().get('uploaded').removeById(id).write()
|
||||
const obj = {
|
||||
title: '操作结果',
|
||||
body: '删除成功'
|
||||
}
|
||||
const myNotification = new window.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()
|
||||
const obj = {
|
||||
title: '修改图片URL成功',
|
||||
body: this.imgInfo.imgUrl,
|
||||
icon: this.imgInfo.imgUrl
|
||||
}
|
||||
const myNotification = new window.Notification(obj.title, obj)
|
||||
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)
|
||||
},
|
||||
multiDelete () {
|
||||
if (Object.values(this.choosedList).some(item => item)) {
|
||||
this.$confirm('将删除刚才选中的图片，是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
Object.keys(this.choosedList).forEach(key => {
|
||||
if (this.choosedList[key]) {
|
||||
this.$db.read().get('uploaded').removeById(key).write()
|
||||
}
|
||||
})
|
||||
this.choosedList = {}
|
||||
this.getGallery()
|
||||
const obj = {
|
||||
title: '操作结果',
|
||||
body: '删除成功'
|
||||
}
|
||||
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.read().get('settings.pasteStyle').value() || 'markdown'
|
||||
Object.keys(this.choosedList).forEach(key => {
|
||||
if (this.choosedList[key]) {
|
||||
copyString += pasteStyle(style, this.$db.read().get('uploaded').getById(key).value().imgUrl) + '\n'
|
||||
}
|
||||
})
|
||||
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
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('updateGallery')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 10px auto
|
||||
.sub-title
|
||||
font-size 14px
|
||||
.el-icon-caret-bottom
|
||||
cursor: pointer
|
||||
transition all .2s ease-in-out
|
||||
&.active
|
||||
transform: rotate(180deg)
|
||||
.item-base
|
||||
background #2E2E2E
|
||||
text-align center
|
||||
margin-bottom 10px
|
||||
padding 5px 0
|
||||
cursor pointer
|
||||
font-size 13px
|
||||
transition all .2s ease-in-out
|
||||
&.copy
|
||||
cursor not-allowed
|
||||
background #49B1F5
|
||||
&.active
|
||||
cursor pointer
|
||||
background #1B9EF3
|
||||
color #fff
|
||||
&.delete
|
||||
cursor not-allowed
|
||||
background #F47466
|
||||
&.active
|
||||
cursor pointer
|
||||
background #F15140
|
||||
color #fff
|
||||
.long-list
|
||||
width: calc(83.3333333% - 6px)
|
||||
#gallery-view
|
||||
position relative
|
||||
.pull-right
|
||||
float right
|
||||
.gallery-list
|
||||
height 360px
|
||||
box-sizing border-box
|
||||
padding 8px 0
|
||||
overflow-y auto
|
||||
overflow-x hidden
|
||||
position absolute
|
||||
top: 38px
|
||||
transition all .2s ease-in-out .1s
|
||||
width 100%
|
||||
&.small
|
||||
height: 245px
|
||||
top: 152px
|
||||
&__img
|
||||
height 150px
|
||||
position relative
|
||||
margin-bottom 16px
|
||||
&__item
|
||||
width 100%
|
||||
height 120px
|
||||
background-size cover
|
||||
background-position 50% 50%
|
||||
background-repeat no-repeat
|
||||
transition all .2s ease-in-out
|
||||
cursor pointer
|
||||
margin-bottom 8px
|
||||
&-fake
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
opacity 0
|
||||
width 100%
|
||||
z-index -1
|
||||
&:hover
|
||||
background-color #49B1F5
|
||||
transform scale(1.1)
|
||||
&__tool-panel
|
||||
color #ddd
|
||||
i
|
||||
cursor pointer
|
||||
transition all .2s ease-in-out
|
||||
&.el-icon-document
|
||||
&:hover
|
||||
color #49B1F5
|
||||
&.el-icon-edit-outline
|
||||
&:hover
|
||||
color #69C282
|
||||
&.el-icon-delete
|
||||
&:hover
|
||||
color #F15140
|
||||
.handle-bar
|
||||
color #ddd
|
||||
.pic-bed-item
|
||||
@extend .item-base
|
||||
&:hover
|
||||
background #A4D8FA
|
||||
color #fff
|
||||
&.active
|
||||
background #49B1F5
|
||||
color #fff
|
||||
.el-input__inner
|
||||
border-radius 0
|
||||
</style>
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<div id="github-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="view-title">
|
||||
GitHub设置
|
||||
</div>
|
||||
<el-form
|
||||
ref="github"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
:model="form"
|
||||
size="mini">
|
||||
<el-form-item
|
||||
label="设定仓库名"
|
||||
prop="repo"
|
||||
:rules="{
|
||||
required: true, message: '仓库名不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.repo" @keyup.native.enter="confirm" placeholder="格式：username/repo"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定分支名"
|
||||
prop="branch"
|
||||
:rules="{
|
||||
required: true, message: '分支名不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.branch" @keyup.native.enter="confirm" placeholder="例如：master"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定Token"
|
||||
prop="token"
|
||||
:rules="{
|
||||
required: true, message: 'Token不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.token" @keyup.native.enter="confirm" placeholder="token"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="指定存储路径"
|
||||
>
|
||||
<el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定自定义域名"
|
||||
>
|
||||
<el-input v-model="form.customUrl" @keyup.native.enter="confirm" placeholder="例如https://xxxx.com"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="confirm" round>确定</el-button>
|
||||
<el-button type="success" @click="setDefaultPicBed('github')" round :disabled="defaultPicBed === 'github'">设为默认图床</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'upyun',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
repo: '',
|
||||
token: '',
|
||||
path: '',
|
||||
customUrl: '',
|
||||
branch: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const config = this.$db.get('picBed.github').value()
|
||||
if (config) {
|
||||
for (let i in config) {
|
||||
this.form[i] = config[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$refs.github.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.set('picBed.github', this.form).write()
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#github-view
|
||||
.el-form
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
.el-input__inner
|
||||
border-radius 19px
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 14px 0 0 14px
|
||||
.el-radio-button:last-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
</style>
|
||||
@@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<div id="imgur-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="view-title">
|
||||
Imgur图床设置
|
||||
</div>
|
||||
<el-form
|
||||
ref="imgur"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
:model="form"
|
||||
size="mini">
|
||||
<el-form-item
|
||||
label="设定ClientId"
|
||||
prop="clientId"
|
||||
:rules="{
|
||||
required: true, message: 'ClientId不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.clientId" placeholder="ClientId" @keyup.native.enter="confirm"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定代理"
|
||||
prop="proxy"
|
||||
>
|
||||
<el-input v-model="form.proxy" placeholder="例如：http://127.0.0.1:1080" @keyup.native.enter="confirm"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="confirm" round>确定</el-button>
|
||||
<el-button type="success" @click="setDefaultPicBed('imgur')" round :disabled="defaultPicBed === 'imgur'">设为默认图床</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'imgur',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
clientId: '',
|
||||
proxy: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const config = this.$db.get('picBed.imgur').value()
|
||||
if (config) {
|
||||
for (let i in config) {
|
||||
this.form[i] = config[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$refs.imgur.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.set('picBed.imgur', this.form).write()
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#imgur-view
|
||||
.el-form
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
.el-input__inner
|
||||
border-radius 19px
|
||||
&-item
|
||||
margin-bottom 10.5px
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 14px 0 0 14px
|
||||
.el-radio-button:last-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
.el-switch__label
|
||||
color #eee
|
||||
&.is-active
|
||||
color #409EFF
|
||||
.el-icon-question
|
||||
font-size 20px
|
||||
float right
|
||||
margin-top 9px
|
||||
color #eee
|
||||
cursor pointer
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
</style>
|
||||
@@ -1,390 +0,0 @@
|
||||
<template>
|
||||
<div id="picgo-setting">
|
||||
<div class="view-title">
|
||||
PicGo设置
|
||||
</div>
|
||||
<el-row class="setting-list">
|
||||
<el-col :span="15" :offset="4">
|
||||
<el-row>
|
||||
<el-form
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
size="small"
|
||||
>
|
||||
<el-form-item
|
||||
label="修改快捷键"
|
||||
>
|
||||
<el-button type="primary" round size="mini" @click="keyBindingVisible = true">点击设置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="自定义链接格式"
|
||||
>
|
||||
<el-button type="primary" round size="mini" @click="customLinkVisible = true">点击设置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="检查更新"
|
||||
>
|
||||
<el-button type="primary" round size="mini" @click="checkUpdate">点击设置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="打开更新助手"
|
||||
>
|
||||
<el-switch
|
||||
v-model="form.updateHelper"
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
@change="updateHelperChange"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="开机自启"
|
||||
>
|
||||
<el-switch
|
||||
v-model="form.autoStart"
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
@change="handleAutoStartChange"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="上传前重命名"
|
||||
>
|
||||
<el-switch
|
||||
v-model="form.rename"
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
@change="handleRename"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="时间戳重命名"
|
||||
>
|
||||
<el-switch
|
||||
v-model="form.autoRename"
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
@change="handleAutoRename"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="开启上传提示"
|
||||
>
|
||||
<el-switch
|
||||
v-model="form.uploadNotification"
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
@change="handleUploadNotification"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="mini窗口置顶"
|
||||
>
|
||||
<el-switch
|
||||
v-model="form.miniWindowOntop"
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
@change="handleMiniWindowOntop"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="选择显示的图床"
|
||||
>
|
||||
<el-checkbox-group
|
||||
v-model="form.showPicBedList"
|
||||
@change="handleShowPicBedListChange"
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="item in picBed"
|
||||
:label="item.name"
|
||||
:key="item.name"
|
||||
></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
title="修改快捷键"
|
||||
:visible.sync="keyBindingVisible"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<el-form
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
label="快捷上传"
|
||||
>
|
||||
<el-input
|
||||
class="align-center"
|
||||
@keydown.native.prevent="keyDetect('upload', $event)"
|
||||
v-model="shortKey.upload"
|
||||
:autofocus="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="cancelKeyBinding">取消</el-button>
|
||||
<el-button type="primary" @click="confirmKeyBinding">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="自定义链接格式"
|
||||
:visible.sync="customLinkVisible"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
:model="customLink"
|
||||
ref="customLink"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item
|
||||
label="用占位符$url来表示url的位置"
|
||||
prop="value"
|
||||
>
|
||||
<el-input
|
||||
class="align-center"
|
||||
v-model="customLink.value"
|
||||
:autofocus="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>
|
||||
如[]($url)
|
||||
</div>
|
||||
<span slot="footer">
|
||||
<el-button @click="cancelCustomLink">取消</el-button>
|
||||
<el-button type="primary" @click="confirmCustomLink">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="检查更新"
|
||||
:visible.sync="checkUpdateVisible"
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<div>
|
||||
当前版本：{{ version }}
|
||||
</div>
|
||||
<div>
|
||||
最新版本：{{ latestVersion ? latestVersion : '正在获取中...' }}
|
||||
</div>
|
||||
<div v-if="needUpdate">
|
||||
PicGo更新啦，请点击确定打开下载页面
|
||||
</div>
|
||||
<span slot="footer">
|
||||
<el-button @click="cancelCheckVersion">取消</el-button>
|
||||
<el-button type="primary" @click="confirmCheckVersion">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import db from '../../../datastore'
|
||||
import keyDetect from 'utils/key-binding'
|
||||
import pkg from '../../../../package.json'
|
||||
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)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const customLinkRule = (rule, value, callback) => {
|
||||
if (!/\$url/.test(value)) {
|
||||
return callback(new Error('必须含有$url'))
|
||||
} else {
|
||||
return callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
form: {
|
||||
updateHelper: this.$db.read().get('settings.showUpdateTip').value(),
|
||||
showPicBedList: [],
|
||||
autoStart: this.$db.read().get('settings.autoStart').value() || false,
|
||||
rename: this.$db.read().get('settings.rename').value() || false,
|
||||
autoRename: this.$db.read().get('settings.autoRename').value() || false,
|
||||
uploadNotification: this.$db.read().get('settings.uploadNotification').value() || false,
|
||||
miniWindowOntop: this.$db.read().get('settings.miniWindowOntop').value() || false
|
||||
},
|
||||
picBed: this.$picBed,
|
||||
keyBindingVisible: false,
|
||||
customLinkVisible: false,
|
||||
checkUpdateVisible: false,
|
||||
customLink: {
|
||||
value: this.$db.read().get('settings.customLink').value() || '$url'
|
||||
},
|
||||
shortKey: {
|
||||
upload: this.$db.read().get('settings.shortKey.upload').value()
|
||||
},
|
||||
rules: {
|
||||
value: [
|
||||
{ validator: customLinkRule, trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
version: pkg.version,
|
||||
latestVersion: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.form.showPicBedList = this.picBed.map(item => {
|
||||
if (item.visible) {
|
||||
return item.name
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
keyDetect (type, event) {
|
||||
this.shortKey[type] = keyDetect(event).join('+')
|
||||
},
|
||||
cancelKeyBinding () {
|
||||
this.keyBindingVisible = false
|
||||
this.shortKey = this.$db.read().get('settings.shortKey').value()
|
||||
},
|
||||
confirmKeyBinding () {
|
||||
const oldKey = this.$db.read().get('settings.shortKey').value()
|
||||
this.$db.read().set('settings.shortKey', this.shortKey).write()
|
||||
this.keyBindingVisible = false
|
||||
this.$electron.ipcRenderer.send('updateShortKey', oldKey)
|
||||
},
|
||||
cancelCustomLink () {
|
||||
this.customLinkVisible = false
|
||||
this.customLink.value = this.$db.read().get('settings.customLink').value() || '$url'
|
||||
},
|
||||
confirmCustomLink () {
|
||||
this.$refs.customLink.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.read().set('settings.customLink', this.customLink.value).write()
|
||||
this.customLinkVisible = false
|
||||
this.$electron.ipcRenderer.send('updateCustomLink')
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
updateHelperChange (val) {
|
||||
this.$db.read().set('settings.showUpdateTip', val).write()
|
||||
},
|
||||
handleShowPicBedListChange (val) {
|
||||
const list = this.picBed.map(item => {
|
||||
if (!val.includes(item.name)) {
|
||||
item.visible = false
|
||||
} else {
|
||||
item.visible = true
|
||||
}
|
||||
return item
|
||||
})
|
||||
this.$db.read().set('picBed.list', list).write()
|
||||
},
|
||||
handleAutoStartChange (val) {
|
||||
this.$db.read().set('settings.autoStart', val).write()
|
||||
this.$electron.ipcRenderer.send('autoStart', val)
|
||||
},
|
||||
handleRename (val) {
|
||||
this.$db.read().set('settings.rename', val).write()
|
||||
},
|
||||
handleAutoRename (val) {
|
||||
this.$db.read().set('settings.autoRename', val).write()
|
||||
},
|
||||
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.read().set('settings.uploadNotification', val).write()
|
||||
},
|
||||
handleMiniWindowOntop (val) {
|
||||
this.$db.read().set('settings.miniWindowOntop', val).write()
|
||||
this.$message('需要重启生效')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.el-message
|
||||
left 60%
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#picgo-setting
|
||||
.sub-title
|
||||
font-size 14px
|
||||
.setting-list
|
||||
height 360px
|
||||
box-sizing border-box
|
||||
overflow-y auto
|
||||
overflow-x hidden
|
||||
.setting-list
|
||||
.el-form
|
||||
label
|
||||
line-height 32px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
.el-button-group
|
||||
width 100%
|
||||
.el-button
|
||||
width 50%
|
||||
.el-input__inner
|
||||
border-radius 19px
|
||||
.el-radio-group
|
||||
margin-left 25px
|
||||
.el-switch__label
|
||||
color #eee
|
||||
&.is-active
|
||||
color #409EFF
|
||||
.el-icon-question
|
||||
font-size 20px
|
||||
float right
|
||||
margin-top 9px
|
||||
color #eee
|
||||
cursor pointer
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
.el-checkbox-group
|
||||
label
|
||||
margin-right 30px
|
||||
width 100px
|
||||
.el-checkbox+.el-checkbox
|
||||
margin-right 30px
|
||||
margin-left 0
|
||||
.confirm-button
|
||||
width 100%
|
||||
</style>
|
||||
@@ -1,372 +0,0 @@
|
||||
<template>
|
||||
<div id="plugin-view">
|
||||
<div class="view-title">
|
||||
插件设置
|
||||
</div>
|
||||
<el-row class="handle-bar" :class="{ 'cut-width': pluginList.length > 6 }">
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
placeholder="搜索npm上的PicGo插件"
|
||||
size="small"
|
||||
>
|
||||
<i slot="suffix" class="el-input__icon el-icon-close" v-if="searchText" @click="cleanSearch" style="cursor: pointer"></i>
|
||||
</el-input>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="plugin-list" v-loading="loading">
|
||||
<el-col :span="12" v-for="(item, index) in pluginList" :key="item.name">
|
||||
<div class="plugin-item">
|
||||
<img class="plugin-item__logo" :src="item.logo"
|
||||
onerror="this.src='static/logo.png'"
|
||||
>
|
||||
<div class="plugin-item__content">
|
||||
<div class="plugin-item__name">
|
||||
{{ item.name }} <small>{{ ' ' + item.version }}</small>
|
||||
</div>
|
||||
<div class="plugin-item__desc">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="plugin-item__info-bar">
|
||||
<span class="plugin-item__author">
|
||||
{{ item.author }}
|
||||
</span>
|
||||
<span class="plugin-item__config" >
|
||||
<template v-if="searchText">
|
||||
<template v-if="!item.hasInstall">
|
||||
<span class="config-button install" v-if="!item.installing" @click="installPlugin(item)">
|
||||
安装
|
||||
</span>
|
||||
<span v-else="item.installing" class="config-button installing">
|
||||
安装中
|
||||
</span>
|
||||
<span class="config-button reload" v-if="item.reload" @click="reloadApp">
|
||||
重启
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="config-button" v-if="item.reload" @click="reloadApp">
|
||||
重启
|
||||
</span>
|
||||
<i
|
||||
class="el-icon-setting"
|
||||
@click="buildContextMenu(item)"
|
||||
></i>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:modal-append-to-body="false"
|
||||
:title="`配置${configName}`"
|
||||
width="70%"
|
||||
>
|
||||
<config-form
|
||||
:config="config"
|
||||
:type="currentType"
|
||||
:name="configName"
|
||||
ref="configForm"
|
||||
>
|
||||
</config-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="dialogVisible = false" round>取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirmConfig" round>确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ConfigForm from '../ConfigForm'
|
||||
import { debounce } from 'lodash'
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'plugin',
|
||||
mixins: [mixin],
|
||||
components: {
|
||||
ConfigForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchText: '',
|
||||
pluginList: [],
|
||||
menu: null,
|
||||
config: [],
|
||||
currentType: '',
|
||||
configName: '',
|
||||
dialogVisible: false,
|
||||
pluginNameList: [],
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
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.getSearchResult(val)
|
||||
} else {
|
||||
this.getPluginList()
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$electron.ipcRenderer.on('pluginList', (evt, list) => {
|
||||
this.pluginList = list.map(item => {
|
||||
item.reload = false
|
||||
return item
|
||||
})
|
||||
this.pluginNameList = list.map(item => item.name)
|
||||
this.loading = false
|
||||
})
|
||||
this.$electron.ipcRenderer.on('installSuccess', (evt, plugin) => {
|
||||
this.loading = false
|
||||
this.pluginList.forEach(item => {
|
||||
if (item.name === plugin) {
|
||||
item.installing = false
|
||||
item.reload = true
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$electron.ipcRenderer.on('uninstallSuccess', (evt, plugin) => {
|
||||
this.loading = false
|
||||
this.pluginList.forEach(item => {
|
||||
if (item.name === plugin) {
|
||||
item.reload = true
|
||||
item.hasInstall = false
|
||||
}
|
||||
})
|
||||
})
|
||||
this.getPluginList()
|
||||
this.getSearchResult = debounce(this.getSearchResult, 250)
|
||||
},
|
||||
methods: {
|
||||
buildContextMenu (plugin) {
|
||||
const _this = this
|
||||
let menu = [{
|
||||
label: '启用插件',
|
||||
enabled: !plugin.enabled,
|
||||
click () {
|
||||
_this.$db.read().set(`plugins.picgo-plugin-${plugin.name}`, true).write()
|
||||
plugin.enabled = true
|
||||
// plugin.reload = true
|
||||
}
|
||||
}, {
|
||||
label: '禁用插件',
|
||||
enabled: plugin.enabled,
|
||||
click () {
|
||||
_this.$db.read().set(`plugins.picgo-plugin-${plugin.name}`, false).write()
|
||||
plugin.enabled = false
|
||||
// plugin.reload = true
|
||||
}
|
||||
}, {
|
||||
label: '卸载插件',
|
||||
click () {
|
||||
_this.loading = true
|
||||
_this.uninstallPlugin(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)
|
||||
}
|
||||
}
|
||||
this.menu = this.$electron.remote.Menu.buildFromTemplate(menu)
|
||||
this.menu.popup(this.$electron.remote.getCurrentWindow())
|
||||
},
|
||||
getPluginList () {
|
||||
this.$electron.ipcRenderer.send('getPluginList')
|
||||
},
|
||||
installPlugin (item) {
|
||||
item.installing = true
|
||||
this.$electron.ipcRenderer.send('installPlugin', item.name)
|
||||
},
|
||||
uninstallPlugin (val) {
|
||||
this.$electron.ipcRenderer.send('uninstallPlugin', val)
|
||||
},
|
||||
reloadApp () {
|
||||
this.$electron.remote.app.relaunch()
|
||||
this.$electron.remote.app.exit(0)
|
||||
},
|
||||
cleanSearch () {
|
||||
this.searchText = ''
|
||||
},
|
||||
async handleConfirmConfig () {
|
||||
const result = await this.$refs.configForm.validate()
|
||||
if (result !== false) {
|
||||
switch (this.currentType) {
|
||||
case 'plugin':
|
||||
this.$db.read().set(`picgo-plugin-${this.configName}`, result).write()
|
||||
break
|
||||
case 'uploader':
|
||||
this.$db.read().set(`picBed.${this.configName}`, result).write()
|
||||
break
|
||||
case 'transformer':
|
||||
this.$db.read().set(`transformer.${this.configName}`, result).write()
|
||||
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) {
|
||||
return {
|
||||
name: item.package.name.replace(/picgo-plugin-/, ''),
|
||||
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,
|
||||
installing: false,
|
||||
reload: false
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$electron.ipcRenderer.removeAllListeners('pluginList')
|
||||
this.$electron.ipcRenderer.removeAllListeners('installSuccess')
|
||||
this.$electron.ipcRenderer.removeAllListeners('uninstallSuccess')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
#plugin-view
|
||||
position relative
|
||||
padding 0 20px 0
|
||||
.plugin-list
|
||||
height: 339px;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 15px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 5px;
|
||||
transition: all 0.2s ease-in-out 0.1s;
|
||||
width: 100%
|
||||
.el-loading-mask
|
||||
left: 20px
|
||||
width: calc(100% - 40px)
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 10px auto
|
||||
.handle-bar
|
||||
margin-bottom 20px
|
||||
&.cut-width
|
||||
padding-right: 8px
|
||||
.el-input__inner
|
||||
border-radius 0
|
||||
.plugin-item
|
||||
box-sizing border-box
|
||||
height 80px
|
||||
background #444
|
||||
padding 8px
|
||||
user-select text
|
||||
transition all .2s ease-in-out
|
||||
cursor pointer
|
||||
margin-bottom 10px
|
||||
&:hover
|
||||
background #333
|
||||
&__logo
|
||||
width 64px
|
||||
height 64px
|
||||
float left
|
||||
&__content
|
||||
float left
|
||||
width calc(100% - 72px)
|
||||
height 64px
|
||||
color #aaa
|
||||
margin-left 8px
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content space-between
|
||||
&__name
|
||||
font-size 16px
|
||||
height 22px
|
||||
line-height 22px
|
||||
// font-weight 600
|
||||
font-weight 600
|
||||
&__desc
|
||||
font-size 14px
|
||||
height 21px
|
||||
line-height 21px
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
&__info-bar
|
||||
font-size 14px
|
||||
height 21px
|
||||
line-height 28px
|
||||
position relative
|
||||
&__author
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
&__config
|
||||
float right
|
||||
font-size 16px
|
||||
.config-button
|
||||
font-size 12px
|
||||
color #ddd
|
||||
background #222
|
||||
padding 1px 8px
|
||||
height 18px
|
||||
line-height 18px
|
||||
text-align center
|
||||
position absolute
|
||||
top 4px
|
||||
right 20px
|
||||
transition all .2s ease-in-out
|
||||
&.reload
|
||||
right 0px
|
||||
&.installing
|
||||
right 0px
|
||||
&.install
|
||||
right 0px
|
||||
&:hover
|
||||
background: #1B9EF3
|
||||
color #fff
|
||||
</style>
|
||||
@@ -1,152 +0,0 @@
|
||||
<template>
|
||||
<div id="qiniu-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="view-title">
|
||||
七牛图床设置
|
||||
</div>
|
||||
<el-form
|
||||
ref="qiniu"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
:model="form"
|
||||
size="mini">
|
||||
<el-form-item
|
||||
label="设定AccessKey"
|
||||
prop="accessKey"
|
||||
:rules="{
|
||||
required: true, message: 'AccessKey不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.accessKey" placeholder="AccessKey" @keyup.native.enter="confirm('weiboForm')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定SecretKey"
|
||||
prop="secretKey"
|
||||
:rules="{
|
||||
required: true, message: 'SecretKey不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.secretKey" type="password" @keyup.native.enter="confirm" placeholder="SecretKey"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定存储空间名"
|
||||
prop="bucket"
|
||||
:rules="{
|
||||
required: true, message: 'Bucket不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.bucket" @keyup.native.enter="confirm" placeholder="Bucket"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定访问网址"
|
||||
prop="url"
|
||||
:rules="{
|
||||
required: true, message: '网址不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.url" @keyup.native.enter="confirm" placeholder="例如：http://xxx.yyy.glb.clouddn.com"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="确认存储区域"
|
||||
>
|
||||
<el-radio-group v-model="form.area" size="mini">
|
||||
<el-radio-button label="z0">华东</el-radio-button>
|
||||
<el-radio-button label="z1">华北</el-radio-button>
|
||||
<el-radio-button label="z2">华南</el-radio-button>
|
||||
<el-radio-button label="na0">北美</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定网址后缀"
|
||||
>
|
||||
<el-input v-model="form.options" @keyup.native.enter="confirm" placeholder="例如?imageslim"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="指定存储路径"
|
||||
>
|
||||
<el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="confirm" round>确定</el-button>
|
||||
<el-button type="success" @click="setDefaultPicBed('qiniu')" round :disabled="defaultPicBed === 'qiniu'">设为默认图床</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'qiniu',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
accessKey: '',
|
||||
secretKey: '',
|
||||
bucket: '',
|
||||
url: '',
|
||||
area: 'z0',
|
||||
options: '',
|
||||
path: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const config = this.$db.get('picBed.qiniu').value()
|
||||
if (config) {
|
||||
for (let i in config) {
|
||||
this.form[i] = config[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$refs.qiniu.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.set('picBed.qiniu', this.form).write()
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#qiniu-view
|
||||
.el-form
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
.el-input__inner
|
||||
border-radius 19px
|
||||
&-item
|
||||
margin-bottom 10.5px
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 14px 0 0 14px
|
||||
.el-radio-button:last-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div id="smms-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="view-title">
|
||||
SM.MS设置
|
||||
</div>
|
||||
<div class="content">
|
||||
感谢SM.MS提供的优质服务
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 20px;">
|
||||
<el-button type="success" @click="confirm" round :disabled="defaultPicBed === 'smms'" size="mini">设为默认图床</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'upyun',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$db.set('picBed.smms', true).write()
|
||||
this.setDefaultPicBed('smms')
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#smms-view
|
||||
.content
|
||||
text-align center
|
||||
font-size 14px
|
||||
color #eee
|
||||
</style>
|
||||
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<div id="tcyun-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="view-title">
|
||||
腾讯云COS设置
|
||||
</div>
|
||||
<el-form
|
||||
ref="tcyun"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
:model="form"
|
||||
size="mini">
|
||||
<el-form-item
|
||||
label="COS版本"
|
||||
>
|
||||
<el-switch
|
||||
v-model="form.version"
|
||||
active-text="v4"
|
||||
inactive-text="v5"
|
||||
active-value="v4"
|
||||
inactive-value="v5"
|
||||
inactive-color="#67C23A"
|
||||
></el-switch>
|
||||
<i class="el-icon-question" @click="openWiki"></i>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定SecretId"
|
||||
prop="secretId"
|
||||
:rules="{
|
||||
required: true, message: 'SecretId不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.secretId" placeholder="SecretId" @keyup.native.enter="confirm('weiboForm')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定SecretKey"
|
||||
prop="secretKey"
|
||||
:rules="{
|
||||
required: true, message: 'SecretKey不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.secretKey" type="password" @keyup.native.enter="confirm" placeholder="SecretKey"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定APPID"
|
||||
prop="appId"
|
||||
:rules="{
|
||||
required: true, message: 'APPID不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.appId" @keyup.native.enter="confirm" placeholder="例如1234567890"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定存储空间名"
|
||||
prop="bucket"
|
||||
:rules="{
|
||||
required: true, message: 'Bucket不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.bucket" @keyup.native.enter="confirm" placeholder="Bucket"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="确认存储区域"
|
||||
prop="area"
|
||||
:rules="{
|
||||
required: true, message: '区域代码不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.area" @keyup.native.enter="confirm" placeholder="例如tj"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="指定存储路径"
|
||||
>
|
||||
<el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定自定义域名"
|
||||
>
|
||||
<el-input v-model="form.customUrl" @keyup.native.enter="confirm" placeholder="例如https://xxxx.com"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="confirm" round>确定</el-button>
|
||||
<el-button type="success" @click="setDefaultPicBed('tcyun')" round :disabled="defaultPicBed === 'tcyun'">设为默认图床</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'tcyun',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
secretId: '',
|
||||
secretKey: '',
|
||||
bucket: '',
|
||||
appId: '',
|
||||
area: '',
|
||||
path: '',
|
||||
customUrl: '',
|
||||
version: 'v4'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const config = this.$db.get('picBed.tcyun').value()
|
||||
if (config) {
|
||||
for (let i in config) {
|
||||
this.form[i] = config[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$refs.tcyun.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.set('picBed.tcyun', this.form).write()
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
openWiki () {
|
||||
this.$electron.remote.shell.openExternal('https://github.com/Molunerfinn/PicGo/wiki/%E8%AF%A6%E7%BB%86%E7%AA%97%E5%8F%A3%E7%9A%84%E4%BD%BF%E7%94%A8#腾讯云cos')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#tcyun-view
|
||||
.el-form
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
.el-input__inner
|
||||
border-radius 19px
|
||||
&-item
|
||||
margin-bottom 10.5px
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 14px 0 0 14px
|
||||
.el-radio-button:last-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
.el-switch__label
|
||||
color #eee
|
||||
&.is-active
|
||||
color #409EFF
|
||||
.el-icon-question
|
||||
font-size 20px
|
||||
float right
|
||||
margin-top 9px
|
||||
color #eee
|
||||
cursor pointer
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<div id="tcyun-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="view-title">
|
||||
又拍云设置
|
||||
</div>
|
||||
<el-form
|
||||
ref="tcyun"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
:model="form"
|
||||
size="mini">
|
||||
<el-form-item
|
||||
label="设定存储空间名"
|
||||
prop="bucket"
|
||||
:rules="{
|
||||
required: true, message: 'Bucket不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.bucket" @keyup.native.enter="confirm" placeholder="Bucket"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定操作员"
|
||||
prop="operator"
|
||||
:rules="{
|
||||
required: true, message: '操作员不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.operator" @keyup.native.enter="confirm" placeholder="例如：me"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定操作员密码"
|
||||
prop="password"
|
||||
:rules="{
|
||||
required: true, message: '操作员密码不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.password" @keyup.native.enter="confirm" placeholder="输入操作员密码" type="password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定加速域名"
|
||||
prop="url"
|
||||
:rules="{
|
||||
required: true, message: '加速域名不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.url" placeholder="例如http://xxx.test.upcdn.net" @keyup.native.enter="confirm()"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定网址后缀"
|
||||
>
|
||||
<el-input v-model="form.options" @keyup.native.enter="confirm" placeholder="例如!imgslim"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="指定存储路径"
|
||||
>
|
||||
<el-input v-model="form.path" @keyup.native.enter="confirm" placeholder="例如img/"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="confirm" round>确定</el-button>
|
||||
<el-button type="success" @click="setDefaultPicBed('upyun')" round :disabled="defaultPicBed === 'upyun'">设为默认图床</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'upyun',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
bucket: '',
|
||||
operator: '',
|
||||
password: '',
|
||||
options: '',
|
||||
path: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const config = this.$db.get('picBed.upyun').value()
|
||||
if (config) {
|
||||
for (let i in config) {
|
||||
this.form[i] = config[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$refs.tcyun.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.set('picBed.upyun', this.form).write()
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#tcyun-view
|
||||
.el-form
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
.el-input__inner
|
||||
border-radius 19px
|
||||
.el-radio-group
|
||||
width 100%
|
||||
label
|
||||
width 25%
|
||||
.el-radio-button__inner
|
||||
width 100%
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 14px 0 0 14px
|
||||
.el-radio-button:last-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
</style>
|
||||
@@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<div id="upload-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="20" :offset="2">
|
||||
<div class="view-title">
|
||||
图片上传 - {{ picBed }}
|
||||
</div>
|
||||
<div
|
||||
id="upload-area"
|
||||
:class="{ 'is-dragover': dragover }" @drop.prevent="onDrop" @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
|
||||
>
|
||||
<div id="upload-dragger" @click="openUplodWindow">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="upload-dragger__text">
|
||||
将文件拖到此处，或 <span>点击上传</span>
|
||||
</div>
|
||||
<input type="file" id="file-uploader" @change="onChange" multiple>
|
||||
</div>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="progress"
|
||||
:show-text="false"
|
||||
class="upload-progress"
|
||||
:class="{ 'show': showProgress }"
|
||||
:status="showError ? 'exception' : ''"
|
||||
></el-progress>
|
||||
<div class="paste-style">
|
||||
<div class="el-col-16">
|
||||
<div class="paste-style__text">
|
||||
链接格式
|
||||
</div>
|
||||
<el-radio-group v-model="pasteStyle" size="mini"
|
||||
@change="handlePasteStyleChange"
|
||||
>
|
||||
<el-radio-button label="markdown">
|
||||
Markdown
|
||||
</el-radio-button>
|
||||
<el-radio-button label="HTML"></el-radio-button>
|
||||
<el-radio-button label="URL"></el-radio-button>
|
||||
<el-radio-button label="UBB"></el-radio-button>
|
||||
<el-radio-button label="Custom" title="自定义"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="el-col-8">
|
||||
<div class="paste-style__text">
|
||||
快捷上传
|
||||
</div>
|
||||
<el-button type="primary" round size="mini" @click="uploadClipboardFiles" class="paste-upload">剪贴板图片上传</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'upload',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
dragover: false,
|
||||
progress: 0,
|
||||
showProgress: false,
|
||||
showError: false,
|
||||
pasteStyle: '',
|
||||
picBed: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$electron.ipcRenderer.on('uploadProgress', (event, progress) => {
|
||||
if (progress !== -1) {
|
||||
this.showProgress = true
|
||||
this.progress = progress
|
||||
} else {
|
||||
this.progress = 100
|
||||
this.showError = true
|
||||
}
|
||||
})
|
||||
this.getPasteStyle()
|
||||
this.getDefaultPicBed()
|
||||
this.$electron.ipcRenderer.on('syncPicBed', () => {
|
||||
this.getDefaultPicBed()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
progress (val) {
|
||||
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')
|
||||
},
|
||||
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
|
||||
}
|
||||
sendFiles.push(obj)
|
||||
})
|
||||
this.$electron.ipcRenderer.send('uploadChoosedFiles', sendFiles)
|
||||
},
|
||||
getPasteStyle () {
|
||||
this.pasteStyle = this.$db.read().get('settings.pasteStyle').value() || 'markdown'
|
||||
},
|
||||
handlePasteStyleChange (val) {
|
||||
this.$db.read().set('settings.pasteStyle', val)
|
||||
.write()
|
||||
},
|
||||
uploadClipboardFiles () {
|
||||
this.$electron.ipcRenderer.send('uploadClipboardFilesFromUploadPage')
|
||||
},
|
||||
getDefaultPicBed () {
|
||||
const current = this.$db.read().get('picBed.current').value()
|
||||
this.$picBed.forEach(item => {
|
||||
if (item.type === current) {
|
||||
this.picBed = item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#upload-view
|
||||
#upload-area
|
||||
height 220px
|
||||
border 2px dashed #dddddd
|
||||
border-radius 8px
|
||||
text-align center
|
||||
width 450px
|
||||
margin 0 auto
|
||||
color #dddddd
|
||||
cursor pointer
|
||||
transition all .2s ease-in-out
|
||||
#upload-dragger
|
||||
height 100%
|
||||
&.is-dragover,
|
||||
&:hover
|
||||
border 2px dashed #A4D8FA
|
||||
background-color rgba(164, 216, 250, 0.3)
|
||||
color #fff
|
||||
i
|
||||
font-size 66px
|
||||
margin 50px 0 16px
|
||||
line-height 66px
|
||||
span
|
||||
color #409EFF
|
||||
#file-uploader
|
||||
display none
|
||||
.upload-progress
|
||||
opacity 0
|
||||
transition all .2s ease-in-out
|
||||
width 450px
|
||||
margin 20px auto 0
|
||||
&.show
|
||||
opacity 1
|
||||
.el-progress-bar__inner
|
||||
transition all .2s ease-in-out
|
||||
.paste-style
|
||||
text-align center
|
||||
margin-top 16px
|
||||
&__text
|
||||
font-size 12px
|
||||
color #eeeeee
|
||||
margin-bottom 4px
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 14px 0 0 14px
|
||||
.el-radio-button:last-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
.paste-upload
|
||||
width 100%
|
||||
</style>
|
||||
@@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<div id="weibo-view">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="view-title">
|
||||
微博图床设置
|
||||
</div>
|
||||
<el-form
|
||||
ref="weiboForm"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
size="small"
|
||||
:model="form">
|
||||
<el-form-item
|
||||
label="设定用户名"
|
||||
prop="username"
|
||||
:rules="{
|
||||
required: !chooseCookie, message: '用户名不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.username" placeholder="用户名" @keyup.native.enter="confirm('weiboForm')" :disabled="chooseCookie"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定密码"
|
||||
prop="password"
|
||||
:rules="{required: !chooseCookie,messsage: '密码不能为空',trigger: 'blur'}">
|
||||
<el-input v-model="form.password" type="password" @keyup.native.enter="confirm('weiboForm')" placeholder="密码" :disabled="chooseCookie"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="使用Cookie上传"
|
||||
>
|
||||
<el-switch
|
||||
v-model="chooseCookie"
|
||||
active-text="cookie模式"
|
||||
@change="handleSwitchChange"
|
||||
></el-switch>
|
||||
<i class="el-icon-question" @click="openWiki"></i>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="设定Cookie"
|
||||
prop="cookie"
|
||||
:rules="{
|
||||
required: chooseCookie, message: '密码不能为空', trigger: 'blur'
|
||||
}">
|
||||
<el-input v-model="form.cookie" @keyup.native.enter="confirm('weiboForm')" placeholder="Cookie" :disabled="!chooseCookie"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="* 图片质量">
|
||||
<el-radio-group v-model="quality">
|
||||
<el-radio label="thumbnail">缩略图</el-radio>
|
||||
<el-radio label="mw690">中等尺寸</el-radio>
|
||||
<el-radio label="large">原图</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="confirm('weiboForm')" round>确定</el-button>
|
||||
<el-button type="success" @click="setDefaultPicBed('weibo')" round :disabled="defaultPicBed === 'weibo'">设为默认图床</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mixin from '../mixin'
|
||||
export default {
|
||||
name: 'weibo',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
password: '',
|
||||
cookie: ''
|
||||
},
|
||||
chooseCookie: false,
|
||||
quality: 'large'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const config = this.$db.read().get('picBed.weibo').value()
|
||||
if (config) {
|
||||
this.form.username = config.username
|
||||
this.form.password = config.password
|
||||
this.quality = config.quality || 'large'
|
||||
this.form.cookie = config.cookie
|
||||
this.chooseCookie = config.chooseCookie
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm (formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$db.read().set('picBed.weibo', {
|
||||
username: this.form.username,
|
||||
password: this.form.password,
|
||||
quality: this.quality,
|
||||
cookie: this.form.cookie,
|
||||
chooseCookie: this.chooseCookie
|
||||
}).write()
|
||||
const successNotification = new window.Notification('设置结果', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSwitchChange () {
|
||||
this.$refs['weiboForm'].resetFields()
|
||||
},
|
||||
openWiki () {
|
||||
this.$electron.remote.shell.openExternal('https://github.com/Molunerfinn/PicGo/wiki/%E8%AF%A6%E7%BB%86%E7%AA%97%E5%8F%A3%E7%9A%84%E4%BD%BF%E7%94%A8#%E5%BE%AE%E5%8D%9A%E5%9B%BE%E5%BA%8A')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='stylus'>
|
||||
.el-message
|
||||
left 60%
|
||||
.view-title
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 20px auto
|
||||
#weibo-view
|
||||
.el-form
|
||||
label
|
||||
line-height 22px
|
||||
padding-bottom 0
|
||||
color #eee
|
||||
.el-button-group
|
||||
width 100%
|
||||
.el-button
|
||||
width 50%
|
||||
.el-input__inner
|
||||
border-radius 19px
|
||||
.el-radio-group
|
||||
margin-left 25px
|
||||
.el-switch__label
|
||||
color #eee
|
||||
&.is-active
|
||||
color #409EFF
|
||||
.el-icon-question
|
||||
font-size 20px
|
||||
float right
|
||||
margin-top 9px
|
||||
color #eee
|
||||
cursor pointer
|
||||
transition .2s color ease-in-out
|
||||
&:hover
|
||||
color #409EFF
|
||||
</style>
|
||||
@@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<div id="tray-page">
|
||||
<!-- <div class="header-arrow"></div> -->
|
||||
<div class="content">
|
||||
<div class="wait-upload-img" v-if="clipboardFiles.length > 0">
|
||||
<div class="list-title">等待上传</div>
|
||||
<div v-for="(item, index) in clipboardFiles" :key="index" class="img-list" :style="{height: calcHeight(item.width, item.height) + 'px'}">
|
||||
<div class="upload-img__container" @click="uploadClipboardFiles">
|
||||
<img :src="item.imgUrl" class="upload-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uploaded-img">
|
||||
<div class="list-title">已上传</div>
|
||||
<div v-for="(item, index) in files" :key="index" class="img-list" :style="{height: calcHeight(item.width, item.height) + 'px'}">
|
||||
<div class="upload-img__container" @click="copyTheLink(item)">
|
||||
<img :src="item.imgUrl" class="upload-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from './mixin'
|
||||
import pasteTemplate from '../../main/utils/pasteTemplate'
|
||||
export default {
|
||||
name: 'tray-page',
|
||||
mixins: [mixin],
|
||||
data () {
|
||||
return {
|
||||
files: [],
|
||||
notification: {
|
||||
title: '复制链接成功',
|
||||
body: '',
|
||||
icon: ''
|
||||
},
|
||||
clipboardFiles: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
reverseList () {
|
||||
return this.files.slice().reverse()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.disableDragFile()
|
||||
this.getData()
|
||||
this.$electron.ipcRenderer.on('dragFiles', (event, files) => {
|
||||
files.forEach(item => {
|
||||
this.$db.read().get('uploaded').insert(item).write()
|
||||
})
|
||||
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()
|
||||
})
|
||||
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.read().get('settings.pasteStyle').value() || 'markdown'
|
||||
this.$electron.clipboard.writeText(pasteTemplate(pasteStyle, item.imgUrl))
|
||||
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 () {
|
||||
this.$electron.ipcRenderer.send('uploadClipboardFiles', this.clipboardFiles[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
#tray-page
|
||||
.list-title
|
||||
text-align center
|
||||
color #858585
|
||||
font-size 12px
|
||||
padding 6px 0
|
||||
position relative
|
||||
&:before
|
||||
content ''
|
||||
position absolute
|
||||
height 1px
|
||||
width calc(100% - 36px)
|
||||
bottom 0
|
||||
left 18px
|
||||
background #858585
|
||||
.header-arrow
|
||||
position absolute
|
||||
top 12px
|
||||
left 50%
|
||||
margin-left -10px
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent
|
||||
border-right: 10px solid transparent
|
||||
border-bottom: 10px solid rgba(255,255,255, 1)
|
||||
.content
|
||||
position absolute
|
||||
top 0px
|
||||
width 100%
|
||||
.img-list
|
||||
padding 16px 8px
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
height 45px
|
||||
cursor pointer
|
||||
transition all .2s ease-in-out
|
||||
&:hover
|
||||
background #49B1F5
|
||||
.upload-img__index
|
||||
color #fff
|
||||
.upload-img
|
||||
height 100%
|
||||
width 100%
|
||||
margin 0 auto
|
||||
&__container
|
||||
width 100%
|
||||
padding 8px 10px
|
||||
height 100%
|
||||
</style>
|
||||
@@ -1,42 +0,0 @@
|
||||
import db from '../../datastore'
|
||||
export default {
|
||||
mounted () {
|
||||
this.disableDragEvent()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
defaultPicBed: db.read().get('picBed.current').value()
|
||||
}
|
||||
},
|
||||
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'
|
||||
}
|
||||
},
|
||||
setDefaultPicBed (type) {
|
||||
db.read().set('picBed.current', type).write()
|
||||
this.defaultPicBed = type
|
||||
this.$electron.ipcRenderer.send('updateDefaultPicBed', type)
|
||||
const successNotification = new window.Notification('设置默认图床', {
|
||||
body: '设置成功'
|
||||
})
|
||||
successNotification.onclick = () => {
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('dragenter', this.disableDrag, false)
|
||||
window.removeEventListener('dragover', this.disableDrag)
|
||||
window.removeEventListener('drop', this.disableDrag)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user