Bilibili-Evolved/registry/lib/plugins/video/download/aria2-output/RpcConfig.vue
2024-06-23 23:10:25 +08:00

211 lines
6.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="rpc-config download-video-config-section">
<div>
<div>aria2下载附属资源若支持:</div>
<SwitchBox v-model="isPluginDownloadAssets" @change="saveSettings" />
</div>
<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, SwitchBox } from '@/ui'
import { Aria2RpcProfile, defaultProfile } from './rpc-profiles'
interface Options {
rpcProfiles: Aria2RpcProfile[]
selectedRpcProfileName: string
isPluginDownloadAssets: boolean
}
const { options: storedOptions } = getComponentSettings('downloadVideo')
const defaultOptions: Options = {
rpcProfiles: [defaultProfile],
selectedRpcProfileName: defaultProfile.name,
isPluginDownloadAssets: false,
}
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,
SwitchBox,
},
data() {
return {
isRenaming: false,
profileRename: '',
rpcProfiles: options.rpcProfiles,
selectedRpcProfile: lastSelectedProfile,
isPluginDownloadAssets: options.isPluginDownloadAssets,
}
},
methods: {
saveSettings() {
options.selectedRpcProfileName = this.selectedRpcProfile.name
options.rpcProfiles = this.rpcProfiles
options.isPluginDownloadAssets = this.isPluginDownloadAssets
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>