refactor(client): refactor settings/plugin/install to use Composition API (#8591)
This commit is contained in:
		| @@ -1,19 +1,19 @@ | |||||||
| <template> | <template> | ||||||
| <div class="_formRoot"> | <div class="_formRoot"> | ||||||
| 	<FormInfo warn class="_formBlock">{{ $ts._plugin.installWarn }}</FormInfo> | 	<FormInfo warn class="_formBlock">{{ i18n.ts._plugin.installWarn }}</FormInfo> | ||||||
|  |  | ||||||
| 	<FormTextarea v-model="code" tall class="_formBlock"> | 	<FormTextarea v-model="code" tall class="_formBlock"> | ||||||
| 		<template #label>{{ $ts.code }}</template> | 		<template #label>{{ i18n.ts.code }}</template> | ||||||
| 	</FormTextarea> | 	</FormTextarea> | ||||||
|  |  | ||||||
| 	<div class="_formBlock"> | 	<div class="_formBlock"> | ||||||
| 		<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton> | 		<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ i18n.ts.install }}</FormButton> | ||||||
| 	</div> | 	</div> | ||||||
| </div> | </div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script lang="ts"> | <script lang="ts" setup> | ||||||
| import { defineAsyncComponent, defineComponent } from 'vue'; | import { defineExpose, defineAsyncComponent, nextTick, ref } from 'vue'; | ||||||
| import { AiScript, parse } from '@syuilo/aiscript'; | import { AiScript, parse } from '@syuilo/aiscript'; | ||||||
| import { serialize } from '@syuilo/aiscript/built/serializer'; | import { serialize } from '@syuilo/aiscript/built/serializer'; | ||||||
| import { v4 as uuid } from 'uuid'; | import { v4 as uuid } from 'uuid'; | ||||||
| @@ -23,30 +23,12 @@ import FormInfo from '@/components/ui/info.vue'; | |||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
| import { ColdDeviceStorage } from '@/store'; | import { ColdDeviceStorage } from '@/store'; | ||||||
| import { unisonReload } from '@/scripts/unison-reload'; | import { unisonReload } from '@/scripts/unison-reload'; | ||||||
|  | import { i18n } from '@/i18n'; | ||||||
| import * as symbols from '@/symbols'; | import * as symbols from '@/symbols'; | ||||||
|  |  | ||||||
| export default defineComponent({ | const code = ref(null); | ||||||
| 	components: { |  | ||||||
| 		FormTextarea, |  | ||||||
| 		FormButton, |  | ||||||
| 		FormInfo, |  | ||||||
| 	}, |  | ||||||
|  |  | ||||||
| 	emits: ['info'], | function installPlugin({ id, meta, ast, token }) { | ||||||
|  |  | ||||||
| 	data() { |  | ||||||
| 		return { |  | ||||||
| 			[symbols.PAGE_INFO]: { |  | ||||||
| 				title: this.$ts._plugin.install, |  | ||||||
| 				icon: 'fas fa-download', |  | ||||||
| 				bg: 'var(--bg)', |  | ||||||
| 			}, |  | ||||||
| 			code: null, |  | ||||||
| 		} |  | ||||||
| 	}, |  | ||||||
|  |  | ||||||
| 	methods: { |  | ||||||
| 		installPlugin({ id, meta, ast, token }) { |  | ||||||
| 	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({ | 	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({ | ||||||
| 		...meta, | 		...meta, | ||||||
| 		id, | 		id, | ||||||
| @@ -55,12 +37,12 @@ export default defineComponent({ | |||||||
| 		token: token, | 		token: token, | ||||||
| 		ast: ast | 		ast: ast | ||||||
| 	})); | 	})); | ||||||
| 		}, | } | ||||||
|  |  | ||||||
| 		async install() { | async function install() { | ||||||
| 	let ast; | 	let ast; | ||||||
| 	try { | 	try { | ||||||
| 				ast = parse(this.code); | 		ast = parse(code.value); | ||||||
| 	} catch (e) { | 	} catch (e) { | ||||||
| 		os.alert({ | 		os.alert({ | ||||||
| 			type: 'error', | 			type: 'error', | ||||||
| @@ -68,6 +50,7 @@ export default defineComponent({ | |||||||
| 		}); | 		}); | ||||||
| 		return; | 		return; | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| 	const meta = AiScript.collectMetadata(ast); | 	const meta = AiScript.collectMetadata(ast); | ||||||
| 	if (meta == null) { | 	if (meta == null) { | ||||||
| 		os.alert({ | 		os.alert({ | ||||||
| @@ -76,6 +59,7 @@ export default defineComponent({ | |||||||
| 		}); | 		}); | ||||||
| 		return; | 		return; | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| 	const data = meta.get(null); | 	const data = meta.get(null); | ||||||
| 	if (data == null) { | 	if (data == null) { | ||||||
| 		os.alert({ | 		os.alert({ | ||||||
| @@ -84,6 +68,7 @@ export default defineComponent({ | |||||||
| 		}); | 		}); | ||||||
| 		return; | 		return; | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| 	const { name, version, author, description, permissions, config } = data; | 	const { name, version, author, description, permissions, config } = data; | ||||||
| 	if (name == null || version == null || author == null) { | 	if (name == null || version == null || author == null) { | ||||||
| 		os.alert({ | 		os.alert({ | ||||||
| @@ -94,9 +79,9 @@ export default defineComponent({ | |||||||
| 	} | 	} | ||||||
|  |  | ||||||
| 	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => { | 	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => { | ||||||
| 				os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), { | 		os.popup(import('@/components/token-generate-window.vue'), { | ||||||
| 					title: this.$ts.tokenRequested, | 			title: i18n.ts.tokenRequested, | ||||||
| 					information: this.$ts.pluginTokenRequestedDescription, | 			information: i18n.ts.pluginTokenRequestedDescription, | ||||||
| 			initialName: name, | 			initialName: name, | ||||||
| 			initialPermissions: permissions | 			initialPermissions: permissions | ||||||
| 		}, { | 		}, { | ||||||
| @@ -113,7 +98,7 @@ export default defineComponent({ | |||||||
| 		}, 'closed'); | 		}, 'closed'); | ||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
| 			this.installPlugin({ | 	installPlugin({ | ||||||
| 		id: uuid(), | 		id: uuid(), | ||||||
| 		meta: { | 		meta: { | ||||||
| 			name, version, author, description, permissions, config | 			name, version, author, description, permissions, config | ||||||
| @@ -124,10 +109,35 @@ export default defineComponent({ | |||||||
|  |  | ||||||
| 	os.success(); | 	os.success(); | ||||||
|  |  | ||||||
| 			this.$nextTick(() => { | 	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => { | ||||||
|  | 		os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), { | ||||||
|  | 			title: i18n.ts.tokenRequested, | ||||||
|  | 			information: i18n.ts.pluginTokenRequestedDescription, | ||||||
|  | 			initialName: name, | ||||||
|  | 			initialPermissions: permissions | ||||||
|  | 		}, { | ||||||
|  | 			done: async result => { | ||||||
|  | 				const { name, permissions } = result; | ||||||
|  | 				const { token } = await os.api('miauth/gen-token', { | ||||||
|  | 					session: null, | ||||||
|  | 					name: name, | ||||||
|  | 					permission: permissions, | ||||||
|  | 				}); | ||||||
|  | 				res(token); | ||||||
|  | 			} | ||||||
|  | 		}, 'closed'); | ||||||
|  | 	}); | ||||||
|  |  | ||||||
|  | 	nextTick(() => { | ||||||
| 		unisonReload(); | 		unisonReload(); | ||||||
| 	}); | 	}); | ||||||
| 		}, | } | ||||||
|  |  | ||||||
|  | defineExpose({ | ||||||
|  | 	[symbols.PAGE_INFO]: { | ||||||
|  | 		title: i18n.ts._plugin.install, | ||||||
|  | 		icon: 'fas fa-download', | ||||||
|  | 		bg: 'var(--bg)', | ||||||
| 	} | 	} | ||||||
| }); | }); | ||||||
| </script> | </script> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 Andreas Nedbal
					Andreas Nedbal