Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Feature: support multiple config #1016

Merged
merged 11 commits into from
Nov 23, 2022
3 changes: 3 additions & 0 deletions public/i18n/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,9 @@ SETTINGS_SET_DEFAULT_PICBED: Set Default Picbed
SETTINGS_NOT_CONFIG_OPTIONS: Not Config Options
SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD: Use Builtin Clipboard to Upload
SETTINGS_CHOOSE_LANGUAGE: Choose Language
UPLOADER_CONFIG_NAME: Configuration Name
UPLOADER_CONFIG_PLACEHOLDER: Please Enter Configuration Name
SELECTED_SETTING_HINT: Selected

# shortcut-page

Expand Down
3 changes: 3 additions & 0 deletions public/i18n/zh-CN.yml
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,9 @@ SETTINGS_NOT_CONFIG_OPTIONS: 暂无配置项
SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD: 使用内置剪贴板上传
SETTINGS_CHOOSE_LANGUAGE: 选择语言
BUILTIN_CLIPBOARD_TIPS: 使用内置剪贴板函数而不是调用脚本获取剪贴板图片
UPLOADER_CONFIG_NAME: 图床配置名
UPLOADER_CONFIG_PLACEHOLDER: 请输入配置名称
SELECTED_SETTING_HINT: 已选中

# shortcut-page

Expand Down
3 changes: 3 additions & 0 deletions public/i18n/zh-TW.yml
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,9 @@ SETTINGS_NOT_CONFIG_OPTIONS: 暫無設定選項
SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD: 使用內建剪貼簿上傳
SETTINGS_CHOOSE_LANGUAGE: 選擇語言
BUILTIN_CLIPBOARD_TIPS: 使用內建剪貼簿函數而不是調用腳本取得剪貼簿內的照片
UPLOADER_CONFIG_NAME: 圖床配置名
UPLOADER_CONFIG_PLACEHOLDER: 請輸入配置名稱
SELECTED_SETTING_HINT: 已選中

# shortcut-page

Expand Down
24 changes: 22 additions & 2 deletions src/renderer/components/ConfigForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,18 @@
ref="form"
size="mini"
>
<el-form-item
:label="$T('UPLOADER_CONFIG_NAME')"
required
prop="_configName"
>
<el-input
type="input"
v-model="ruleForm._configName"
:placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')"
></el-input>
</el-form-item>
<!-- dynamic config -->
<el-form-item
v-for="(item, index) in configList"
:label="item.alias || item.name"
Expand Down Expand Up @@ -115,10 +127,12 @@ export default class extends Vue {
}

async handleConfig (val: IPicGoPluginConfig[]) {
this.ruleForm = Object.assign({}, {})
const config = await this.getConfig<IPicGoPluginConfig>(this.getConfigType())
const config = await this.getCurConfigFormData()
const configId = this.$route.params.configId
this.ruleForm = Object.assign({}, config)
if (val.length > 0) {
this.configList = cloneDeep(val).map((item) => {
if (!configId) return item
let defaultValue = item.default !== undefined
? item.default
: item.type === 'checkbox'
Expand All @@ -138,6 +152,12 @@ export default class extends Vue {
})
}
}

async getCurConfigFormData () {
const configId = this.$route.params.configId
const curTypeConfigList = await this.getConfig<IStringKeyMap[]>(`uploader.${this.id}.configList`) || []
return curTypeConfigList.find(i => i._id === configId) || {}
}
}
</script>
<style lang='stylus'>
Expand Down
10 changes: 5 additions & 5 deletions src/renderer/layouts/Main.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
>
<el-menu-item
v-if="item.visible"
:index="`picbeds-${item.type}`"
:index="`uploader-config-page-${item.type}`"
:key="item.type"
>
<!-- <i :class="`el-icon-ui-${item.type}`"></i> -->
Expand Down Expand Up @@ -211,17 +211,17 @@ export default class extends Vue {
}

