MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 06:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve whats new dialog

Browse Source
This commit is contained in:
pa
2026-03-22 23:46:52 +09:00
parent deb27c3fa6
commit e08de71e96
7 changed files with 225 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/onboarding/SpotlightDialog.vue
View File

@@ -1,7 +1,7 @@
<template>
<Dialog v-model:open="isOpen">
<DialogContent
class="border-none! bg-background/85 shadow-[0_0_0_1px_hsl(from_var(--border)_h_s_l/0.5),0_24px_48px_hsl(from_var(--background)_h_s_l/0.4)] backdrop-blur-xl backdrop-saturate-[1.4] sm:max-w-xl"
class="border border-border bg-background/85 shadow-lg backdrop-blur-xl backdrop-saturate-[1.4] sm:max-w-xl"
:show-close-button="false"
@escape-key-down="handleDismiss"
@pointer-down-outside="handleDismiss"
@@ -14,11 +14,11 @@
<p class="mt-1.5 text-sm text-muted-foreground">{{ t('onboarding.welcome.subtitle') }}</p>
</div>
<div class="my-4 grid grid-cols-4 gap-2.5">
<div class="my-4 grid auto-rows-fr grid-cols-4 gap-2.5">
<div
v-for="(feature, index) in features"
:key="feature.key"
class="flex animate-[featureAppear_0.4s_ease-out_both] cursor-default flex-col items-center rounded-[10px] border border-transparent bg-muted/50 px-2 py-3.5 pb-3 text-center transition-all duration-250 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-muted/80 hover:shadow-[0_4px_16px_hsl(from_var(--primary)_h_s_l/0.08)]"
class="flex h-full animate-[featureAppear_0.4s_ease-out_both] cursor-default flex-col items-center rounded-[10px] border border-transparent bg-muted/50 px-2 py-3.5 pb-3 text-center transition-all duration-250 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-muted/80 hover:shadow-[0_4px_16px_hsl(from_var(--primary)_h_s_l/0.08)]"
:style="{ animationDelay: `${0.1 + index * 0.1}s` }">
<div
class="mb-2.5 flex size-10 items-center justify-center rounded-[10px] transition-all duration-250"
@@ -28,10 +28,10 @@
}">
<component :is="feature.icon" class="size-5" />
</div>
<div class="mb-1 text-[13px] font-semibold">
<div class="mb-1 w-full text-[13px] font-semibold leading-snug">
{{ t(`onboarding.welcome.features.${feature.key}.title`) }}
</div>
<div class="text-[11.5px] leading-snug text-muted-foreground">
<div class="w-full text-[11.5px] leading-snug text-muted-foreground">
{{ t(`onboarding.welcome.features.${feature.key}.description`) }}
</div>
</div>
@@ -39,7 +39,6 @@
<div class="flex flex-col items-center">
<Button class="w-full text-sm font-semibold" size="lg" @click="handleDismiss">
<Sparkles class="mr-1.5 size-4" />
{{ t('onboarding.welcome.cta') }}
</Button>
</div>

109
src/components/onboarding/WhatsNewDialog.vue
View File

