Bilibili-Evolved/registry/lib/plugins/video/download/aria2-output/RpcConfig.vue
2022-10-12 23:27:58 +08:00

202 lines
6.0 KiB
Vue

<template>
<div class="rpc-config download-video-config-section">
<div v-if="isRenaming" class="profile-select">
<div class="profile-item-name">重命名 RPC 预设:</div>
<TextBox ref="renameInput" v-model="profileRename" />
<VButton key="check" type="transparent" title="完成" @click="endRename()">
<VIcon icon="mdi-check" :size="16" />
</VButton>
</div>
<div v-else class="profile-select">
<div class="profile-item-name">RPC 预设:</div>
<VDropdown v-model="selectedRpcProfile" :items="rpcProfiles">
<template #item="{ item }">
{{ item.name }}
</template>
</VDropdown>
<VButton key="edit" type="transparent" title="重命名" @click="startRename()">
<VIcon icon="mdi-pencil-outline" :size="16" />
</VButton>
<VButton key="new" type="transparent" title="新建预设" @click="newProfile()">
<VIcon icon="mdi-plus" :size="16" />
</VButton>
<VButton
key="delete"
:disabled="rpcProfiles.length < 2"
type="transparent"
title="删除当前预设"
@click="deleteProfile()"
>
<VIcon icon="mdi-trash-can-outline" :size="16" />
</VButton>
</div>
<template v-if="selectedRpcProfile">
<div class="profile-secret-key">
<div class="profile-item-name">密钥:</div>
<TextBox v-model="selectedRpcProfile.secretKey" change-on-blur />
</div>
<div class="profile-dir">
<div class="profile-item-name">路径:</div>
<TextBox v-model="selectedRpcProfile.dir" change-on-blur />
</div>
<div class="profile-host">
<div class="profile-item-name">主机:</div>
<TextBox v-model="selectedRpcProfile.host" change-on-blur />
</div>
<div class="profile-port">
<div class="profile-item-name">端口:</div>
<TextBox v-model="selectedRpcProfile.port" change-on-blur />
</div>
<div class="profile-method">
<div class="profile-item-name">方法:</div>
<VDropdown
v-model="selectedRpcProfile.method"
:items="['get', 'post']"
:key-mapper="item => item"
>
<template #item="{ item }">
{{ item }}
</template>
</VDropdown>
</div>
<div class="profile-other">
<div class="profile-item-name">其他配置:</div>
<TextArea v-model="selectedRpcProfile.other" placeholder="some-key=value" change-on-blur />
</div>
</template>
</div>
</template>
<script lang="ts">
import { getComponentSettings } from '@/core/settings'
import { Toast } from '@/core/toast'
import { TextBox, VButton, VIcon, VDropdown, TextArea } from '@/ui'
import { Aria2RpcProfile, defaultProfile } from './rpc-profiles'
interface Options {
rpcProfiles: Aria2RpcProfile[]
selectedRpcProfileName: string
}
const { options: storedOptions } = getComponentSettings('downloadVideo')
const defaultOptions: Options = {
rpcProfiles: [defaultProfile],
selectedRpcProfileName: defaultProfile.name,
}
const options = { ...defaultOptions, ...storedOptions }
const handleMissingProfile = () => {
if (options.rpcProfiles.length < 1) {
options.rpcProfiles.push(defaultProfile)
return defaultProfile
}
return options.rpcProfiles[0]
}
const lastSelectedProfile =
options.rpcProfiles.find(p => p.name === options.selectedRpcProfileName) ?? handleMissingProfile()
console.log(options, lastSelectedProfile)
export default Vue.extend({
components: {
TextBox,
VButton,
VIcon,
VDropdown,
TextArea,
},
data() {
return {
isRenaming: false,
profileRename: '',
rpcProfiles: options.rpcProfiles,
selectedRpcProfile: lastSelectedProfile,
}
},
methods: {
saveSettings() {
options.selectedRpcProfileName = this.selectedRpcProfile.name
options.rpcProfiles = this.rpcProfiles
Object.assign(storedOptions, options)
},
async startRename() {
this.profileRename = this.selectedRpcProfile.name
this.isRenaming = true
await this.$nextTick()
this.$refs.renameInput?.focus()
},
endRename() {
const newName: string = this.profileRename
if (!newName) {
Toast.error('名称不得为空', '重命名 RPC 预设', 2000)
return
}
if (
options.rpcProfiles.some(p => p.name !== this.selectedRpcProfile.name && p.name === newName)
) {
Toast.error('名称不得与其他预设重复', '重命名 RPC 预设', 2000)
return
}
this.selectedRpcProfile.name = this.profileRename
this.isRenaming = false
this.saveSettings()
},
newProfile() {
const newProfile: Aria2RpcProfile = { ...this.selectedRpcProfile }
const newName = {
num: 1,
toString() {
return `未命名${this.num}`
},
}
while (options.rpcProfiles.some(p => p.name === newName.toString())) {
newName.num++
}
newProfile.name = newName.toString()
options.rpcProfiles.push(newProfile)
this.selectedRpcProfile = newProfile
},
deleteProfile() {
if (options.rpcProfiles.length < 2) {
return
}
const index = options.rpcProfiles.findIndex(p => p.name === this.selectedRpcProfile.name)
if (index === -1) {
return
}
if (!confirm(`确认删除 RPC 预设 "${this.selectedRpcProfile.name}" 吗?`)) {
return
}
options.rpcProfiles.splice(index, 1)
this.selectedRpcProfile = options.rpcProfiles[0]
},
},
})
</script>
<style lang="scss">
@import 'common';
.rpc-config.download-video-config-section {
@include v-center();
align-items: stretch;
> * {
@include h-center();
&:not(:last-child) {
margin-bottom: 12px;
}
}
.profile-item-name {
margin-right: 8px;
}
.profile-other .profile-item-name {
align-self: flex-start;
}
.profile-select {
.be-textbox,
.be-dropdown {
margin-right: 8px;
}
.be-button {
padding: 4px;
}
}
.profile-method {
align-self: flex-start;
}
}
</style>