Skip to content

Commit 64522ac

Browse files
crazyrob425crazyrob425
authored
Merge pull request #3 from Blacklisted-Binary/copilot/integrate-multiple-libraries
Upgrade to Vue 3: migrate framework, router, store, and all component APIs
2 parents 5063932 + 9bd2bbc commit 64522ac

33 files changed

Lines changed: 576 additions & 554 deletions

‎.electron-vue/webpack.renderer.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ let rendererConfig = {
170170
alias: {
171171
'@': path.join(__dirname, '../src/renderer'),
172172
'@shared': path.join(__dirname, '../src/shared'),
173-
'vue$': 'vue/dist/vue.esm.js'
173+
'vue$': 'vue/dist/vue.esm-bundler.js'
174174
},
175175
extensions: ['.js', '.vue', '.json', '.css', '.node']
176176
},

‎package.json‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"@electron/remote": "^2.0.9",
5252
"@motrix/multispinner": "^0.2.4",
5353
"@motrix/nat-api": "^0.3.4",
54-
"@panter/vue-i18next": "^0.15.2",
54+
"i18next-vue": "^5.0.0",
5555
"@vue/eslint-config-standard": "^6.1.0",
5656
"ajv": "^8.12.0",
5757
"axios": "^1.4.0",
@@ -74,7 +74,8 @@
7474
"electron-log": "^4.4.8",
7575
"electron-store": "^8.1.0",
7676
"electron-updater": "^6.1.0",
77-
"element-ui": "^2.15.13",
77+
"element-plus": "^2.9.0",
78+
"@element-plus/icons-vue": "^2.3.0",
7879
"eslint": "^7.32.0",
7980
"eslint-friendly-formatter": "^4.0.1",
8081
"eslint-plugin-import": "^2.27.5",
@@ -95,15 +96,12 @@
9596
"sass-loader": "^12.6.0",
9697
"style-loader": "^3.3.2",
9798
"terser-webpack-plugin": "^5.3.8",
98-
"vue": "^2.7.14",
99-
"vue-electron": "^1.0.6",
100-
"vue-loader": "^15.10.1",
101-
"vue-router": "^3.6.5",
102-
"vue-selectable": "^0.5.0",
99+
"vue": "^3.5.13",
100+
"@vue/compiler-sfc": "^3.5.13",
101+
"vue-loader": "^17.4.2",
102+
"vue-router": "^4.6.4",
103103
"vue-style-loader": "^4.1.3",
104-
"vue-template-compiler": "^2.7.14",
105-
"vuex": "^3.6.2",
106-
"vuex-router-sync": "^5.0.0",
104+
"vuex": "^4.1.0",
107105
"webpack": "^5.82.1",
108106
"webpack-cli": "^5.1.1",
109107
"webpack-dev-server": "^4.15.0",

‎src/renderer/components/About/AboutPanel.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
<el-dialog
33
custom-class="app-about-dialog"
44
width="61.8vw"
5-
:visible="visible"
5+
v-model="dialogVisible"
66
@open="handleOpen"
77
:before-close="handleClose"
88
@closed="handleClosed">
99
<mo-app-info :version="version" :engine="engineInfo" />
10-
<mo-copyright slot="footer" />
10+
<template #footer>
11+
<mo-copyright />
12+
</template>
1113
</el-dialog>
1214
</template>
1315

