mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 15:47:23 +08:00
✨ feat: 优化设置页面 拆分组件
This commit is contained in:
alger
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="visible"
|
||||
preset="dialog"
|
||||
:title="t('settings.system.cache')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
@positive-click="handleConfirm"
|
||||
@negative-click="handleCancel"
|
||||
>
|
||||
<n-space vertical>
|
||||
<p>{{ t('settings.system.cacheClearTitle') }}</p>
|
||||
<n-checkbox-group v-model:value="selectedTypes">
|
||||
<n-space vertical>
|
||||
<n-checkbox
|
||||
v-for="option in clearCacheOptions"
|
||||
:key="option.key"
|
||||
:value="option.key"
|
||||
:label="option.label"
|
||||
>
|
||||
<template #default>
|
||||
<div>
|
||||
<div>{{ t(`settings.system.cacheTypes.${option.key}.label`) }}</div>
|
||||
<div class="text-gray-400 text-sm">
|
||||
{{ t(`settings.system.cacheTypes.${option.key}.description`) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</n-checkbox>
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-space>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:show', 'confirm']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const visible = ref(props.show);
|
||||
const selectedTypes = ref<string[]>([]);
|
||||
|
||||
const clearCacheOptions = ref([
|
||||
{
|
||||
label: t('settings.system.cacheTypes.history.label'),
|
||||
key: 'history',
|
||||
description: t('settings.system.cacheTypes.history.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.favorite.label'),
|
||||
key: 'favorite',
|
||||
description: t('settings.system.cacheTypes.favorite.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.user.label'),
|
||||
key: 'user',
|
||||
description: t('settings.system.cacheTypes.user.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.settings.label'),
|
||||
key: 'settings',
|
||||
description: t('settings.system.cacheTypes.settings.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.downloads.label'),
|
||||
key: 'downloads',
|
||||
description: t('settings.system.cacheTypes.downloads.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.resources.label'),
|
||||
key: 'resources',
|
||||
description: t('settings.system.cacheTypes.resources.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.lyrics.label'),
|
||||
key: 'lyrics',
|
||||
description: t('settings.system.cacheTypes.lyrics.description')
|
||||
}
|
||||
]);
|
||||
|
||||
// 同步外部show属性变化
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
visible.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
// 同步内部visible变化
|
||||
watch(
|
||||
() => visible.value,
|
||||
(newVal) => {
|
||||
emit('update:show', newVal);
|
||||
}
|
||||
);
|
||||
|
||||
const handleConfirm = () => {
|
||||
emit('confirm', selectedTypes.value);
|
||||
selectedTypes.value = [];
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
selectedTypes.value = [];
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="visible"
|
||||
preset="dialog"
|
||||
:title="t('settings.playback.musicSources')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
@positive-click="handleConfirm"
|
||||
@negative-click="handleCancel"
|
||||
>
|
||||
<n-space vertical>
|
||||
<p>{{ t('settings.playback.musicSourcesDesc') }}</p>
|
||||
<n-checkbox-group v-model:value="selectedSources">
|
||||
<n-grid :cols="2" :x-gap="12" :y-gap="8">
|
||||
<n-grid-item v-for="source in musicSourceOptions" :key="source.value">
|
||||
<n-checkbox :value="source.value">
|
||||
{{ source.label }}
|
||||
<template v-if="source.value === 'gdmusic'">
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-icon size="16" class="ml-1 text-blue-500 cursor-help">
|
||||
<i class="ri-information-line"></i>
|
||||
</n-icon>
|
||||
</template>
|
||||
{{ t('settings.playback.gdmusicInfo') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
</n-checkbox>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-checkbox-group>
|
||||
<div v-if="selectedSources.length === 0" class="text-red-500 text-sm">
|
||||
{{ t('settings.playback.musicSourcesWarning') }}
|
||||
</div>
|
||||
|
||||
<!-- GD音乐台设置 -->
|
||||
<div v-if="selectedSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
|
||||
</p>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { type Platform } from '@/types/music';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sources: {
|
||||
type: Array as () => Platform[],
|
||||
default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube']
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:show', 'update:sources']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const visible = ref(props.show);
|
||||
const selectedSources = ref<Platform[]>(props.sources);
|
||||
|
||||
const musicSourceOptions = ref([
|
||||
{ label: 'MiGu音乐', value: 'migu' },
|
||||
{ label: '酷狗音乐', value: 'kugou' },
|
||||
{ label: 'pyncmd', value: 'pyncmd' },
|
||||
{ label: '酷我音乐', value: 'kuwo' },
|
||||
{ label: 'Bilibili音乐', value: 'bilibili' },
|
||||
{ label: 'YouTube', value: 'youtube' },
|
||||
{ label: 'GD音乐台', value: 'gdmusic' }
|
||||
]);
|
||||
|
||||
// 同步外部show属性变化
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
visible.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
// 同步内部visible变化
|
||||
watch(
|
||||
() => visible.value,
|
||||
(newVal) => {
|
||||
emit('update:show', newVal);
|
||||
}
|
||||
);
|
||||
|
||||
// 同步外部sources属性变化
|
||||
watch(
|
||||
() => props.sources,
|
||||
(newVal) => {
|
||||
selectedSources.value = [...newVal];
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const handleConfirm = () => {
|
||||
// 确保至少选择一个音源
|
||||
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
|
||||
const valuesToEmit = selectedSources.value.length > 0
|
||||
? [...new Set(selectedSources.value)]
|
||||
: defaultPlatforms;
|
||||
|
||||
emit('update:sources', valuesToEmit);
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
// 取消时还原为props传入的初始值
|
||||
selectedSources.value = [...props.sources];
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="visible"
|
||||
preset="dialog"
|
||||
:title="t('settings.network.proxy')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
:show-icon="false"
|
||||
@positive-click="handleProxyConfirm"
|
||||
@negative-click="handleCancel"
|
||||
>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="proxyForm"
|
||||
:rules="proxyRules"
|
||||
label-placement="left"
|
||||
label-width="80"
|
||||
require-mark-placement="right-hanging"
|
||||
>
|
||||
<n-form-item :label="t('settings.network.proxy')" path="protocol">
|
||||
<n-select
|
||||
v-model:value="proxyForm.protocol"
|
||||
:options="[
|
||||
{ label: 'HTTP', value: 'http' },
|
||||
{ label: 'HTTPS', value: 'https' },
|
||||
{ label: 'SOCKS5', value: 'socks5' }
|
||||
]"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="t('settings.network.proxyHost')" path="host">
|
||||
<n-input
|
||||
v-model:value="proxyForm.host"
|
||||
:placeholder="t('settings.network.proxyHostPlaceholder')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="t('settings.network.proxyPort')" path="port">
|
||||
<n-input-number
|
||||
v-model:value="proxyForm.port"
|
||||
:placeholder="t('settings.network.proxyPortPlaceholder')"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import type { FormRules } from 'naive-ui';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
protocol: 'http',
|
||||
host: '127.0.0.1',
|
||||
port: 7890
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:show', 'confirm']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const message = useMessage();
|
||||
const formRef = ref();
|
||||
|
||||
const visible = ref(props.show);
|
||||
const proxyForm = ref({
|
||||
protocol: props.config.protocol || 'http',
|
||||
host: props.config.host || '127.0.0.1',
|
||||
port: props.config.port || 7890
|
||||
});
|
||||
|
||||
const proxyRules: FormRules = {
|
||||
protocol: {
|
||||
required: true,
|
||||
message: t('settings.validation.selectProxyProtocol'),
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
host: {
|
||||
required: true,
|
||||
message: t('settings.validation.proxyHost'),
|
||||
trigger: ['blur', 'change'],
|
||||
validator: (_rule, value) => {
|
||||
if (!value) return false;
|
||||
// 简单的IP或域名验证
|
||||
const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
|
||||
return ipRegex.test(value);
|
||||
}
|
||||
},
|
||||
port: {
|
||||
required: true,
|
||||
message: t('settings.validation.portNumber'),
|
||||
trigger: ['blur', 'change'],
|
||||
validator: (_rule, value) => {
|
||||
return value >= 1 && value <= 65535;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 同步外部show属性变化
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
visible.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
// 同步内部visible变化
|
||||
watch(
|
||||
() => visible.value,
|
||||
(newVal) => {
|
||||
emit('update:show', newVal);
|
||||
}
|
||||
);
|
||||
|
||||
// 同步外部config变化
|
||||
watch(
|
||||
() => props.config,
|
||||
(newVal) => {
|
||||
proxyForm.value = {
|
||||
protocol: newVal.protocol || 'http',
|
||||
host: newVal.host || '127.0.0.1',
|
||||
port: newVal.port || 7890
|
||||
};
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const handleProxyConfirm = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
emit('confirm', { ...proxyForm.value });
|
||||
visible.value = false;
|
||||
message.success(t('settings.network.messages.proxySuccess'));
|
||||
} catch (err) {
|
||||
message.error(t('settings.network.messages.proxyError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="visible"
|
||||
preset="card"
|
||||
:title="t('settings.remoteControl.title')"
|
||||
class="remote-control-modal"
|
||||
style="max-width: 650px; width: 100%"
|
||||
>
|
||||
<n-scrollbar>
|
||||
<div class="remote-control-setting">
|
||||
<n-form label-placement="left" label-width="auto" :style="{ maxWidth: '640px' }">
|
||||
<n-form-item :label="t('settings.remoteControl.enable')">
|
||||
<n-switch v-model:value="remoteControlConfig.enabled" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item :label="t('settings.remoteControl.port')">
|
||||
<n-input-number
|
||||
v-model:value="remoteControlConfig.port"
|
||||
:min="1024"
|
||||
:max="65535"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item :label="t('settings.remoteControl.allowedIps')">
|
||||
<div class="allowed-ips-container">
|
||||
<div v-for="(_, index) in remoteControlConfig.allowedIps" :key="index" class="ip-item">
|
||||
<n-input v-model:value="remoteControlConfig.allowedIps[index]" :disabled="!remoteControlConfig.enabled" />
|
||||
<n-button
|
||||
quaternary
|
||||
circle
|
||||
type="error"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="removeIp(index)"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon><i class="ri-delete-bin-line"></i></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
<n-button
|
||||
secondary
|
||||
size="small"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="addIp"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon><i class="ri-add-line"></i></n-icon>
|
||||
</template>
|
||||
{{ t('settings.remoteControl.addIp') }}
|
||||
</n-button>
|
||||
<n-text depth="3" size="small" class="allow-all-hint">
|
||||
{{ t('settings.remoteControl.emptyListHint') }}
|
||||
</n-text>
|
||||
</div>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item>
|
||||
<n-space>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="saveConfig"
|
||||
>
|
||||
{{ t('common.save') }}
|
||||
</n-button>
|
||||
<n-button @click="resetConfig">
|
||||
{{ t('common.reset') }}
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
|
||||
<n-collapse-transition :show="remoteControlConfig.enabled">
|
||||
<div class="remote-info">
|
||||
<n-alert type="info">
|
||||
<template #icon>
|
||||
<n-icon><i class="ri-information-line"></i></n-icon>
|
||||
</template>
|
||||
<p>{{ t('settings.remoteControl.accessInfo') }}</p>
|
||||
<div class="access-url">
|
||||
<n-tag type="success">
|
||||
http://localhost:{{ remoteControlConfig.port }}/
|
||||
</n-tag>
|
||||
</div>
|
||||
<div v-if="localIpAddresses.length" class="local-ips">
|
||||
<div v-for="ip in localIpAddresses" :key="ip" class="ip-address">
|
||||
<n-tag type="info">
|
||||
http://{{ ip }}:{{ remoteControlConfig.port }}/
|
||||
</n-tag>
|
||||
</div>
|
||||
</div>
|
||||
</n-alert>
|
||||
</div>
|
||||
</n-collapse-transition>
|
||||
</n-form>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
const { t } = useI18n();
|
||||
const message = useMessage();
|
||||
|
||||
// 控制弹窗显示的属性
|
||||
const visible = defineModel('visible', { default: false });
|
||||
|
||||
// 默认配置
|
||||
const defaultConfig:{
|
||||
enabled: boolean,
|
||||
port: number,
|
||||
allowedIps: string[]
|
||||
} = {
|
||||
enabled: false,
|
||||
port: 31888,
|
||||
allowedIps: []
|
||||
};
|
||||
|
||||
// 远程控制配置
|
||||
const remoteControlConfig = ref({...defaultConfig});
|
||||
|
||||
// 本地IP地址列表
|
||||
const localIpAddresses = ref<string[]>([]);
|
||||
|
||||
// 获取本地IP地址
|
||||
const getLocalIpAddresses = () => {
|
||||
if (window.electron) {
|
||||
window.electron.ipcRenderer.invoke('get-local-ip-addresses').then((ips: string[]) => {
|
||||
localIpAddresses.value = ips;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 添加IP地址
|
||||
const addIp = () => {
|
||||
remoteControlConfig.value.allowedIps.push('');
|
||||
};
|
||||
|
||||
// 删除IP地址
|
||||
const removeIp = (index: number) => {
|
||||
remoteControlConfig.value.allowedIps.splice(index, 1);
|
||||
};
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = () => {
|
||||
// 过滤空IP
|
||||
remoteControlConfig.value.allowedIps = remoteControlConfig.value.allowedIps.filter(ip => ip.trim() !== '');
|
||||
|
||||
if (window.electron) {
|
||||
window.electron.ipcRenderer.send('update-remote-control-config', cloneDeep(remoteControlConfig.value));
|
||||
message.success(t('settings.remoteControl.saveSuccess'));
|
||||
}
|
||||
};
|
||||
|
||||
// 重置配置
|
||||
const resetConfig = () => {
|
||||
if (window.electron) {
|
||||
window.electron.ipcRenderer.invoke('get-remote-control-config').then((config) => {
|
||||
if (config) {
|
||||
remoteControlConfig.value = config;
|
||||
} else {
|
||||
remoteControlConfig.value = { ...defaultConfig };
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时，获取当前配置
|
||||
onMounted(async () => {
|
||||
if (window.electron) {
|
||||
try {
|
||||
const config = await window.electron.ipcRenderer.invoke('get-remote-control-config');
|
||||
if (config) {
|
||||
remoteControlConfig.value = config;
|
||||
}
|
||||
// 获取本地IP地址
|
||||
getLocalIpAddresses();
|
||||
} catch (error) {
|
||||
console.error('获取远程控制配置失败:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.remote-control-setting {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.allowed-ips-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
|
||||
.ip-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.allow-all-hint {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.remote-info {
|
||||
margin-top: 16px;
|
||||
|
||||
.access-url {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.local-ips {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user