refactor(frontend): refactor components

2025-04-27 19:42:51 +02:00 · 2025-03-20 13:33:01 +09:00 · 2025-03-20 13:33:01 +09:00 · 3399c786a8
commit 3399c786a8
parent 64cf101fe7
6 changed files with 72 additions and 60 deletions
--- a/packages/frontend/src/components/MkPageWithAnimBg.vue
+++ b/packages/frontend/src/components/MkPageWithAnimBg.vue
@ -0,0 +1,21 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div>
+	<MkAnimBg style="position: absolute;"/>
+	<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import MkAnimBg from '@/components/MkAnimBg.vue';
+</script>
+
+<style lang="scss" module>
+
+</style>
--- a/packages/frontend/src/pages/install-extensions.vue
+++ b/packages/frontend/src/pages/install-extensions.vue
@ -4,46 +4,43 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div>
-	<MkAnimBg style="position: absolute;"/>
-	<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
-		<MkStickyContainer>
-			<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-			<MkSpacer :contentMax="550">
-				<MkLoading v-if="uiPhase === 'fetching'"/>
-				<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()">
-					<template #additionalInfo>
-						<FormSection>
-							<div class="_gaps_s">
-								<MkKeyValue>
-									<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
-									<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
-								</MkKeyValue>
-								<MkKeyValue>
-									<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
-									<template #value>
-										<!-- この画面が出ている時点でハッシュの検証には成功している -->
-										<i class="ti ti-check" style="color: var(--MI_THEME-accent)"></i>
-									</template>
-								</MkKeyValue>
-							</div>
-						</FormSection>
-					</template>
-				</MkExtensionInstaller>
-				<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
-					<div :class="$style.extInstallerIconWrapper">
-						<i class="ti ti-circle-x"></i>
-					</div>
-					<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
-					<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
-					<div class="_buttonsCenter">
-						<MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
-					</div>
+<MkPageWithAnimBg>
+	<MkStickyContainer>
+		<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+		<MkSpacer :contentMax="550">
+			<MkLoading v-if="uiPhase === 'fetching'"/>
+			<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()">
+				<template #additionalInfo>
+					<FormSection>
+						<div class="_gaps_s">
+							<MkKeyValue>
+								<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
+								<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
+							</MkKeyValue>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
+								<template #value>
+									<!-- この画面が出ている時点でハッシュの検証には成功している -->
+									<i class="ti ti-check" style="color: var(--MI_THEME-accent)"></i>
+								</template>
+							</MkKeyValue>
+						</div>
+					</FormSection>
+				</template>
+			</MkExtensionInstaller>
+			<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
+				<div :class="$style.extInstallerIconWrapper">
+					<i class="ti ti-circle-x"></i>
 				</div>
-			</MkSpacer>
-		</MkStickyContainer>
-	</div>
-</div>
+				<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
+				<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
+				<div class="_buttonsCenter">
+					<MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
+				</div>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
+</MkPageWithAnimBg>
 </template>

 <script lang="ts" setup>
@ -63,7 +60,7 @@ import { parseThemeCode, installTheme } from '@/theme.js';
 import { unisonReload } from '@/utility/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';

 const uiPhase = ref<'fetching' | 'confirm' | 'error'>('fetching');
 const errorKV = ref<{
--- a/packages/frontend/src/pages/miauth.vue
+++ b/packages/frontend/src/pages/miauth.vue
@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div>
-	<MkAnimBg style="position: fixed; top: 0;"/>
+<MkPageWithAnimBg>
 	<div :class="$style.formContainer">
 		<div :class="$style.form">
 			<MkAuthConfirm
@ -25,16 +24,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkAuthConfirm>
 		</div>
 	</div>
-</div>
+</MkPageWithAnimBg>
 </template>

 <script lang="ts" setup>
 import { computed, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
-
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 import MkAuthConfirm from '@/components/MkAuthConfirm.vue';
-
 import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { definePage } from '@/page.js';
--- a/packages/frontend/src/pages/oauth.vue
+++ b/packages/frontend/src/pages/oauth.vue
@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div>
-	<MkAnimBg style="position: fixed; top: 0;"/>
+<MkPageWithAnimBg>
 	<div :class="$style.formContainer">
 		<div :class="$style.form">
 			<MkAuthConfirm
@ -19,12 +18,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			/>
 		</div>
 	</div>
-</div>
+</MkPageWithAnimBg>
 </template>

 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 import { definePage } from '@/page.js';
 import MkAuthConfirm from '@/components/MkAuthConfirm.vue';

--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div>
-	<MkAnimBg style="position: fixed; top: 0;"/>
+<MkPageWithAnimBg>
 	<div :class="$style.formContainer">
 		<form :class="$style.form" class="_panel" @submit.prevent="submit()">
 			<div :class="$style.banner">
@ -21,13 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</form>
 	</div>
-</div>
+</MkPageWithAnimBg>
 </template>

 <script lang="ts" setup>
 import { ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@ -64,8 +63,8 @@ function submit() {
 	min-height: 100svh;
 	padding: 32px 32px 64px 32px;
 	box-sizing: border-box;
-display: grid;
-place-content: center;
+	display: grid;
+	place-content: center;
 }

 .form {
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<div>
-	<MkAnimBg style="position: fixed; top: 0;"/>
+<MkPageWithAnimBg>
 	<div :class="$style.formContainer">
 		<form :class="$style.form" class="_panel" @submit.prevent="submit()">
 			<div :class="$style.title">
@ -35,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</form>
 	</div>
-</div>
+</MkPageWithAnimBg>
 </template>

 <script lang="ts" setup>
@ -46,7 +45,7 @@ import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
 import { login } from '@/accounts.js';

 const username = ref('');