feat：侧边栏加了皮肤站标签，可在启动内直接打开皮肤站

apps/app-frontend/src/App.vue

@@ -3,6 +3,7 @@ import { AuthFeature, TauriModrinthClient, VerboseLoggingFeature } from '@modrin
 import {
 	ChangeSkinIcon,
 	CompassIcon,
+	GlobeIcon,
 	DownloadIcon,
 	ExternalIcon,
 	FlaskConicalIcon,
@@ -735,6 +736,10 @@ const messages = defineMessages({
 		id: 'app.navigation.skin-selector',
 		defaultMessage: 'Skin selector',
 	},
+	starlightSkin: {
+		id: 'app.navigation.starlight-skin',
+		defaultMessage: '斯达莱特',
+	},
 	library: {
 		id: 'app.navigation.library',
 		defaultMessage: 'Library',
@@ -2314,6 +2319,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				>
 					<ChangeSkinIcon />
 				</NavButton>
+				<NavButton
+					v-tooltip.right="formatMessage(messages.starlightSkin)"
+					data-onboarding-id="nav-starlight-skin"
+					to="/starlight-skin"
+				>
+					<GlobeIcon />
+				</NavButton>
 				<NavButton
 					v-tooltip.right="formatMessage(messages.library)"
 					data-onboarding-id="nav-library"

apps/app-frontend/src/data/about/contributors.json

@@ -147,7 +147,7 @@
 		"name": "xinvxueyuan",
 		"avatarUrl": "https://avatars.githubusercontent.com/u/149921651?v=4&s=96",
 		"url": "https://github.com/xinvxueyuan",
-		"contributions": 42
+		"contributions": 43
 	},
 	{
 		"name": "piprett",

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

@@ -0,0 +1,41 @@
+
+<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
+}
+</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>
+</template>

apps/app-frontend/src/routes.js

@@ -93,6 +93,14 @@ export default new createRouter({
 				discordActivity: 'Changing skins...',
 			},
 		},
+		{
+			path: '/starlight-skin',
+			name: 'Starlight skin',
+			component: () => import('@/pages/StarlightSkin.vue'),
+			meta: {
+				breadcrumb: [{ name: 'Starlight skin' }],
+			},
+		},
 		{
 			path: '/multiplayer',
 			name: 'Multiplayer',