feat: 嵌入 StarLight 皮肤站并同步登录状态

apps/app-frontend/src/pages/StarlightSkin.vue

@@ -1,41 +1,9 @@
-
 <script setup lang="ts">
-import { defineMessages, useVIntl } from '@modrinth/ui'
-import { ref } from 'vue'
-
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	title: {
-		id: 'app.starlight-skin.title',
-		defaultMessage: '斯达莱特',
-	},
-	frameTitle: {
-		id: 'app.starlight-skin.frame-title',
-		defaultMessage: 'StarLight Skin Site',
-	},
-})
-
-const SKIN_SITE_URL = 'https://skin.starlight.cool/'
-
-const loading = ref(true)
-
-function onLoad() {
-	loading.value = false
-}
+import SkinSiteFrame from '@/components/ui/SkinSiteFrame.vue'
 </script>
 
 <template>
-	<div class="flex h-full min-h-0 flex-col">
-		<div v-if="loading" class="flex flex-1 items-center justify-center">
-			<span class="text-secondary">{{ formatMessage(messages.title) }}…</span>
-		</div>
-		<iframe
-			:src="SKIN_SITE_URL"
-			:title="formatMessage(messages.frameTitle)"
-			class="h-full min-h-0 w-full flex-1 border-0"
-			:class="loading ? 'hidden' : ''"
-			@load="onLoad"
-		/>
+	<div class="h-full min-h-0">
+		<SkinSiteFrame />
 	</div>
 </template>