lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-05-17 02:07:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: 优化设置页面 拆分组件

Browse Source
This commit is contained in:
alger
2025-04-29 23:38:17 +08:00
parent 16d6ff39c8
commit c98fa20a74
6 changed files with 437 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/set/index.vue
+44 -241
View File
@@ -150,7 +150,7 @@
/>
</div>
<div class="set-item">
<div class="set-item" v-if="isElectron">
<div>
<div class="set-item-title">{{ t('settings.playback.musicSources') }}</div>
<div class="set-item-content">
@@ -165,7 +165,7 @@
<div class="text-sm">
<span class="text-gray-500">{{ t('settings.playback.selectedMusicSources') }}</span>
<span v-if="musicSources.length > 0" class="text-gray-400">
{{ musicSources.map((source) => getSourceLabel(source)).join(', ') }}
{{ musicSources.join(', ') }}
</span>
<span v-else class="text-red-500 text-xs">
{{ t('settings.playback.noMusicSources') }}
@@ -428,145 +428,40 @@
<play-bottom />
</n-scrollbar>
<!-- 快捷键设置弹窗 -->
<shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
<template v-if="isElectron">
<!-- 快捷键设置弹窗 -->
<shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
<!-- 代理设置弹窗 -->
<proxy-settings
v-model:show="showProxyModal"
:config="proxyForm"
@confirm="handleProxyConfirm"
/>
<!-- 音源设置弹窗 -->
<music-source-settings
v-model:show="showMusicSourcesModal"
v-model:sources="musicSources"
/>
<!-- 远程控制设置弹窗 -->
<remote-control-setting v-model:visible="showRemoteControlModal" />
</template>
<!-- 代理设置弹窗 -->
<n-modal
v-model:show="showProxyModal"
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="showProxyModal = false"
>
<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>
<!-- 清除缓存弹窗 -->
<n-modal
<clear-cache-settings
v-model:show="showClearCacheModal"
preset="dialog"
:title="t('settings.system.cache')"
:positive-text="t('common.confirm')"
:negative-text="t('common.cancel')"
@positive-click="clearCache"
@negative-click="
() => {
selectedCacheTypes = [];
}
"
>
<n-space vertical>
<p>{{ t('settings.system.cacheClearTitle') }}</p>
<n-checkbox-group v-model:value="selectedCacheTypes">
<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>
@confirm="clearCache"
/>
<!-- 音源设置弹窗 -->
<n-modal
v-model:show="showMusicSourcesModal"
preset="dialog"
:title="t('settings.playback.musicSources')"
:positive-text="t('common.confirm')"
:negative-text="t('common.cancel')"
@positive-click="showMusicSourcesModal = false"
@negative-click="showMusicSourcesModal = false"
>
<n-space vertical>
<p>{{ t('settings.playback.musicSourcesDesc') }}</p>
<n-checkbox-group v-model:value="musicSources">
<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="musicSources.length === 0" class="text-red-500 text-sm">
{{ t('settings.playback.musicSourcesWarning') }}
</div>
<!-- GD音乐台设置 -->
<div v-if="musicSources.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>
<!-- 远程控制设置弹窗 -->
<remote-control-setting v-model:visible="showRemoteControlModal" />
</div>
</template>
<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core';
import type { FormRules } from 'naive-ui';
import { useMessage } from 'naive-ui';
import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
@@ -577,18 +472,20 @@ import DonationList from '@/components/common/DonationList.vue';
import PlayBottom from '@/components/common/PlayBottom.vue';
import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
import ProxySettings from '@/components/settings/ProxySettings.vue';
import ClearCacheSettings from '@/components/settings/ClearCacheSettings.vue';
import MusicSourceSettings from '@/components/settings/MusicSourceSettings.vue';
import RemoteControlSetting from '@/components/settings/ServerSetting.vue';
import { useSettingsStore } from '@/store/modules/settings';
import { useUserStore } from '@/store/modules/user';
import { isElectron, isMobile } from '@/utils';
import { openDirectory, selectDirectory } from '@/utils/fileOperation';
import { checkUpdate, UpdateResult } from '@/utils/update';
import RemoteControlSetting from '@/views/setting/ServerSetting.vue';
import { type Platform } from '@/types/music';
import config from '../../../../package.json';
// 手动定义Platform类型，避免从主进程导入的问题
type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube' | 'gdmusic';
// 所有平台
// 所有平台默认值
const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
const settingsStore = useSettingsStore();
@@ -705,41 +602,12 @@ const openDownloadPath = () => {
};
const showProxyModal = ref(false);
const formRef = ref();
const proxyForm = ref({
protocol: 'http',
host: '127.0.0.1',
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;
}
}
};
// 使用 store 中的字体列表
const systemFonts = computed(() => settingsStore.systemFonts);
@@ -817,24 +685,16 @@ watch(
{ immediate: true, deep: true }
);
const handleProxyConfirm = async () => {
try {
await formRef.value?.validate();
// 保存代理配置时保留enable状态
setData.value = {
...setData.value,
proxyConfig: {
enable: setData.value.proxyConfig?.enable || false,
protocol: proxyForm.value.protocol,
host: proxyForm.value.host,
port: proxyForm.value.port
}
};
showProxyModal.value = false;
message.success(t('settings.network.messages.proxySuccess'));
} catch (err) {
message.error(t('settings.network.messages.proxyError'));
}
const handleProxyConfirm = async (proxyConfig) => {
// 保存代理配置时保留enable状态
setData.value = {
...setData.value,
proxyConfig: {
enable: setData.value.proxyConfig?.enable || false,
...proxyConfig
}
};
message.success(t('settings.network.messages.proxySuccess'));
};
const validateAndSaveRealIP = () => {
@@ -880,48 +740,9 @@ const toggleDonationList = () => {
// 清除缓存相关
const showClearCacheModal = ref(false);
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')
}
]);
const selectedCacheTypes = ref<string[]>([]);
const clearCache = async () => {
const clearTasks = selectedCacheTypes.value.map(async (type) => {
const clearCache = async (selectedCacheTypes) => {
const clearTasks = selectedCacheTypes.map(async (type) => {
switch (type) {
case 'history':
localStorage.removeItem('musicHistory');
@@ -980,8 +801,6 @@ const clearCache = async () => {
await Promise.all(clearTasks);
message.success(t('settings.system.messages.clearSuccess'));
showClearCacheModal.value = false;
selectedCacheTypes.value = [];
};
const showShortcutModal = ref(false);
@@ -1076,17 +895,6 @@ onMounted(() => {
});
// 音源设置相关
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' }
]);
// 已选择的音源列表
const musicSources = computed({
get: () => {
if (!setData.value.enabledMusicSources) {
@@ -1106,11 +914,6 @@ const musicSources = computed({
const showMusicSourcesModal = ref(false);
const getSourceLabel = (source: Platform) => {
const sourceLabel = musicSourceOptions.value.find(s => s.value === source)?.label;
return sourceLabel || source;
};
// 远程控制设置弹窗
const showRemoteControlModal = ref(false);
</script>
src/renderer/views/setting/ServerSetting.vue
-226
View File
@@ -1,226 +0,0 @@
<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>