80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<template lang="pug">
|
|
dt#sync
|
|
| {{$t('setting__sync')}}
|
|
button(class="help-btn" @click="openUrl('https://lyswhut.github.io/lx-music-doc/desktop/faq/sync')" :aria-label="$t('setting__sync_tip')")
|
|
svg-icon(name="help-circle-outline")
|
|
dd
|
|
base-checkbox(id="setting_sync_enable" :modelValue="appSetting['sync.enable']" @update:modelValue="updateSetting({ 'sync.enable': $event })" :label="syncEnableTitle")
|
|
div
|
|
p.small {{$t('setting__sync_auth_code', { code: sync.status.code || '' })}}
|
|
p.small {{$t('setting__sync_address', { address: sync.status.address.join(', ') || '' })}}
|
|
p.small {{$t('setting__sync_device', { devices: syncDevices })}}
|
|
p
|
|
base-btn.btn(min :disabled="!sync.status.status" @click="refreshSyncCode") {{$t('setting__sync_refresh_code')}}
|
|
dd
|
|
h3#sync_port {{$t('setting__sync_port')}}
|
|
div
|
|
p
|
|
base-input.gap-left(:modelValue="appSetting['sync.port']" type="number" @update:modelValue="setSyncPort" :placeholder="$t('setting__sync_port_tip')")
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from '@common/utils/vueTools'
|
|
import { sync } from '@renderer/store'
|
|
import { sendSyncAction } from '@renderer/utils/ipc'
|
|
import { openUrl } from '@common/utils/electron'
|
|
import { useI18n } from '@renderer/plugins/i18n'
|
|
import { appSetting, updateSetting } from '@renderer/store/setting'
|
|
import { debounce } from '@common/utils/common'
|
|
|
|
export default {
|
|
name: 'SettingSync',
|
|
setup() {
|
|
const t = useI18n()
|
|
|
|
|
|
const syncEnableTitle = computed(() => {
|
|
let title = t('setting__sync_enable')
|
|
if (sync.status.message) {
|
|
title += ` [${sync.status.message}]`
|
|
}
|
|
// else if (this.sync.status.address.length) {
|
|
// // title += ` [${this.sync.status.address.join(', ')}]`
|
|
// }
|
|
return title
|
|
})
|
|
const syncDevices = computed(() => {
|
|
return sync.status.devices.length
|
|
? sync.status.devices.map(d => `${d.deviceName} (${d.clientId.substring(0, 5)})`).join(', ')
|
|
: ''
|
|
})
|
|
|
|
const refreshSyncCode = () => {
|
|
sendSyncAction({ action: 'generate_code' })
|
|
}
|
|
|
|
const setSyncPort = debounce(port => {
|
|
updateSetting({ 'sync.port': port.trim() })
|
|
}, 500)
|
|
|
|
|
|
return {
|
|
appSetting,
|
|
updateSetting,
|
|
sync,
|
|
syncEnableTitle,
|
|
setSyncPort,
|
|
syncDevices,
|
|
refreshSyncCode,
|
|
openUrl,
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" module>
|
|
.save-path {
|
|
font-size: 12px;
|
|
}
|
|
</style>
|