docs: 1.0.2-beta4 公告并入盔甲预览

beta4 此前未打 tag，本次发布将其与皮肤编辑器盔甲预览
移植（PR #8）合并发布，故在 beta4 公告条目补充：
- 皮肤预览新增盔甲与盔甲纹饰渲染
- 盔甲预览选择的本地持久化

.github/workflows/check-rust.yml

@@ -22,5 +22,5 @@ jobs:
           node-version-file: .nvmrc
       - uses: dtolnay/rust-toolchain@29eef336d9b2848a0b548edc03f92a220660cdb8 # stable
       - uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
-      - run: cargo binstall --no-confirm cargo-shear
+      - run: cargo binstall --no-confirm cargo-shear@1.13.4
       - run: cargo shear

apps/app-frontend/src/announcements/catalog.ts

@@ -41,6 +41,16 @@ export const launcherAnnouncements: readonly LauncherAnnouncement[] = [
 			'zh-CN': 'Starlight Launcher 1.0.2-beta4',
 		},
 		changes: {
+			added: [
+				{
+					'en-US': 'Added armor and armor-trim rendering to the skin preview, letting you try on armor pieces and trim patterns directly in the skin editor.',
+					'zh-CN': '皮肤预览新增盔甲与盔甲纹饰渲染，可在皮肤编辑器内直接试穿各部位盔甲并调整纹饰图案。',
+				},
+				{
+					'en-US': 'Armor preview selections in the skin editor are now saved locally, so they persist across sessions.',
+					'zh-CN': '皮肤编辑器中的盔甲预览选择现在会保存在本地，跨会话保留。',
+				},
+			],
 			changed: [
 				{
 					'en-US': 'Improved download scheduling to reduce concurrency automatically when tasks are waiting for capacity, making large Minecraft installations more reliable on constrained connections.',

apps/app-frontend/src/components/ui/skin/ArmorTrimTab.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { CheckIcon, RotateCounterClockwiseIcon, XIcon } from '@modrinth/assets'
+import {
+	type ArmorPreviewConfig,
+	ArmorTrimPanel,
+	Button,
+	defineMessages,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, onMounted, onUnmounted } from 'vue'
+
+const messages = defineMessages({
+	title: { id: 'app.skins.armor.title', defaultMessage: 'Armour and trims' },
+	description: {
+		id: 'app.skins.armor.description',
+		defaultMessage: 'Try armour and trims on your skin. Nothing is stored until you save it.',
+	},
+	unsaved: { id: 'app.skins.armor.unsaved', defaultMessage: 'Unsaved changes' },
+	resetToSaved: { id: 'app.skins.armor.reset-to-saved', defaultMessage: 'Reset to saved' },
+	restoreDefaults: {
+		id: 'app.skins.armor.restore-defaults',
+		defaultMessage: 'Restore defaults',
+	},
+	save: { id: 'app.skins.armor.save', defaultMessage: 'Save' },
+	close: { id: 'app.skins.armor.close', defaultMessage: 'Close' },
+})
+
+const draft = defineModel<ArmorPreviewConfig>({ required: true })
+const props = defineProps<{
+	saved: ArmorPreviewConfig
+	/** Stable id shared with the toggle so it can point `aria-controls` here. */
+	panelId: string
+}>()
+const emit = defineEmits<{
+	save: []
+	reset: []
+	defaults: []
+	close: []
+}>()
+
+const { formatMessage } = useVIntl()
+
+/**
+ * The tab is mounted only while it is showing, so this listens exactly for that
+ * window. It listens in the capture phase because the app's own global
+ * shortcuts listen on `window` the same way, and a bubble-phase listener here
+ * would be skipped as soon as anything closer stopped the event. A modal on top
+ * of the page owns Escape while it is up, and focus sits inside it, so the key
+ * is left to it.
+ */
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key !== 'Escape') return
+	if (
+		event.target instanceof Element &&
+		event.target.closest('[role="dialog"], [role="alertdialog"], [aria-modal="true"]')
+	) {
+		return
+	}
+
+	emit('close')
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown, true))
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown, true))
+
+const isDirty = computed(() =>
+	Object.entries(draft.value).some(([slot, piece]) => {
+		const applied = props.saved[slot as keyof ArmorPreviewConfig]
+		return (
+			!applied ||
+			applied.material !== piece.material ||
+			applied.trimPattern !== piece.trimPattern ||
+			applied.trimMaterial !== piece.trimMaterial
+		)
+	}),
+)
+</script>
+
+<template>
+	<div
+		:id="panelId"
+		role="region"
+		:aria-label="formatMessage(messages.title)"
+		class="flex min-h-[24rem] flex-col gap-4 rounded-2xl border border-solid border-surface-5 bg-surface-2 p-4"
+	>
+		<header class="flex flex-wrap items-start justify-between gap-3">
+			<div class="min-w-0">
+				<h2 class="m-0 text-lg font-bold text-[var(--color-text-primary)]">
+					{{ formatMessage(messages.title) }}
+				</h2>
+				<p class="m-0 mt-1 text-sm leading-6 text-[var(--color-text-tertiary)]">
+					{{ formatMessage(messages.description) }}
+				</p>
+			</div>
+			<div class="flex shrink-0 flex-wrap items-center gap-2">
+				<span v-if="isDirty" class="text-sm font-semibold text-[var(--color-text-tertiary)]">
+					{{ formatMessage(messages.unsaved) }}
+				</span>
+				<Button type="outlined" @click="emit('close')"
+					><XIcon />{{ formatMessage(messages.close) }}</Button
+				>
+			</div>
+		</header>
+
+		<ArmorTrimPanel v-model="draft" />
+
+		<footer
+			class="mt-auto flex flex-wrap items-center justify-between gap-2 border-0 border-t border-solid border-surface-5 pt-3"
+		>
+			<div class="flex flex-wrap items-center gap-2">
+				<Button type="outlined" :disabled="!isDirty" @click="emit('reset')"
+					><RotateCounterClockwiseIcon />{{ formatMessage(messages.resetToSaved) }}</Button
+				>
+				<Button type="outlined" @click="emit('defaults')">{{
+					formatMessage(messages.restoreDefaults)
+				}}</Button>
+			</div>
+			<Button type="colored" color="brand" :disabled="!isDirty" @click="emit('save')"
+				><CheckIcon />{{ formatMessage(messages.save) }}</Button
+			>
+		</footer>
+	</div>
+</template>

