GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 23:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: Update AccountSettingSystem.vue to include change events for downloader and media server cards

Browse Source
This commit is contained in:
jxxghp
2024-08-16 13:42:12 +08:00
parent 57f6547b91
commit cca3368d8f
3 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/DownloaderCard.vue
+11 -15
View File
@@ -15,7 +15,7 @@ const props = defineProps({
}) })
// 定义触发的自定义事件 // 定义触发的自定义事件
const emit = defineEmits(['close', 'change']) const emit = defineEmits(['close', 'done', 'change'])
// timeout定时器 // timeout定时器
let timeoutTimer: NodeJS.Timeout | undefined = undefined let timeoutTimer: NodeJS.Timeout | undefined = undefined
@@ -76,13 +76,9 @@ function saveDownloaderInfo() {
downloaderInfoDialog.value = false downloaderInfoDialog.value = false
downloaderInfo.value.name = downloaderName.value downloaderInfo.value.name = downloaderName.value
emit('change', downloaderInfo.value) emit('change', downloaderInfo.value)
emit('done')
} }
// 速度
const getSpeedText = computed(() => {
return `↑ ${formatFileSize(upload_rate.value, 1)}/s ↓ ${formatFileSize(download_rate.value, 1)}/s`
})
// 根据存储类型选择图标 // 根据存储类型选择图标
const getIcon = computed(() => { const getIcon = computed(() => {
switch (props.downloader.type) { switch (props.downloader.type) {
@@ -166,7 +162,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="downloaderInfo.config.QB_HOST" v-model="downloaderInfo.config.host"
label="地址" label="地址"
placeholder="http(s)://ip:port" placeholder="http(s)://ip:port"
hint="服务端地址，格式：http(s)://ip:port" hint="服务端地址，格式：http(s)://ip:port"
@@ -175,7 +171,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="downloaderInfo.config.QB_USER" v-model="downloaderInfo.config.username"
label="用户名" label="用户名"
placeholder="admin" placeholder="admin"
hint="登录使用的用户名" hint="登录使用的用户名"
@@ -184,7 +180,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="downloaderInfo.config.QB_PASSWORD" v-model="downloaderInfo.config.password"
type="password" type="password"
label="密码" label="密码"
hint="登录使用的密码" hint="登录使用的密码"
@@ -193,7 +189,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VSwitch <VSwitch
v-model="downloaderInfo.config.QB_CATEGORY" v-model="downloaderInfo.config.category"
label="自动分类管理" label="自动分类管理"
hint="由下载器自动管理分类和下载目录" hint="由下载器自动管理分类和下载目录"
persistent-hint persistent-hint
@@ -201,7 +197,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VSwitch <VSwitch
v-model="downloaderInfo.config.QB_SEQUENTIAL" v-model="downloaderInfo.config.sequentail"
label="顺序下载" label="顺序下载"
hint="按顺序依次下载文件" hint="按顺序依次下载文件"
persistent-hint persistent-hint
@@ -209,7 +205,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VSwitch <VSwitch
v-model="downloaderInfo.config.QB_FORCE_RESUME" v-model="downloaderInfo.config.force_resume"
label="强制继续" label="强制继续"
hint="强制继续、强制上传模式" hint="强制继续、强制上传模式"
persistent-hint persistent-hint
@@ -228,7 +224,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="downloaderInfo.config.TR_HOST" v-model="downloaderInfo.config.host"
label="地址" label="地址"
placeholder="http(s)://ip:port" placeholder="http(s)://ip:port"
hint="服务端地址，格式：http(s)://ip:port" hint="服务端地址，格式：http(s)://ip:port"
@@ -237,7 +233,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="downloaderInfo.config.TR_USER" v-model="downloaderInfo.config.username"
label="用户名" label="用户名"
placeholder="admin" placeholder="admin"
hint="登录使用的用户名" hint="登录使用的用户名"
@@ -246,7 +242,7 @@ onUnmounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="downloaderInfo.config.TR_PASSWORD" v-model="downloaderInfo.config.password"
type="password" type="password"
label="密码" label="密码"
hint="登录使用的密码" hint="登录使用的密码"
src/components/cards/MediaServerCard.vue
+11 -10
View File
@@ -14,7 +14,7 @@ const props = defineProps({
}) })
// 定义触发的自定义事件 // 定义触发的自定义事件
const emit = defineEmits(['close', 'change']) const emit = defineEmits(['close', 'done', 'change'])
// 媒体统计数据 // 媒体统计数据
const infoItems = ref([ const infoItems = ref([
@@ -61,6 +61,7 @@ function saveMediaServerInfo() {
mediaServerInfoDialog.value = false mediaServerInfoDialog.value = false
mediaServerInfo.value.name = mediaServerName.value mediaServerInfo.value.name = mediaServerName.value
emit('change', mediaServerInfo.value) emit('change', mediaServerInfo.value)
emit('done')
} }
// 根据存储类型选择图标 // 根据存储类型选择图标
@@ -156,7 +157,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.EMBY_HOST" v-model="mediaServerInfo.config.host"
label="地址" label="地址"
placeholder="http(s)://ip:port" placeholder="http(s)://ip:port"
hint="服务端地址，格式：http(s)://ip:port" hint="服务端地址，格式：http(s)://ip:port"
@@ -165,7 +166,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.EMBY_PLAY_HOST" v-model="mediaServerInfo.config.play_host"
label="外网播放地址" label="外网播放地址"
placeholder="http(s)://domain:port" placeholder="http(s)://domain:port"
hint="跳转播放页面使用的地址，格式：http(s)://domain:port" hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
@@ -174,7 +175,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.EMBY_API_KEY" v-model="mediaServerInfo.config.apikey"
label="API密钥" label="API密钥"
hint="Emby设置->高级->API密钥中生成的密钥" hint="Emby设置->高级->API密钥中生成的密钥"
persistent-hint persistent-hint
@@ -193,7 +194,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.JELLYFIN_HOST" v-model="mediaServerInfo.config.host"
label="地址" label="地址"
placeholder="http(s)://ip:port" placeholder="http(s)://ip:port"
hint="服务端地址，格式：http(s)://ip:port" hint="服务端地址，格式：http(s)://ip:port"
@@ -202,7 +203,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.JELLYFIN_PLAY_HOST" v-model="mediaServerInfo.config.play_host"
label="外网播放地址" label="外网播放地址"
placeholder="http(s)://domain:port" placeholder="http(s)://domain:port"
hint="跳转播放页面使用的地址，格式：http(s)://domain:port" hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
@@ -211,7 +212,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.JELLYFIN_API_KEY" v-model="mediaServerInfo.config.apikey"
label="API密钥" label="API密钥"
hint="Jellyfin设置->高级->API密钥中生成的密钥" hint="Jellyfin设置->高级->API密钥中生成的密钥"
persistent-hint persistent-hint
@@ -230,7 +231,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.PLEX_HOST" v-model="mediaServerInfo.config.host"
label="地址" label="地址"
placeholder="http(s)://ip:port" placeholder="http(s)://ip:port"
hint="服务端地址，格式：http(s)://ip:port" hint="服务端地址，格式：http(s)://ip:port"
@@ -239,7 +240,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.PLEX_PLAY_HOST" v-model="mediaServerInfo.config.play_host"
label="外网播放地址" label="外网播放地址"
placeholder="http(s)://domain:port" placeholder="http(s)://domain:port"
hint="跳转播放页面使用的地址，格式：http(s)://domain:port" hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
@@ -248,7 +249,7 @@ onMounted(() => {
</VCol> </VCol>
<VCol cols="12" md="6"> <VCol cols="12" md="6">
<VTextField <VTextField
v-model="mediaServerInfo.config.PLEX_TOKEN" v-model="mediaServerInfo.config.token"
label="X-Plex-Token" label="X-Plex-Token"
hint="浏览器F12->网络，从Plex请求URL中获取的X-Plex-Token" hint="浏览器F12->网络，从Plex请求URL中获取的X-Plex-Token"
persistent-hint persistent-hint
src/views/setting/AccountSettingSystem.vue
+22 -2
View File
@@ -38,6 +38,8 @@ async function saveDownloaderSetting() {
const result: { [key: string]: any } = await api.post('system/setting/Downloaders', downloaders.value) const result: { [key: string]: any } = await api.post('system/setting/Downloaders', downloaders.value)
if (result.success) $toast.success('下载器设置保存成功') if (result.success) $toast.success('下载器设置保存成功')
else $toast.error('下载器设置保存失败！') else $toast.error('下载器设置保存失败！')
loadDownloaderSetting()
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
@@ -59,6 +61,8 @@ async function saveMediaServerSetting() {
const result: { [key: string]: any } = await api.post('system/setting/MediaServers', mediaServers.value) const result: { [key: string]: any } = await api.post('system/setting/MediaServers', mediaServers.value)
if (result.success) $toast.success('媒体服务器设置保存成功') if (result.success) $toast.success('媒体服务器设置保存成功')
else $toast.error('媒体服务器设置保存失败！') else $toast.error('媒体服务器设置保存失败！')
loadMediaServerSetting()
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
@@ -108,6 +112,12 @@ function removeDownloader(ele: DownloaderConf) {
downloaders.value.splice(index, 1) downloaders.value.splice(index, 1)
} }
// 下载器变化
function onDownloaderChange(downloader: DownloaderConf) {
const index = downloaders.value.findIndex(item => item.name === downloader.name)
downloaders.value[index] = downloader
}
// 添加媒体服务器 // 添加媒体服务器
function addMediaServer(mediaserver: string) { function addMediaServer(mediaserver: string) {
mediaServers.value.push({ mediaServers.value.push({
@@ -124,6 +134,12 @@ function removeMediaServer(ele: MediaServerConf) {
mediaServers.value.splice(index, 1) mediaServers.value.splice(index, 1)
} }
// 变更媒体服务器
function onMediaServerChange(mediaserver: MediaServerConf) {
const index = mediaServers.value.findIndex(item => item.name === mediaserver.name)
mediaServers.value[index] = mediaserver
}
// 加载数据 // 加载数据
onMounted(() => { onMounted(() => {
loadDownloaderSetting() loadDownloaderSetting()
@@ -178,7 +194,7 @@ onMounted(() => {
:component-data="{ 'class': 'grid gap-3 grid-app-card' }" :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
> >
<template #item="{ element }"> <template #item="{ element }">
<DownloaderCard :downloader="element" @close="removeDownloader(element)" /> <DownloaderCard :downloader="element" @close="removeDownloader(element)" @change="onDownloaderChange" />
</template> </template>
</draggable> </draggable>
</VCardText> </VCardText>
@@ -221,7 +237,11 @@ onMounted(() => {
:component-data="{ 'class': 'grid gap-3 grid-app-card' }" :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
> >
<template #item="{ element }"> <template #item="{ element }">
<MediaServerCard :mediaserver="element" @close="removeMediaServer(element)" /> <MediaServerCard
:mediaserver="element"
@close="removeMediaServer(element)"
@change="onMediaServerChange"
/>
</template> </template>
</draggable> </draggable>
</VCardText> </VCardText>