wip

packages/client/src/pages/admin/index.vue

@@ -19,7 +19,16 @@
 	<div class="main">
 		<MkStickyContainer>
 			<template #header><MkHeader v-if="childInfo && !childInfo.hideHeader" :info="childInfo"/></template>
+			<suspense>
+				<template #default>
 					<component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/>
+				</template>
+				<template #fallback>
+					<div>
+						Loading...
+					</div>
+				</template>
+			</suspense>
 		</MkStickyContainer>
 	</div>
 </div>

packages/client/src/pages/admin/settings.vue

@@ -1,6 +1,5 @@
 <template>
 <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<FormSuspense :p="init">
 	<div class="_formRoot">
 		<FormInput v-model="name" class="_formBlock">
 			<template #label>{{ $ts.instanceName }}</template>
@@ -134,135 +133,91 @@
 			</FormSwitch>
 		</FormSection>
 	</div>
-	</FormSuspense>
 </MkSpacer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormInfo from '@/components/ui/info.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSplit from '@/components/form/split.vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		FormSwitch,
-		FormInput,
-		FormSuspense,
-		FormTextarea,
-		FormInfo,
-		FormSection,
-		FormSplit,
-	},
-
-	emits: ['info'],
-
-	data() {
-		return {
+defineExpose({
 	[symbols.PAGE_INFO]: {
-				title: this.$ts.general,
+		title: i18n.ts.general,
 		icon: 'fas fa-cog',
 		bg: 'var(--bg)',
 		actions: [{
 			asFullButton: true,
 			icon: 'fas fa-check',
-					text: this.$ts.save,
-					handler: this.save,
+			text: i18n.ts.save,
+			handler: save,
 		}],
 	},
-			name: null,
-			description: null,
-			tosUrl: null as string | null,
-			maintainerName: null,
-			maintainerEmail: null,
-			iconUrl: null,
-			bannerUrl: null,
-			backgroundImageUrl: null,
-			themeColor: null,
-			maxNoteTextLength: 0,
-			enableLocalTimeline: false,
-			enableGlobalTimeline: false,
-			pinnedUsers: '',
-			cacheRemoteFiles: false,
-			proxyRemoteFiles: false,
-			localDriveCapacityMb: 0,
-			remoteDriveCapacityMb: 0,
-			enableRegistration: false,
-			emailRequiredForSignup: false,
-			enableServiceWorker: false,
-			swPublicKey: null,
-			swPrivateKey: null,
-			deeplAuthKey: '',
-			deeplIsPro: false,
-		}
-	},
-
-	methods: {
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.name = meta.name;
-			this.description = meta.description;
-			this.tosUrl = meta.tosUrl;
-			this.iconUrl = meta.iconUrl;
-			this.bannerUrl = meta.bannerUrl;
-			this.backgroundImageUrl = meta.backgroundImageUrl;
-			this.themeColor = meta.themeColor;
-			this.maintainerName = meta.maintainerName;
-			this.maintainerEmail = meta.maintainerEmail;
-			this.maxNoteTextLength = meta.maxNoteTextLength;
-			this.enableLocalTimeline = !meta.disableLocalTimeline;
-			this.enableGlobalTimeline = !meta.disableGlobalTimeline;
-			this.pinnedUsers = meta.pinnedUsers.join('\n');
-			this.cacheRemoteFiles = meta.cacheRemoteFiles;
-			this.proxyRemoteFiles = meta.proxyRemoteFiles;
-			this.localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
-			this.remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
-			this.enableRegistration = !meta.disableRegistration;
-			this.emailRequiredForSignup = meta.emailRequiredForSignup;
-			this.enableServiceWorker = meta.enableServiceWorker;
-			this.swPublicKey = meta.swPublickey;
-			this.swPrivateKey = meta.swPrivateKey;
-			this.deeplAuthKey = meta.deeplAuthKey;
-			this.deeplIsPro = meta.deeplIsPro;
-		},
-
-		save() {
-			os.apiWithDialog('admin/update-meta', {
-				name: this.name,
-				description: this.description,
-				tosUrl: this.tosUrl,
-				iconUrl: this.iconUrl,
-				bannerUrl: this.bannerUrl,
-				backgroundImageUrl: this.backgroundImageUrl,
-				themeColor: this.themeColor === '' ? null : this.themeColor,
-				maintainerName: this.maintainerName,
-				maintainerEmail: this.maintainerEmail,
-				maxNoteTextLength: this.maxNoteTextLength,
-				disableLocalTimeline: !this.enableLocalTimeline,
-				disableGlobalTimeline: !this.enableGlobalTimeline,
-				pinnedUsers: this.pinnedUsers.split('\n'),
-				cacheRemoteFiles: this.cacheRemoteFiles,
-				proxyRemoteFiles: this.proxyRemoteFiles,
-				localDriveCapacityMb: parseInt(this.localDriveCapacityMb, 10),
-				remoteDriveCapacityMb: parseInt(this.remoteDriveCapacityMb, 10),
-				disableRegistration: !this.enableRegistration,
-				emailRequiredForSignup: this.emailRequiredForSignup,
-				enableServiceWorker: this.enableServiceWorker,
-				swPublicKey: this.swPublicKey,
-				swPrivateKey: this.swPrivateKey,
-				deeplAuthKey: this.deeplAuthKey,
-				deeplIsPro: this.deeplIsPro,
-			}).then(() => {
-				fetchInstance();
-			});
-		}
-	}
 });