@@ -1,46 +1,31 @@
<template>
<Dialog v-model:open="whatsNewDialog.visible">
<DialogContent
class="border-none! bg-background/88 p-5 shadow-[0_0_0_1px_hsl(from_var(--border)_h_s_l/0.5),0_24px_48px_hsl(from_var(--background)_h_s_l/0.4)] backdrop-blur-xl backdrop-saturate-[1.4] sm:max-w-2xl"
class="border border-border bg-background/88 p-5 shadow-lg backdrop-blur-xl backdrop-saturate-[1.4] sm:max-w-xl"
:show-close-button="false"
@escape-key-down="handleDismiss"
@pointer-down-outside="handleDismiss"
@interact-outside.prevent>
<!-- Title -->
<div class="pt-1 text-center">
<div class="mb-2 flex justify-center">
<img :src="vrcxLogo" alt="VRCX" class="size-12 rounded-xl" />
</div>
<div class="flex flex-col items-center gap-2">
<h2 class="m-0 text-[23px] font-bold tracking-tight">
{{ releaseTitle }}
</h2>
<Badge
v-if="releaseLabel"
variant="secondary"
class="rounded-full px-2.5 py-0.5 text-[11px] tracking-[0.08em]">
{{ releaseLabel }}
</Badge>
</div>
<Button
variant="link"
size="sm"
class="mt-2 h-auto gap-1 px-0 text-muted-foreground hover:text-foreground"
@click="handleViewDetails">
{{ t('onboarding.whatsnew.common.view_details') }}
<ChevronRight class="size-4" />
</Button>
<h2 class="m-0 text-[23px] font-bold tracking-tight">
{{ t(whatsNewDialog.titleKey || 'onboarding.whatsnew.title') }}
</h2>
</div>
<div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
<!-- Feature Cards -->
<div class="my-2 grid auto-rows-fr grid-cols-4 gap-2.5">
<div
v-for="(feature, index) in whatsNewDialog.items"
:key="feature.key"
class="group flex animate-[whatsNewAppear_0.45s_ease-out_both] cursor-default flex-col rounded-[12px] border border-transparent bg-muted/55 px-3 py-3.5 text-left transition-all duration-250 hover:-translate-y-0.5 hover:border-primary/20 hover:bg-muted/80 hover:shadow-[0_4px_18px_hsl(from_var(--primary)_h_s_l/0.08)]"
:style="{ animationDelay: `${0.08 + index * 0.06}s` }">
class="flex h-full animate-[featureAppear_0.4s_ease-out_both] cursor-default flex-col items-center rounded-[10px] border border-transparent bg-muted/50 px-2 py-3.5 pb-3 text-center transition-all duration-250 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-muted/80 hover:shadow-[0_4px_16px_hsl(from_var(--primary)_h_s_l/0.08)]"
:style="{ animationDelay: `${0.1 + index * 0.1}s` }">
<div
class="mb-3 flex size-10 items-center justify-center rounded-[10px] transition-all duration-250"
class="mb-2.5 flex size-10 items-center justify-center rounded-[10px] transition-all duration-250"
:style="{
background: `hsl(${resolveHue(feature.icon)} 60% 50% / 0.12)`,
color: `hsl(${resolveHue(feature.icon)} 60% 55%)`
@@ -48,47 +33,53 @@
<component :is="resolveIcon(feature.icon)" class="size-5" />
</div>
<div class="mb-1 text-sm font-semibold">
<div class="mb-1 w-full text-[13px] font-semibold leading-snug">
{{ t(feature.titleKey) }}
</div>
<div class="text-[12.5px] leading-snug text-muted-foreground">
<div class="w-full text-[11.5px] leading-snug text-muted-foreground">
{{ t(feature.descriptionKey) }}
</div>
</div>
</div>
<div class="mt-1 rounded-[12px] border border-border/60 bg-muted/30 px-3 py-3">
<div class="mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
<HeartHandshake class="size-4 text-muted-foreground" />
<!-- Support (subdued footer-like) -->
<div class="mx-auto mt-4 w-fit max-w-[340px]">
<div class="mb-2 text-[11.5px] font-medium tracking-[0.02em] text-muted-foreground/75">
<span>{{ t('onboarding.whatsnew.common.support') }}</span>
</div>
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-1 text-left">
<div
v-for="supporter in supporters"
:key="supporter.name"
class="flex flex-wrap items-center gap-2">
<span class="min-w-20 text-sm font-medium text-foreground">
class="flex flex-wrap items-center gap-1">
<span class="text-[13px] font-semibold text-foreground/90">
{{ supporter.name }}
</span>
<Button
v-for="link in supporter.links"
:key="link.label"
variant="outline"
size="sm"
class="h-8 rounded-full px-3 text-xs font-medium"
@click="openExternalLink(link.url)">
{{ link.label }}
<ExternalLink class="size-3.5" />
</Button>
<template v-for="link in supporter.links" :key="link.label">
<span class="text-[11px] text-muted-foreground/40">·</span>
<button
class="cursor-pointer border-0 bg-transparent p-0 text-[12px] font-medium text-muted-foreground/80 transition-colors duration-200 hover:text-foreground"
@click="openExternalLink(link.url)">
{{ link.label }}
</button>
</template>
</div>
</div>
</div>
<!-- View Changelog -->
<div class="mt-2 flex justify-center">
<button
class="cursor-pointer border-0 bg-transparent text-xs text-muted-foreground/70 transition-colors duration-200 hover:text-foreground"
@click="handleViewChangelog">
{{ t('onboarding.whatsnew.common.view_changelog') }} →
</button>
</div>
<!-- CTA -->
<Button class="mt-1 h-11 w-full text-sm font-semibold" size="lg" @click="handleDismiss">
<Sparkles class="size-4" />
{{ t('onboarding.whatsnew.common.got_it') }}
</Button>
</DialogContent>
@@ -96,21 +87,11 @@
</template>
<script setup>
import { computed, markRaw } from 'vue';
import {
ChevronRight,
ExternalLink,
HeartHandshake,
LayoutDashboard,
Search,
Sparkles,
Activity,
Images
} from 'lucide-vue-next';
import { markRaw } from 'vue';
import { LayoutDashboard, Search, Activity, Images } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { openExternalLink } from '../../shared/utils';
@@ -122,14 +103,6 @@
const { whatsNewDialog } = storeToRefs(vrcxUpdaterStore);
const { closeWhatsNewDialog, openChangeLogDialogOnly } = vrcxUpdaterStore;
const releaseLabel = computed(() => whatsNewDialog.value.version || '');
const releaseTitle = computed(() => {
const releaseKey = whatsNewDialog.value.releaseKey;
return releaseKey
? t(`onboarding.whatsnew.releases.${releaseKey}.title`)
: t('onboarding.whatsnew.title');
});
const supporters = [
{
name: 'Map1en',
@@ -169,7 +142,7 @@
return hueMap[iconName] ?? '210';
}
async function handleViewDetails() {
async function handleViewChangelog() {
closeWhatsNewDialog();
await openChangeLogDialogOnly();
}
@@ -180,10 +153,10 @@
</script>
<style>
@keyframes whatsNewAppear {
@keyframes featureAppear {
from {
opacity: 0;
transform: translateY(12px) scale(0.97);
transform: translateY(12px) scale(0.95);
}
to {
opacity: 1;