handleSelect (index: string) {
const type = index.match(/picbeds-/)
const type = index.match(/uploader-config-page-/)
if (type === null) {
this.$router.push({
name: index
})
} else {
const picBed = index.replace(/picbeds-/, '')
const type = index.replace(/uploader-config-page-/, '')
this.$router.push({
name: 'picbeds',
name: 'UploaderConfigPage',
params: {
type: picBed
type
}
})
// if (this.$builtInPicBed.includes(picBed)) {
Expand Down
226 changes: 226 additions & 0 deletions src/renderer/pages/UploaderConfigPage.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
<template>
<div id="config-list-view">
<div class="view-title">
{{ $T('SETTINGS') }}
</div>
<el-row :gutter="15" justify="space-between" align="center" type="flex" class="config-list">
<el-col
class="config-item-col"
v-for="item in curConfigList"
:key="item._id"
:span="11"
:offset="1"
>
<div
:class="`config-item ${defaultConfigId === item._id ? 'selected' : ''}`"
STDSuperman marked this conversation as resolved.
Show resolved Hide resolved
@click="() => selectItem(item._id)"
>
<div class="config-name">{{item._configName}}</div>
<div class="config-update-time">{{formatTime(item._updatedAt)}}</div>
<div v-if="defaultConfigId === item._id" class="default-text">{{$T('SELECTED_SETTING_HINT')}}</div>
<div class="operation-container">
<i class="el-icon-edit" @click="openEditPage(item._id)"></i>
<i :class="`el-icon-delete ${curConfigList.length <= 1 ? 'disabled' : ''}`" @click.stop="() => deleteConfig(item._id)"></i>
</div>
</div>
</el-col>
STDSuperman marked this conversation as resolved.
Show resolved Hide resolved
<el-col
class="config-item-col"
:span="11"
:offset="1"
>
<div
class="config-item config-item-add"
@click="addNewConfig"
>
<i class="el-icon-plus"></i>
</div>
</el-col>
</el-row>
<el-row type="flex" justify="center" :span="24" class="set-default-container">
<el-button class="set-default-btn" type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type">{{ $T('SETTINGS_SET_DEFAULT_PICBED') }}</el-button>
</el-row>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import dayjs from 'dayjs'
import { completeUploaderMetaConfig } from '../utils/uploader'
import mixin from '@/utils/ConfirmButtonMixin'

@Component({
name: 'UploaderConfigPage',
mixins: [mixin]
})
export default class extends Vue {
type!: string;
curConfigList: IStringKeyMap[] = [];
defaultConfigId = '';

async selectItem (id: string) {
await this.saveConfig(`uploader.${this.type}.defaultId`, id)
const activeConfig = this.curConfigList.find(i => i._id === id)
await this.saveConfig(`picBed.${this.type}`, activeConfig)
this.defaultConfigId = id
}

created () {
this.type = this.$route.params.type
this.getCurrentConfigList()
}

async getCurrentConfigList () {
const curUploaderConfig = await this.getConfig<IStringKeyMap>(`uploader.${this.type}`) ?? {}
let curConfigList = curUploaderConfig?.configList
this.defaultConfigId = curUploaderConfig?.defaultId

if (!curConfigList) {
curConfigList = await this.fixUploaderConfig()
}

this.curConfigList = curConfigList
}

async fixUploaderConfig (): Promise<IStringKeyMap[]> {
const curUploaderConfig = await this.getConfig<IStringKeyMap>(`picBed.${this.type}`) ?? {}

if (!curUploaderConfig._id) {
Object.assign(
curUploaderConfig,
completeUploaderMetaConfig(curUploaderConfig)
)
}

const curUploaderConfigList = [curUploaderConfig]
await this.saveConfig(`uploader.${this.type}`, {
configList: curUploaderConfigList,
defaultId: curUploaderConfig._id
})

// fix exist config
await this.saveConfig(`picBed.${this.type}`, curUploaderConfig)

this.defaultConfigId = curUploaderConfig._id

return curUploaderConfigList
}

openEditPage (configId: string) {
this.$router.push({
name: 'picbeds',
params: {
type: this.type,
configId
},
query: {
defaultConfigId: this.defaultConfigId
}
})
}

formatTime (time: number):string {
return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

async deleteConfig (id: string) {
if (this.curConfigList.length <= 1) return
const updatedConfigList = this.curConfigList.filter(i => i._id !== id)

if (id === this.defaultConfigId) {
await this.selectItem(updatedConfigList[0]._id)
}

await this.saveConfig(`uploader.${this.type}.configList`, updatedConfigList)
this.curConfigList = updatedConfigList
}

addNewConfig () {
this.$router.push({
name: 'picbeds',
params: {
type: this.type,
configId: ''
}
})
}

setDefaultPicBed (type: string) {
this.saveConfig({
'picBed.current': type,
'picBed.uploader': type
})
// @ts-ignore 来自mixin的数据
this.defaultPicBed = type
const successNotification = new Notification(this.$T('SETTINGS_DEFAULT_PICBED'), {
body: this.$T('TIPS_SET_SUCCEED')
})
successNotification.onclick = () => {
return true
}
}
}
</script>
<style lang='stylus'>
#config-list-view
position relative
min-height 100%
overflow-x hidden
overflow-y auto
padding-bottom 50px
box-sizing border-box
.config-list
flex-wrap wrap
width: 98%
.config-item
height 85px
margin-bottom 20px
border-radius 4px
cursor pointer
box-sizing border-box
padding 8px
background rgba(130, 130, 130, .2)
border 1px solid transparent
box-shadow 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
position relative
.config-name
color #eee
font-size 16px
.config-update-time
color #aaa
font-size 14px
margin-top 10px
.default-text
color #67C23A
font-size 12px
margin-top 5px
.operation-container
position absolute
right 5px
top 8px
font-size 18pxc
display flex
align-items center
color #eee
.el-icon-edit
.el-icon-delete
cursor pointer
.el-icon-edit
margin-right 10px
.disabled
cursor not-allowed
color #aaa
.config-item-add
display: flex
justify-content: center
align-items: center
color: #eee
font-size: 28px
.selected
border 1px solid #409EFF
.set-default-container
position absolute
bottom 10px
width 100%
.set-default-btn
width 250px
</style>
Loading