从 Axolotl 1.9.7 移植皮肤编辑器的盔甲/盔甲纹饰预览功能， 让玩家在皮肤选择页可试穿盔甲并调整纹饰。 新增： - 前端组件 ArmorTrimTab / SkinListSkeleton 及 skin-armor-preview helper - packages/ui 组件 ArmorPreviewControls / ArmorTrimPanel - packages/ui armor 预览 composable（armor-preview-assets/types、use-armor-preview） - packages/ui webgl 盔甲渲染（armor-geometry / armor-preview-object / armor-rendering） - packages/ui/src/assets/minecraft-armor 盔甲素材 改动： - SkinPreviewRenderer 增加 armorPreview/armorControls props、 armorConfig model 与 useArmorPreview 集成 - Skins.vue 增加盔甲 tab、状态逻辑与模板接入 - 补齐 skin/composables/utils 的导出 适配说明：ArmorPreviewControls 原版依赖 reka-ui 的 popover， Starlight 无该依赖且只用 external 模式，故改写为 external-only， 去除 reka-ui 与 overlays.css 依赖。
This commit is contained in:
AxTps committed
1 parent
20d5d2baab
commit
ae2992d7f8
151 files changed
+1936
-32
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user