+
+const meta = await os.api('meta', { detail: true });
+
+let name = $ref(meta.name);
+let description = $ref(meta.description);
+let tosUrl = $ref(meta.tosUrl);
+let iconUrl = $ref(meta.iconUrl);
+let bannerUrl = $ref(meta.bannerUrl);
+let backgroundImageUrl = $ref(meta.backgroundImageUrl);
+let themeColor = $ref(meta.themeColor);
+let maintainerName = $ref(meta.maintainerName);
+let maintainerEmail = $ref(meta.maintainerEmail);
+let maxNoteTextLength = $ref(meta.maxNoteTextLength);
+let enableLocalTimeline = $ref(!meta.disableLocalTimeline);
+let enableGlobalTimeline = $ref(!meta.disableGlobalTimeline);
+let pinnedUsers = $ref(meta.pinnedUsers.join('\n'));
+let cacheRemoteFiles = $ref(meta.cacheRemoteFiles);
+let proxyRemoteFiles = $ref(meta.proxyRemoteFiles);
+let localDriveCapacityMb = $ref(meta.driveCapacityPerLocalUserMb);
+let remoteDriveCapacityMb = $ref(meta.driveCapacityPerRemoteUserMb);
+let enableRegistration = $ref(!meta.disableRegistration);
+let emailRequiredForSignup = $ref(meta.emailRequiredForSignup);
+let enableServiceWorker = $ref(meta.enableServiceWorker);
+let swPublicKey = $ref(meta.swPublickey);
+let swPrivateKey = $ref(meta.swPrivateKey);
+let deeplAuthKey = $ref(meta.deeplAuthKey);
+let deeplIsPro = $ref(meta.deeplIsPro);
+
+async function save() {
+	await os.apiWithDialog('admin/update-meta', {
+		name: name,
+		description: description,
+		tosUrl: tosUrl,
+		iconUrl: iconUrl,
+		bannerUrl: bannerUrl,
+		backgroundImageUrl: backgroundImageUrl,
+		themeColor: themeColor === '' ? null : themeColor,
+		maintainerName: maintainerName,
+		maintainerEmail: maintainerEmail,
+		maxNoteTextLength: maxNoteTextLength,
+		disableLocalTimeline: !enableLocalTimeline,
+		disableGlobalTimeline: !enableGlobalTimeline,
+		pinnedUsers: pinnedUsers.split('\n'),
+		cacheRemoteFiles: cacheRemoteFiles,
+		proxyRemoteFiles: proxyRemoteFiles,
+		localDriveCapacityMb: parseInt(localDriveCapacityMb, 10),
+		remoteDriveCapacityMb: parseInt(remoteDriveCapacityMb, 10),
+		disableRegistration: !enableRegistration,
+		emailRequiredForSignup: emailRequiredForSignup,
+		enableServiceWorker: enableServiceWorker,
+		swPublicKey: swPublicKey,
+		swPrivateKey: swPrivateKey,
+		deeplAuthKey: deeplAuthKey,
+		deeplIsPro: deeplIsPro,
+	});
+
+	fetchInstance();
+}
 </script>