@@ -36,6 +38,14 @@
3638
}
3739
},
3840
computed: {
41+
dialogVisible: {
42+
get () { return this.visible },
43+
set (val) {
44+
if (!val) {
45+
this.$store.dispatch('app/hideAboutPanel')
46+
}
47+
}
48+
},
3949
...mapState('app', {
4050
engineInfo: state => state.engineInfo
4151
})

‎src/renderer/components/Browser/index.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@
1010

1111
<script>
1212
import is from 'electron-is'
13+
import { ipcRenderer } from 'electron'
1314
import { webContents } from '@electron/remote'
14-
import { Loading } from 'element-ui'
15+
import { ElLoading } from 'element-plus'
1516
1617
export default {
1718
name: 'mo-browser',
@@ -41,7 +42,7 @@
4142
methods: {
4243
loadStart () {
4344
const { webviewViewport } = this.$refs
44-
this.loading = Loading.service({
45+
this.loading = ElLoading.service({
4546
target: webviewViewport
4647
})
4748
},
@@ -56,7 +57,7 @@
5657
const wc = webContents.fromId(iframe.getWebContentsId())
5758
wc.setWindowOpenHandler((event, url) => {
5859
event.preventDefault()
59-
this.$electron.ipcRenderer.send('command', 'application:open-external', url)
60+
ipcRenderer.send('command', 'application:open-external', url)
6061
})
6162
}
6263
}

‎src/renderer/components/Dragger/Index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
document.body.addEventListener('dragleave', this.onDragLeave)
4141
document.body.addEventListener('drop', this.onDrop)
4242
},
43-
destroyed () {
43+
unmounted () {
4444
document.removeEventListener('dragover', this.preventDefault)
4545
document.body.removeEventListener('dragenter', this.onDragEnter)
4646
document.body.removeEventListener('dragleave', this.onDragLeave)

‎src/renderer/components/Icons/Icon.vue‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -139,29 +139,9 @@
139139
}
140140
},
141141
mounted () {
142-
if (!this.name && this.$children.length === 0) {
142+
if (!this.name) {
143143
console.warn('Invalid prop: prop "name" is required.')
144-
return
145144
}
146-
147-
if (this.icon) {
148-
return
149-
}
150-
151-
let width = 0
152-
let height = 0
153-
this.$children.forEach((child) => {
154-
child.outerScale = this.normalizedScale
155-
156-
width = Math.max(width, child.width)
157-
height = Math.max(height, child.height)
158-
})
159-
this.childrenWidth = width
160-
this.childrenHeight = height
161-
this.$children.forEach((child) => {
162-
child.x = (width - child.width) / 2
163-
child.y = (height - child.height) / 2
164-
})
165145
},
166146
register (data) {
167147
for (const name in data) {

‎src/renderer/components/Msg/index.js‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,53 @@
1+
import { ElMessage } from 'element-plus'
2+
13
const queue = []
24
const maxLength = 5
35

4-
export default {
5-
install: function (Vue, Message, defaultOption = {}) {
6-
Vue.prototype.$msg = new Proxy(Message, {
7-
get (obj, prop) {
8-
return (arg) => {
9-
if (!(arg instanceof Object)) {
10-
arg = { message: arg }
11-
}
12-
const task = {
13-
run () {
14-
obj[prop]({
15-
...defaultOption,
16-
...arg,
17-
onClose (...data) {
18-
const currentTask = queue.pop()
19-
if (currentTask) {
20-
currentTask.run()
21-
}
22-
if (arg.onClose) {
23-
arg.onClose(...data)
24-
}
6+
const defaultOption = { showClose: true }
7+
8+
// ElMessage supports direct call as well as ElMessage.success/warning/error/info
9+
const msgProxy = new Proxy(ElMessage, {
10+
get (obj, prop) {
11+
// Support named methods: success, warning, error, info
12+
if (typeof obj[prop] === 'function') {
13+
return (arg) => {
14+
if (!(arg instanceof Object)) {
15+
arg = { message: arg }
16+
}
17+
const task = {
18+
run () {
19+
obj[prop]({
20+
...defaultOption,
21+
...arg,
22+
onClose (...data) {
23+
const currentTask = queue.pop()
24+
if (currentTask) {
25+
currentTask.run()
26+
}
27+
if (arg.onClose) {
28+
arg.onClose(...data)
2529
}
26-
})
27-
}
30+
}
31+
})
2832
}
33+
}
2934

30-
if (queue.length >= maxLength) {
31-
queue.pop()
32-
}
33-
queue.unshift(task)
35+
if (queue.length >= maxLength) {
36+
queue.pop()
37+
}
38+
queue.unshift(task)
3439

35-
if (queue.length === 1) {
36-
queue.pop().run()
37-
}
40+
if (queue.length === 1) {
41+
queue.pop().run()
3842
}
3943
}
40-
})
44+
}
45+
return obj[prop]
46+
}
47+
})
48+
49+
export default {
50+
install (app) {
51+
app.config.globalProperties.$msg = msgProxy
4152
}
4253
}

‎src/renderer/components/Native/EngineClient.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<script>
66
import is from 'electron-is'
7+
import { ipcRenderer } from 'electron'
78
import { mapState } from 'vuex'
89
import api from '@/api'
910
import {
@@ -42,18 +43,18 @@
4243
watch: {
4344
speed (val) {
4445
const { uploadSpeed, downloadSpeed } = this
45-
this.$electron.ipcRenderer.send('event', 'speed-change', {
46+
ipcRenderer.send('event', 'speed-change', {
4647
uploadSpeed,
4748
downloadSpeed
4849
})
4950
},
5051
downloading (val, oldVal) {
5152
if (val !== oldVal && this.isRenderer) {
52-
this.$electron.ipcRenderer.send('event', 'download-status-change', val)
53+
ipcRenderer.send('event', 'download-status-change', val)
5354
}
5455
},
5556
progress (val) {
56-
this.$electron.ipcRenderer.send('event', 'progress-change', val)
57+
ipcRenderer.send('event', 'progress-change', val)
5758
}
5859
},
5960
methods: {
@@ -153,7 +154,7 @@
153154
154155
const path = getTaskFullPath(task)
155156
this.showTaskCompleteNotify(task, isBT, path)
156-
this.$electron.ipcRenderer.send('event', 'task-download-complete', task, path)
157+
ipcRenderer.send('event', 'task-download-complete', task, path)
157158
},
158159
showTaskCompleteNotify (task, isBT, path) {
159160
const taskName = getTaskName(task)
@@ -250,7 +251,7 @@
250251
this.startPolling()
251252
}, 100)
252253
},
253-
destroyed () {
254+
unmounted () {
254255
this.$store.dispatch('task/saveSession')
255256
256257
this.unbindEngineEvents()

‎src/renderer/components/Native/Ipc.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,25 @@
33
</template>
44

55
<script>
6+
import { ipcRenderer } from 'electron'
67
import { commands } from '@/components/CommandManager/instance'
78
89
export default {
910
name: 'mo-ipc',
1011
methods: {
1112
bindIpcEvents () {
12-
this.$electron.ipcRenderer.on('command', (event, command, ...args) => {
13+
ipcRenderer.on('command', (event, command, ...args) => {
1314
commands.execute(command, ...args)
1415
})
1516
},
1617
unbindIpcEvents () {
17-
this.$electron.ipcRenderer.removeAllListeners('command')
18+
ipcRenderer.removeAllListeners('command')
1819
}
1920
},
2021
created () {
2122
this.bindIpcEvents()
2223
},
23-
destroyed () {
24+
unmounted () {
2425
this.unbindIpcEvents()
2526
}
2627
}

‎src/renderer/components/Preference/Advanced.vue‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -229,9 +229,7 @@
229229
v-model="form.rpcListenPort"
230230
@change="onRpcListenPortChange"
231231
>
232-
<i slot="append" @click.prevent="onRpcPortDiceClick">
233-
<mo-icon name="dice" width="12" height="12" />
234-
</i>
232+
<template #append><i @click.prevent="onRpcPortDiceClick"><mo-icon name="dice" width="12" height="12" /></i></template>
235233
</el-input>
236234
</el-col>
237235
</el-row>
@@ -250,9 +248,7 @@
250248
:maxlength="64"
251249
v-model="form.rpcSecret"
252250
>
253-
<i slot="append" @click.prevent="onRpcSecretDiceClick">
254-
<mo-icon name="dice" width="12" height="12" />
255-
</i>
251+
<template #append><i @click.prevent="onRpcSecretDiceClick"><mo-icon name="dice" width="12" height="12" /></i></template>
256252
</el-input>
257253
<div class="el-form-item__info" style="margin-top: 8px;">
258254
<a target="_blank" href="https://github.com/agalwood/Motrix/wiki/RPC" rel="noopener noreferrer">
@@ -295,9 +291,7 @@
295291
:maxlength="8"
296292
v-model="form.listenPort"
297293
>
298-
<i slot="append" @click.prevent="onBtPortDiceClick">
299-
<mo-icon name="dice" width="12" height="12" />
300-
</i>
294+
<template #append><i @click.prevent="onBtPortDiceClick"><mo-icon name="dice" width="12" height="12" /></i></template>
301295
</el-input>
302296
</el-col>
303297
</el-row>
@@ -315,9 +309,7 @@
315309
:maxlength="8"
316310
v-model="form.dhtListenPort"
317311
>
318-
<i slot="append" @click.prevent="onDhtPortDiceClick">
319-
<mo-icon name="dice" width="12" height="12" />
320-
</i>
312+
<template #append><i @click.prevent="onDhtPortDiceClick"><mo-icon name="dice" width="12" height="12" /></i></template>
321313
</el-input>
322314
</el-col>
323315
</el-row>
@@ -372,33 +364,27 @@
372364
<el-col class="form-item-sub" :span="24">
373365
{{ $t('preferences.aria2-conf-path') }}
374366
<el-input placeholder="" disabled v-model="aria2ConfPath">
375-
<mo-show-in-folder
376-
slot="append"
377-
v-if="isRenderer"
367+
<template #append><mo-show-in-folder v-if="isRenderer"
378368
:path="aria2ConfPath"
379-
/>
369+
/></template>
380370
</el-input>
381371
</el-col>
382372
<el-col class="form-item-sub" :span="24">
383373
{{ $t('preferences.download-session-path') }}
384374
<el-input placeholder="" disabled v-model="sessionPath">
385-
<mo-show-in-folder
386-
slot="append"
387-
v-if="isRenderer"
375+
<template #append><mo-show-in-folder v-if="isRenderer"
388376
:path="sessionPath"
389-
/>
377+
/></template>
390378
</el-input>
391379
</el-col>
392380
<el-col class="form-item-sub" :span="24">
393381
{{ $t('preferences.app-log-path') }}
394382
<el-row :gutter="16">
395383
<el-col :span="18">
396384
<el-input placeholder="" disabled v-model="logPath">
397-
<mo-show-in-folder
398-
slot="append"
399-
v-if="isRenderer"
385+
<template #append><mo-show-in-folder v-if="isRenderer"
400386
:path="logPath"
401-
/>
387+
/></template>
402388
</el-input>
403389
</el-col>
404390
<el-col :span="6">

0 commit comments

Comments
 (0)