ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

重构数据同步功能，新增客户端模式

Browse Source
This commit is contained in:
lyswhut
2023-02-28 18:01:56 +08:00
parent b42092884e
commit 3b70acc3ca
43 changed files with 2232 additions and 1249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/App.vue
+1
View File
@@ -11,6 +11,7 @@
<layout-update-modal />
<layout-pact-modal />
<layout-sync-mode-modal />
<layout-sync-auth-code-modal />
<layout-play-detail />
</div>
</template>
src/renderer/components/layout/SyncAuthCodeModal.vue
+106
View File
@@ -0,0 +1,106 @@
<template>
<material-modal :show="sync.isShowAuthCodeModal" :bg-close="false" @close="handleClose" @after-enter="$refs.input.focus()">
<main :class="$style.main">
<h2>{{ $t('sync__auth_code_title') }}</h2>
<base-input
ref="input"
v-model="authCode"
:class="$style.input"
:placeholder="$t('sync__auth_code_input_tip')"
@submit="handleSubmit" @blur="verify"
/>
<div :class="$style.footer">
<base-btn :class="$style.btn" @click="handleSubmit">{{ $t('btn_confirm') }}</base-btn>
</div>
</main>
</material-modal>
</template>
<script>
import { ref } from '@common/utils/vueTools'
import { sync } from '@renderer/store'
import { appSetting } from '@renderer/store/setting'
import { sendSyncAction } from '@renderer/utils/ipc'
export default {
setup() {
const authCode = ref('')
const handleClose = () => {
sync.isShowAuthCodeModal = false
}
const verify = () => {
if (authCode.value.length > 100) authCode.value = authCode.value.substring(0, 100)
return authCode.value
}
const handleSubmit = () => {
let code = verify()
if (code == '') return
handleClose()
sendSyncAction({
action: 'enable_client',
data: {
enable: appSetting['sync.enable'],
host: appSetting['sync.client.host'],
authCode: code,
},
})
}
return {
sync,
authCode,
handleClose,
verify,
handleSubmit,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.main {
padding: 0 15px;
max-width: 530px;
min-width: 280px;
display: flex;
flex-flow: column nowrap;
min-height: 0;
// max-height: 100%;
// overflow: hidden;
h2 {
font-size: 13px;
color: var(--color-font);
line-height: 1.3;
word-break: break-all;
// text-align: center;
padding: 15px 0 8px;
}
}
.input {
// width: 100%;
// height: 26px;
padding: 8px 8px;
}
.footer {
margin: 20px 0 15px auto;
}
.btn {
// box-sizing: border-box;
// margin-left: 15px;
// margin-bottom: 15px;
// height: 36px;
// line-height: 36px;
// padding: 0 10px !important;
min-width: 70px;
// .mixin-ellipsis-1;
+.btn {
margin-left: 10px;
}
}
</style>
src/renderer/components/layout/SyncModeModal.vue
+1 -1
View File
@@ -23,7 +23,7 @@
<dl :class="$style.btnGroup">
<dt :class="$style.label">{{ $t('sync__other_label') }}</dt>
<dd :class="$style.btns">
<base-btn :class="$style.btn" @click="handleSelectMode('none')">{{ $t('sync__overwrite_btn_none') }}</base-btn>
<!-- <base-btn :class="$style.btn" @click="handleSelectMode('none')">{{ $t('sync__overwrite_btn_none') }}</base-btn> -->
<base-btn :class="$style.btn" @click="handleSelectMode('cancel')">{{ $t('sync__overwrite_btn_cancel') }}</base-btn>
</dd>
</dl>
src/renderer/core/useApp/useSettingSync.ts
+53 -16
View File
@@ -32,25 +32,62 @@ export default () => {
immediate: true,
})
watch(() => appSetting['sync.mode'], (mode) => {
sync.mode = mode
})
watch(() => appSetting['sync.enable'], enable => {
void sendSyncAction({
action: 'enable',
data: {
enable,
port: appSetting['sync.port'],
},
})
switch (appSetting['sync.mode']) {
case 'server':
if (appSetting['sync.server.port']) {
void sendSyncAction({
action: 'enable_server',
data: {
enable: appSetting['sync.enable'],
port: appSetting['sync.server.port'],
},
})
}
break
case 'client':
if (appSetting['sync.client.host']) {
void sendSyncAction({
action: 'enable_client',
data: {
enable: appSetting['sync.enable'],
host: appSetting['sync.client.host'],
},
})
}
break
default:
break
}
sync.enable = enable
})
watch(() => appSetting['sync.port'], port => {
void sendSyncAction({
action: 'enable',
data: {
enable: appSetting['sync.enable'],
port: appSetting['sync.port'],
},
})
sync.port = port
watch(() => appSetting['sync.server.port'], port => {
if (appSetting['sync.mode'] == 'server') {
void sendSyncAction({
action: 'enable_server',
data: {
enable: appSetting['sync.enable'],
port: appSetting['sync.server.port'],
},
})
}
sync.server.port = port
})
watch(() => appSetting['sync.client.host'], host => {
if (appSetting['sync.mode'] == 'client') {
void sendSyncAction({
action: 'enable_client',
data: {
enable: appSetting['sync.enable'],
host: appSetting['sync.client.host'],
},
})
}
sync.client.host = host
})
watch(() => appSetting['network.proxy.enable'], enable => {
src/renderer/core/useApp/useSync.ts
+47 -16
View File
@@ -2,23 +2,33 @@ import { markRaw, onBeforeUnmount } from '@common/utils/vueTools'
import { onSyncAction, sendSyncAction } from '@renderer/utils/ipc'
import { sync } from '@renderer/store'
import { appSetting } from '@renderer/store/setting'
import { SYNC_CODE } from '@common/constants'
export default () => {
const handleSyncList = (event: LX.Sync.SyncMainWindowActions) => {
console.log(event)
switch (event.action) {
case 'select_mode':
sync.deviceName = event.data.deviceName
sync.deviceName = event.data
sync.isShowSyncMode = true
break
case 'close_select_mode':
sync.isShowSyncMode = false
break
case 'status':
sync.status.status = event.data.status
sync.status.message = event.data.message
sync.status.address = markRaw(event.data.address)
sync.status.code = event.data.code
sync.status.devices = markRaw(event.data.devices)
case 'server_status':
sync.server.status.status = event.data.status
sync.server.status.message = event.data.message
sync.server.status.address = markRaw(event.data.address)
sync.server.status.code = event.data.code
sync.server.status.devices = markRaw(event.data.devices)
break
case 'client_status':
sync.client.status.status = event.data.status
sync.client.status.message = event.data.message
sync.client.status.address = markRaw(event.data.address)
if (event.data.message == SYNC_CODE.missingAuthCode || event.data.message == SYNC_CODE.authFailed) {
if (!sync.isShowAuthCodeModal) sync.isShowAuthCodeModal = true
} else if (sync.isShowAuthCodeModal) sync.isShowAuthCodeModal = false
break
}
}
@@ -33,15 +43,36 @@ export default () => {
return async() => {
sync.enable = appSetting['sync.enable']
sync.port = appSetting['sync.port']
if (appSetting['sync.enable'] && appSetting['sync.port']) {
void sendSyncAction({
action: 'enable',
data: {
enable: appSetting['sync.enable'],
port: appSetting['sync.port'],
},
})
sync.mode = appSetting['sync.mode']
sync.server.port = appSetting['sync.server.port']
sync.client.host = appSetting['sync.client.host']
if (appSetting['sync.enable']) {
switch (appSetting['sync.mode']) {
case 'server':
if (appSetting['sync.server.port']) {
void sendSyncAction({
action: 'enable_server',
data: {
enable: appSetting['sync.enable'],
port: appSetting['sync.server.port'],
},
})
}
break
case 'client':
if (appSetting['sync.client.host']) {
void sendSyncAction({
action: 'enable_client',
data: {
enable: appSetting['sync.enable'],
host: appSetting['sync.client.host'],
},
})
}
break
default:
break
}
}
}
}
src/renderer/store/index.ts
+38 -14
View File
@@ -27,27 +27,51 @@ export const proxy: {
}
export const sync: {
enable: boolean
port: string
mode: LX.AppSetting['sync.mode']
isShowSyncMode: boolean
isShowAuthCodeModal: boolean
deviceName: string
status: {
status: boolean
message: string
address: string[]
code: string
devices: LX.Sync.KeyInfo[]
server: {
port: string
status: {
status: boolean
message: string
address: string[]
code: string
devices: LX.Sync.ServerKeyInfo[]
}
}
client: {
host: string
status: {
status: boolean
message: string
address: string[]
}
}
} = reactive({
enable: false,
port: '',
mode: 'server',
isShowSyncMode: false,
isShowAuthCodeModal: false,
deviceName: '',
status: {
status: false,
message: '',
address: [],
code: '',
devices: [],
server: {
port: '',
status: {
status: false,
message: '',
address: [],
code: '',
devices: [],
},
},
client: {
host: '',
status: {
status: false,
message: '',
address: [],
},
},
})
src/renderer/views/Setting/components/SettingSync.vue
+75 -21
View File
@@ -4,18 +4,37 @@ dt#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')}}
base-checkbox(id="setting_sync_enable" :modelValue="appSetting['sync.enable']" @update:modelValue="updateSetting({ 'sync.enable': $event })" :label="$t('setting__sync_enable')")
dd
h3#sync_port {{$t('setting__sync_port')}}
h3#sync_mode {{$t('setting__sync_mode')}}
div
base-checkbox.gap-left(id="setting_sync_mode_server" :disabled="sync.enable" :modelValue="appSetting['sync.mode']" @update:modelValue="updateSetting({ 'sync.mode': $event })" need value="server" :label="$t('setting__sync_mode_server')")
base-checkbox.gap-left(id="setting_sync_mode_client" :disabled="sync.enable" :modelValue="appSetting['sync.mode']" @update:modelValue="updateSetting({ 'sync.mode': $event })" need value="client" :label="$t('setting__sync_mode_client')")
dd(v-if="sync.mode == 'client'")
h3 {{$t('setting__sync_client_mode')}}
div
p.small {{$t('setting__sync_client_status', { status: clientStatus })}}
p.small {{$t('setting__sync_client_address', { address: sync.client.status.address.join(', ') || '' })}}
p
base-input.gap-left(:modelValue="appSetting['sync.port']" type="number" @update:modelValue="setSyncPort" :placeholder="$t('setting__sync_port_tip')")
p.small {{$t('setting__sync_client_host')}}
div
base-input.gap-left(:class="$style.hostInput" :modelValue="appSetting['sync.client.host']" :disabled="sync.enable" @update:modelValue="setSyncClientHost" :placeholder="$t('setting__sync_client_host_tip')")
dd(v-else)
h3 {{syncEnableServerTitle}}
div
p.small {{$t('setting__sync_server_auth_code', { code: sync.server.status.code || '' })}}
p.small {{$t('setting__sync_server_address', { address: sync.server.status.address.join(', ') || '' })}}
p.small {{$t('setting__sync_server_device', { devices: syncDevices })}}
p
base-btn.btn(min :disabled="!sync.server.status.status" @click="refreshSyncCode") {{$t('setting__sync_server_refresh_code')}}
p
p.small {{$t('setting__sync_server_port')}}
div
base-input.gap-left(:class="$style.portInput" :modelValue="appSetting['sync.server.port']" :disabled="sync.enable" type="number" @update:modelValue="setSyncServerPort" :placeholder="$t('setting__sync_server_port_tip')")
</template>
<script>
@@ -26,6 +45,7 @@ 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'
import { SYNC_CODE } from '@common/constants'
export default {
name: 'SettingSync',
@@ -33,19 +53,39 @@ export default {
const t = useI18n()
const syncEnableTitle = computed(() => {
let title = t('setting__sync_enable')
if (sync.status.message) {
title += ` [${sync.status.message}]`
const syncEnableServerTitle = computed(() => {
let title = t('setting__sync_server_mode')
if (sync.server.status.message) {
title += ` [${sync.server.status.message}]`
}
// else if (this.sync.status.address.length) {
// // title += ` [${this.sync.status.address.join(', ')}]`
// else if (this.sync.server.status.address.length) {
// // title += ` [${this.sync.server.status.address.join(', ')}]`
// }
return title
})
const clientStatus = computed(() => {
let status
switch (sync.client.status.message) {
case SYNC_CODE.msgBlockedIp:
status = t('setting__sync_code_blocked_ip')
break
case SYNC_CODE.authFailed:
status = t('setting__sync_code_fail')
break
default:
status = sync.client.status.message
? sync.client.status.message
: sync.client.status.status
? t('setting_sync_status_enabled')
: t('sync_status_disabled')
break
}
return status
})
const syncDevices = computed(() => {
return sync.status.devices.length
? sync.status.devices.map(d => `${d.deviceName} (${d.clientId.substring(0, 5)})`).join(', ')
return sync.server.status.devices.length
? sync.server.status.devices.map(d => `${d.deviceName} (${d.clientId.substring(0, 5)})`).join(', ')
: ''
})
@@ -53,8 +93,12 @@ export default {
sendSyncAction({ action: 'generate_code' })
}
const setSyncPort = debounce(port => {
updateSetting({ 'sync.port': port.trim() })
const setSyncServerPort = debounce(port => {
updateSetting({ 'sync.server.port': port.trim() })
}, 500)
const setSyncClientHost = debounce(host => {
updateSetting({ 'sync.client.host': host.trim() })
}, 500)
@@ -62,10 +106,12 @@ export default {
appSetting,
updateSetting,
sync,
syncEnableTitle,
setSyncPort,
syncEnableServerTitle,
setSyncServerPort,
setSyncClientHost,
syncDevices,
refreshSyncCode,
clientStatus,
openUrl,
}
},
@@ -76,4 +122,12 @@ export default {
.save-path {
font-size: 12px;
}
.portInput[disabled], .hostInput[disabled] {
opacity: .8 !important;
}
.hostInput {
min-width: 380px;
}
</style>