mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
202 lines
6.0 KiB
Vue
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>
|