refactor(client): refactor settings/plugin/install to use Composition API (#8591)

packages/client/src/pages/settings/plugin.install.vue

@@ -1,19 +1,19 @@
 <template>
 <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">
-		<template #label>{{ $ts.code }}</template>
+		<template #label>{{ i18n.ts.code }}</template>
 	</FormTextarea>
 
 	<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>
 </template>
 
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { defineExpose, defineAsyncComponent, nextTick, ref } from 'vue';
 import { AiScript, parse } from '@syuilo/aiscript';
 import { serialize } from '@syuilo/aiscript/built/serializer';
 import { v4 as uuid } from 'uuid';
@@ -23,30 +23,12 @@ import FormInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
 import * as symbols from '@/symbols';
 
-export default defineComponent({
-	components: {
-		FormTextarea,
-		FormButton,
-		FormInfo,
-	},
+const code = ref(null);
 
-	emits: ['info'],
-
-	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 }) {
+function installPlugin({ id, meta, ast, token }) {
 	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
 		...meta,
 		id,
@@ -55,12 +37,12 @@ export default defineComponent({
 		token: token,
 		ast: ast
 	}));
-		},
+}
 
-		async install() {
+async function install() {
 	let ast;
 	try {
-				ast = parse(this.code);
+		ast = parse(code.value);
 	} catch (e) {
 		os.alert({
 			type: 'error',
@@ -68,6 +50,7 @@ export default defineComponent({
 		});
 		return;
 	}
+
 	const meta = AiScript.collectMetadata(ast);
 	if (meta == null) {
 		os.alert({
@@ -76,6 +59,7 @@ export default defineComponent({
 		});
 		return;
 	}
+
 	const data = meta.get(null);
 	if (data == null) {
 		os.alert({
@@ -84,6 +68,7 @@ export default defineComponent({
 		});
 		return;
 	}
+
 	const { name, version, author, description, permissions, config } = data;
 	if (name == null || version == null || author == null) {
 		os.alert({
@@ -94,9 +79,9 @@ export default defineComponent({
 	}
 
 	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-				os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {
-					title: this.$ts.tokenRequested,
-					information: this.$ts.pluginTokenRequestedDescription,
+		os.popup(import('@/components/token-generate-window.vue'), {
+			title: i18n.ts.tokenRequested,
+			information: i18n.ts.pluginTokenRequestedDescription,
 			initialName: name,
 			initialPermissions: permissions
 		}, {
@@ -113,7 +98,7 @@ export default defineComponent({
 		}, 'closed');
 	});
 
-			this.installPlugin({
+	installPlugin({
 		id: uuid(),
 		meta: {
 			name, version, author, description, permissions, config
@@ -124,10 +109,35 @@ export default defineComponent({
 
 	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();
 	});
-		},
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.ts._plugin.install,
+		icon: 'fas fa-download',
+		bg: 'var(--bg)',
 	}
 });
 </script>