apps/app-frontend/src/components/ui/skin/SkinListSkeleton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const { sections = 2, cards = 12 } = defineProps<{
+	sections?: number
+	cards?: number
+}>()
+</script>
+
+<template>
+	<!--
+		Shaped after VirtualSkinSectionList: the same grid breakpoints and card
+		ratio, so the swap to real content does not move anything. Decorative, so
+		it stays out of the accessibility tree.
+	-->
+	<div class="flex flex-col gap-8" aria-hidden="true">
+		<div v-for="section in sections" :key="section" class="flex flex-col gap-4">
+			<div class="h-7 w-44 animate-pulse rounded-lg bg-surface-4" />
+			<div
+				class="grid w-full grid-cols-3 gap-3 min-[1300px]:grid-cols-4 min-[1750px]:grid-cols-5 min-[2050px]:grid-cols-6"
+			>
+				<div
+					v-for="card in cards"
+					:key="card"
+					class="aspect-[31/40] w-full animate-pulse rounded-[20px] bg-surface-4"
+				/>
+			</div>
+		</div>
+	</div>
+</template>

apps/app-frontend/src/helpers/skin-armor-preview.test.ts

@@ -0,0 +1,60 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { loadSkinArmorPreview, saveSkinArmorPreview } from './skin-armor-preview.ts'
+
+const originalStorage = Object.getOwnPropertyDescriptor(globalThis, 'localStorage')
+
+function withStorage(run: (values: Map<string, string>) => void): void {
+	const values = new Map<string, string>()
+	Object.defineProperty(globalThis, 'localStorage', {
+		configurable: true,
+		value: {
+			getItem: (key: string) => values.get(key) ?? null,
+			setItem: (key: string, value: string) => values.set(key, value),
+		},
+	})
+	try {
+		run(values)
+	} finally {
+		if (originalStorage) Object.defineProperty(globalThis, 'localStorage', originalStorage)
+		else delete (globalThis as { localStorage?: Storage }).localStorage
+	}
+}
+
+test('armor preview selections survive storage round trips', () => {
+	withStorage(() => {
+		const config = loadSkinArmorPreview()
+		config.helmet.material = 'diamond'
+		config.helmet.trimPattern = 'sentry'
+		config.helmet.trimMaterial = 'gold'
+		saveSkinArmorPreview(config)
+
+		assert.deepEqual(loadSkinArmorPreview(), config)
+	})
+})
+
+test('invalid stored armor values fall back per slot and field', () => {
+	withStorage((values) => {
+		values.set(
+			'axolotl:skin-armor-preview',
+			JSON.stringify({
+				helmet: { material: 'diamond', trimPattern: 'invalid', trimMaterial: 'gold' },
+				boots: { material: 'turtle', trimPattern: 'sentry', trimMaterial: 'invalid' },
+			}),
+		)
+
+		const config = loadSkinArmorPreview()
+		assert.deepEqual(config.helmet, {
+			material: 'diamond',
+			trimPattern: null,
+			trimMaterial: 'gold',
+		})
+		assert.deepEqual(config.boots, {
+			material: null,
+			trimPattern: 'sentry',
+			trimMaterial: 'iron',
+		})
+		assert.equal(config.chestplate.material, null)
+	})
+})

