feat: 重做实例页导览为内容/文件/世界/日志四步,并修复 inspect 步点导览气泡无法继续的问题
This commit is contained in:
1 parent
3901749d93
commit
306328367e
5 files changed
+95
-11
No files matched your search
@@ -35,7 +35,7 @@ const progressWidth = computed(() => `${Math.min(100, (props.current / props.tot
|
||||
<h2 :id="`onboarding-title-${step.id}`">{{ formatMessage(step.title) }}</h2>
|
||||
</div>
|
||||
<ButtonStyled circular type="transparent">
|
||||
<button :aria-label="formatMessage(onboardingMessages.skip)" @click.stop="$emit('skip')">
|
||||
<button data-onboarding-skip :aria-label="formatMessage(onboardingMessages.skip)" @click.stop="$emit('skip')">
|
||||
<XIcon />
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
|
||||
@@ -252,6 +252,42 @@ export const onboardingMessages = defineMessages({
|
||||
id: 'app.onboarding.instance-tabs.description',
|
||||
defaultMessage: 'Use these tabs for content, files, screenshots, worlds, and logs. Tidy chaos.',
|
||||
},
|
||||
instanceContentTabTitle: {
|
||||
id: 'app.onboarding.instance-content-tab.title',
|
||||
defaultMessage: 'Content',
|
||||
},
|
||||
instanceContentTabDescription: {
|
||||
id: 'app.onboarding.instance-content-tab.description',
|
||||
defaultMessage:
|
||||
'Manage this instance’s mods, resource packs, and shaders here. Search, enable or disable entries, check for updates, and browse for more.',
|
||||
},
|
||||
instanceFilesTabTitle: {
|
||||
id: 'app.onboarding.instance-files-tab.title',
|
||||
defaultMessage: 'Files',
|
||||
},
|
||||
instanceFilesTabDescription: {
|
||||
id: 'app.onboarding.instance-files-tab.description',
|
||||
defaultMessage:
|
||||
'Browse the instance folder and open configs or logs in the built-in editor without leaving the launcher.',
|
||||
},
|
||||
instanceWorldsTabTitle: {
|
||||
id: 'app.onboarding.instance-worlds-tab.title',
|
||||
defaultMessage: 'Worlds',
|
||||
},
|
||||
instanceWorldsTabDescription: {
|
||||
id: 'app.onboarding.instance-worlds-tab.description',
|
||||
defaultMessage:
|
||||
'Manage saved worlds: back them up, rename, edit world settings, and open the world folder.',
|
||||
},
|
||||
instanceLogsTabTitle: {
|
||||
id: 'app.onboarding.instance-logs-tab.title',
|
||||
defaultMessage: 'Logs',
|
||||
},
|
||||
instanceLogsTabDescription: {
|
||||
id: 'app.onboarding.instance-logs-tab.description',
|
||||
defaultMessage:
|
||||
'Read the instance’s live logs to trace crashes and errors without digging through files.',
|
||||
},
|
||||
labTitle: {
|
||||
id: 'app.onboarding.lab.title',
|
||||
defaultMessage: 'Useful tools, built in',
|
||||
@@ -509,15 +545,29 @@ export const onboardingTours: Record<OnboardingMode, OnboardingStep[]> = {
|
||||
onboardingMessages.instanceActionsTitle,
|
||||
onboardingMessages.instanceActionsDescription,
|
||||
),
|
||||
step(
|
||||
'instance-tabs',
|
||||
'inspect',
|
||||
copy(
|
||||
onboardingMessages.instanceTabsTitle,
|
||||
onboardingMessages.instanceTabsDescription,
|
||||
onboardingMessages.finishArea,
|
||||
),
|
||||
{ targetId: 'instance-tabs' },
|
||||
inspect(
|
||||
'instance-content-tab',
|
||||
'instance-tab-content',
|
||||
onboardingMessages.instanceContentTabTitle,
|
||||
onboardingMessages.instanceContentTabDescription,
|
||||
),
|
||||
inspect(
|
||||
'instance-files-tab',
|
||||
'instance-tab-files',
|
||||
onboardingMessages.instanceFilesTabTitle,
|
||||
onboardingMessages.instanceFilesTabDescription,
|
||||
),
|
||||
inspect(
|
||||
'instance-worlds-tab',
|
||||
'instance-tab-worlds',
|
||||
onboardingMessages.instanceWorldsTabTitle,
|
||||
onboardingMessages.instanceWorldsTabDescription,
|
||||
),
|
||||
inspect(
|
||||
'instance-logs-tab',
|
||||
'instance-tab-logs',
|
||||
onboardingMessages.instanceLogsTabTitle,
|
||||
onboardingMessages.instanceLogsTabDescription,
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
@@ -279,8 +279,11 @@ export function useOnboardingTour(
|
||||
function handleDocumentClick(event: MouseEvent) {
|
||||
if (!visible.value) return
|
||||
const clickedElement = event.target instanceof Element ? event.target : null
|
||||
if (clickedElement?.closest('[data-onboarding-overlay-ui]')) return
|
||||
|
||||
// 跳过/关闭按钮由其自身处理,不在全局点击里推进
|
||||
if (clickedElement?.closest('[data-onboarding-skip]')) return
|
||||
|
||||
// inspect 步:点击任意位置(含导览气泡本身)都继续下一步
|
||||
if (step.value.interaction === 'inspect') {
|
||||
event.preventDefault()
|
||||
event.stopImmediatePropagation()
|
||||
@@ -288,6 +291,9 @@ export function useOnboardingTour(
|
||||
return
|
||||
}
|
||||
|
||||
// 非 inspect 步:点在导览 UI 自身时不处理
|
||||
if (clickedElement?.closest('[data-onboarding-overlay-ui]')) return
|
||||
|
||||
if (!step.value.targetId || !['navigate', 'activate'].includes(step.value.interaction)) return
|
||||
if (clickedElement && handleBranchClick(clickedElement)) return
|
||||
if (!targetElement.value?.contains(event.target as Node)) return
|
||||
|
||||
Reference in new issue
Block a user