apps/app-frontend/src/helpers/skin-armor-preview.ts

@@ -0,0 +1,47 @@
+import {
+	ARMOR_SLOTS,
+	ARMOR_TRIM_MATERIALS,
+	ARMOR_TRIM_PATTERNS,
+	armorMaterialsForSlot,
+	type ArmorPreviewConfig,
+	createDefaultArmorPreviewConfig,
+} from '@modrinth/ui'
+
+const STORAGE_KEY = 'axolotl:skin-armor-preview'
+
+function includes<T extends string>(values: readonly T[], value: unknown): value is T {
+	return typeof value === 'string' && values.some((item) => item === value)
+}
+
+export function loadSkinArmorPreview(): ArmorPreviewConfig {
+	const config = createDefaultArmorPreviewConfig()
+	try {
+		const saved = JSON.parse(globalThis.localStorage?.getItem(STORAGE_KEY) ?? 'null')
+		if (!saved || typeof saved !== 'object' || Array.isArray(saved)) return config
+
+		for (const slot of ARMOR_SLOTS) {
+			const piece = saved[slot]
+			if (!piece || typeof piece !== 'object' || Array.isArray(piece)) continue
+			if (piece.material === null || includes(armorMaterialsForSlot(slot), piece.material)) {
+				config[slot].material = piece.material
+			}
+			if (piece.trimPattern === null || includes(ARMOR_TRIM_PATTERNS, piece.trimPattern)) {
+				config[slot].trimPattern = piece.trimPattern
+			}
+			if (includes(ARMOR_TRIM_MATERIALS, piece.trimMaterial)) {
+				config[slot].trimMaterial = piece.trimMaterial
+			}
+		}
+	} catch {
+		// Invalid or unavailable local storage falls back to a fresh preview.
+	}
+	return config
+}
+
+export function saveSkinArmorPreview(config: ArmorPreviewConfig): void {
+	try {
+		globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(config))
+	} catch {
+		// The preview remains usable when local storage is unavailable.
+	}
+}

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

@@ -9,9 +9,13 @@ import {
 	SpinnerIcon,
 } from '@modrinth/assets'
 import {
+	type ArmorPreviewConfig,
+	ArmorPreviewControls,
 	ButtonStyled,
+	cloneArmorPreviewConfig,
 	commonMessages,
 	ConfirmModal,
+	createDefaultArmorPreviewConfig,
 	defineMessages,
 	injectNotificationManager,
 	NavTabs,
@@ -24,12 +28,14 @@ import { invoke } from '@tauri-apps/api/core'
 import type { DragDropEvent } from '@tauri-apps/api/webview'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { computedAsync } from '@vueuse/core'
-import type { Ref } from 'vue'
+import type { ComponentPublicInstance, Ref } from 'vue'
 import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 
 import type AccountsCard from '@/components/ui/AccountsCard.vue'
+import ArmorTrimTab from '@/components/ui/skin/ArmorTrimTab.vue'
 import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
+import SkinListSkeleton from '@/components/ui/skin/SkinListSkeleton.vue'
 import VirtualSkinSectionList from '@/components/ui/skin/VirtualSkinSectionList.vue'
 import {
 	openSkinSiteLogin,
@@ -45,6 +51,7 @@ import { useNetworkStatus } from '@/composables/useNetworkStatus'
 import { check_reachable, get_default_user, users } from '@/helpers/auth'
 import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
 import { skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { loadSkinArmorPreview, saveSkinArmorPreview } from '@/helpers/skin-armor-preview'
 import type { Cape, Skin, SkinTextureUrl } from '@/helpers/skins.ts'
 import {
 	determineModelType,
@@ -252,6 +259,8 @@ const editSkinModal = useTemplateRef('editSkinModal')
 const addSkinFileInput = useTemplateRef<HTMLInputElement>('addSkinFileInput')
 const skinSectionList = useTemplateRef<VirtualSkinSectionListExpose>('skinSectionList')
 const skinPreviewArea = useTemplateRef<HTMLElement>('skinPreviewArea')
+const armorTrimTab = useTemplateRef<ComponentPublicInstance>('armorTrimTab')
+const armorPreviewControls = useTemplateRef<ComponentPublicInstance>('armorPreviewControls')
 
 const { formatMessage } = useVIntl()
 const router = useRouter()
@@ -391,7 +400,8 @@ const isAddSkinButtonDragActive = ref(false)
 
 const deleteSkinModal = ref()
 const skinToDelete = ref<Skin | null>(null)
-const skinListTab = ref<'saved' | 'default'>('saved')
+const lastSkinListTab = ref<'saved' | 'default'>('saved')
+const skinListTab = ref<'saved' | 'default' | 'armor'>('saved')
 
 const skinListTabLinks = computed(() => [
 	{
@@ -403,6 +413,70 @@ const skinListTabLinks = computed(() => [
 		label: formatMessage(messages.defaultTab),
 	},
 ])
+const ARMOR_TRIM_PANEL_ID = 'skins-armor-trim-panel'
+const savedArmorPreview = ref<ArmorPreviewConfig>(loadSkinArmorPreview())
+const armorPreviewConfig = ref<ArmorPreviewConfig>(cloneArmorPreviewConfig(savedArmorPreview.value))
+
+function saveArmorPreview() {
+	savedArmorPreview.value = cloneArmorPreviewConfig(armorPreviewConfig.value)
+	saveSkinArmorPreview(savedArmorPreview.value)
+}
+
+function resetArmorPreviewToSaved() {
+	armorPreviewConfig.value = cloneArmorPreviewConfig(savedArmorPreview.value)
+}
+
+function restoreDefaultArmorPreview() {
+	armorPreviewConfig.value = createDefaultArmorPreviewConfig()
+}
+
+/** A third tab behind the two list tabs, opened from the preview's action row. */
+function openArmorTab() {
+	if (skinListTab.value !== 'armor') lastSkinListTab.value = skinListTab.value
+
+	skinListTab.value = 'armor'
+}
+
+/**
+ * Whether an element belongs to the armour surface: somewhere inside the open
+ * armour tab or the button that toggles it. Only those hold a focus ring that
+ * would be left behind when the tab closes.
+ */
+function isArmorPreviewElement(element: Element) {
+	const tabElement: unknown = armorTrimTab.value?.$el
+	const toggleElement: unknown = armorPreviewControls.value?.$el
+
+	return (
+		(tabElement instanceof Element && tabElement.contains(element)) ||
+		(toggleElement instanceof Element && toggleElement.contains(element))
+	)
+}
+
+function closeArmorTab() {
+	// Leaving the tab drops whatever was not saved on purpose.
+	resetArmorPreviewToSaved()
+	skinListTab.value = lastSkinListTab.value
+
+	// Escape and the toggle both leave the armour button holding focus, which
+	// keeps its focus ring drawn until something else is clicked. Only drop that
+	// ring when the focus sits on the armour surface, never on an unrelated
+	// control that happened to hold it when Escape was pressed.
+	const focused = document.activeElement
+	if (focused instanceof HTMLElement && isArmorPreviewElement(focused)) focused.blur()
+}
+
+/**
+ * The tab bar keeps the last list tab highlighted while the armour tab shows, so
+ * picking one of them leaves the armour tab. That transition has to drop the
+ * draft exactly like the toggle and Escape paths do, or it lingers on the model
+ * while the panel is gone.
+ */
+function selectSkinListTab(index: number) {
+	if (skinListTab.value === 'armor') resetArmorPreviewToSaved()
+
+	lastSkinListTab.value = index === 0 ? 'saved' : 'default'
+	skinListTab.value = lastSkinListTab.value
+}
 
 function confirmDeleteSkin(skin: Skin) {
 	if (isSkinManagementReadOnly.value) return
@@ -1211,6 +1285,9 @@ await loadSkins()
 				class="ml-5 mt-4 flex h-[calc(80vh-1rem)] items-center justify-center max-[700px]:h-[calc(50vh-1rem)]"
 			>
 				<SkinPreviewRenderer
+					v-model:armor-config="armorPreviewConfig"
+					armor-preview
+					:armor-controls="false"
 					:cape-src="capeTexture"
 					:texture-src="skinTexture || ''"
 					:variant="skinVariant"
@@ -1257,6 +1334,16 @@ await loadSkins()
 							<EditIcon />
 							{{ formatMessage(messages.editSkinButton) }}
 						</button>
+						<ArmorPreviewControls
+							v-if="!isSkinSiteProfile"
+							ref="armorPreviewControls"
+							v-model="armorPreviewConfig"
+							panel="external"
+							:panel-id="ARMOR_TRIM_PANEL_ID"
+							:open="skinListTab === 'armor'"
+							@open="openArmorTab"
+							@close="closeArmorTab"
+						/>
 					</template>
 				</SkinPreviewRenderer>
 			</div>
@@ -1265,14 +1352,10 @@ await loadSkins()
 		<div class="pt-2">
 			<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
 				<NavTabs
-					:active-index="skinListTab === 'saved' ? 0 : 1"
+					:active-index="lastSkinListTab === 'saved' ? 0 : 1"
 					:links="skinListTabLinks"
 					mode="local"
-					@tab-click="
-						(index: number) => {
-							skinListTab = index === 0 ? 'saved' : 'default'
-						}
-					"
+					@tab-click="selectSkinListTab"
 				/>
 				<ButtonStyled v-if="!isSkinSiteProfile" color="brand">
 					<button @click="router.push('/lab/skin-editor')">
@@ -1281,27 +1364,45 @@ await loadSkins()
 					</button>
 				</ButtonStyled>
 			</div>
-			<VirtualSkinSectionList
-				ref="skinSectionList"
-				:active-tab="skinListTab"
-				:saved-skins="savedSkins"
-				:default-skin-sections="defaultSkinSections"
-				:get-baked-skin-textures="getBakedSkinTextures"
-				:is-skin-selected="isSkinSelected"
-				:is-skin-active="isSkinActive"
-				:is-add-skin-button-drag-active="isAddSkinButtonDragActive"
-				:read-only="isSkinManagementReadOnly"
-				:manage-saved-skins="!isSkinSiteProfile"
-				@select="changeSkin"
-				@edit="(skin, event) => !isSkinSiteProfile && editSkinModal?.show(event, skin)"
-				@delete="confirmDeleteSkin"
-				@reorder-saved-skins="reorderSavedSkins"
-				@add-skin="openAddSkinFileBrowser"
-				@add-skin-dragenter="onAddSkinDragOver"
-				@add-skin-dragover="onAddSkinDragOver"
-				@add-skin-dragleave="onAddSkinDragLeave"
-				@add-skin-drop="onAddSkinDrop"
-			/>
+			<Transition name="armor-tab" mode="out-in">
+				<div v-if="skinListTab !== 'armor'" key="list">
+					<SkinListSkeleton v-if="isSkinListBuffering" />
+					<VirtualSkinSectionList
+						v-show="!isSkinListBuffering"
+						ref="skinSectionList"
+						:active-tab="skinListTab"
+						:saved-skins="savedSkins"
+						:default-skin-sections="defaultSkinSections"
+						:get-baked-skin-textures="getBakedSkinTextures"
+						:is-skin-selected="isSkinSelected"
+						:is-skin-active="isSkinActive"
+						:is-add-skin-button-drag-active="isAddSkinButtonDragActive"
+						:read-only="isSkinManagementReadOnly"
+						:manage-saved-skins="!isSkinSiteProfile"
+						@select="changeSkin"
+						@edit="(skin, event) => !isSkinSiteProfile && editSkinModal?.show(event, skin)"
+						@delete="confirmDeleteSkin"
+						@reorder-saved-skins="reorderSavedSkins"
+						@add-skin="openAddSkinFileBrowser"
+						@add-skin-dragenter="onAddSkinDragOver"
+						@add-skin-dragover="onAddSkinDragOver"
+						@add-skin-dragleave="onAddSkinDragLeave"
+						@add-skin-drop="onAddSkinDrop"
+					/>
+				</div>
+				<ArmorTrimTab
+					v-else
+					ref="armorTrimTab"
+					key="armor"
+					v-model="armorPreviewConfig"
+					:panel-id="ARMOR_TRIM_PANEL_ID"
+					:saved="savedArmorPreview"
+					@save="saveArmorPreview"
+					@reset="resetArmorPreviewToSaved"
+					@defaults="restoreDefaultArmorPreview"
+					@close="closeArmorTab"
+				/>
+			</Transition>
 		</div>
 	</div>
 
@@ -1382,4 +1483,17 @@ await loadSkins()
 		grid-template-columns: 1fr;
 	}
 }
+// The armour tab crossfades with the skin list it replaces.
+.armor-tab-enter-active,
+.armor-tab-leave-active {
+	transition:
+		opacity 180ms ease,
+		transform 180ms ease;
+}
+
+.armor-tab-enter-from,
+.armor-tab-leave-to {
+	opacity: 0;
+	transform: translateY(0.5rem);
+}
 </style>

packages/app-lib/src/state/instances/commands/create_direct_link_instance.rs

@@ -1,6 +1,5 @@
 use crate::api::pack::import::{
-    ImportLauncherType,
-    direct_link::resolve_direct_link,
+    ImportLauncherType, direct_link::resolve_direct_link,
 };
 use crate::launcher::ExternalGameDirMode;
 use crate::state::instances::{

packages/app-lib/src/state/instances/commands/sync_direct_link_instances.rs

@@ -1,7 +1,7 @@
 use super::create_direct_link_instance::create_direct_link_instance;
 use crate::api::pack::import::direct_link::{
-    detect_direct_link_source,
-    has_minecraft_version_manifest, resolve_direct_link,
+    detect_direct_link_source, has_minecraft_version_manifest,
+    resolve_direct_link,
 };
 use crate::event::{InstancePayloadType, emit::emit_instance};
 use crate::launcher::ExternalGameDirMode;