improve updater ux

This commit is contained in:
pa
2026-01-13 11:43:01 +09:00
committed by Natsumi
parent f077fcfd51
commit aab248a3af
12 changed files with 250 additions and 42 deletions

View File

@@ -18,36 +18,46 @@
<br />
<span>{{ t('dialog.vrcx_updater.ready_for_update') }}</span>
</div>
<Select
:model-value="branch"
@update:modelValue="
(v) => {
branch = v;
loadBranchVersions();
}
">
<SelectTrigger style="display: inline-flex; width: 150px; margin-right: 15px">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="b in branches" :key="b.name" :value="b.name">{{ b.name }}</SelectItem>
</SelectContent>
</Select>
<Select
:model-value="VRCXUpdateDialog.release"
@update:modelValue="(v) => (VRCXUpdateDialog.release = v)">
<SelectTrigger style="display: inline-flex; width: 150px">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="item in VRCXUpdateDialog.releases" :key="item.name" :value="item.name">
{{ item.tag_name }}
</SelectItem>
</SelectContent>
</Select>
<Tabs :model-value="branch" class="w-full" @update:modelValue="handleBranchChange">
<TabsList class="grid w-full grid-cols-2">
<TabsTrigger value="Stable">{{ t('dialog.vrcx_updater.branch_stable') }}</TabsTrigger>
<TabsTrigger value="Nightly">{{ t('dialog.vrcx_updater.branch_nightly') }}</TabsTrigger>
</TabsList>
<TabsContent value="Nightly">
<Alert variant="destructive">
<AlertCircle class="text-muted-foreground" />
<AlertTitle>{{ t('dialog.vrcx_updater.nightly_title') }}</AlertTitle>
<AlertDescription>
{{ t('dialog.vrcx_updater.nightly_notice') }}
</AlertDescription>
</Alert>
</TabsContent>
</Tabs>
<FieldGroup class="mt-3">
<Field>
<FieldLabel>{{ t('dialog.vrcx_updater.release') }}</FieldLabel>
<FieldContent>
<Select
:model-value="VRCXUpdateDialog.release"
@update:modelValue="(v) => (VRCXUpdateDialog.release = v)">
<SelectTrigger class="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="item in VRCXUpdateDialog.releases"
:key="item.name"
:value="item.name">
{{ item.tag_name }}
</SelectItem>
</SelectContent>
</Select>
</FieldContent>
</Field>
</FieldGroup>
<div
v-if="!VRCXUpdateDialog.updatePending && VRCXUpdateDialog.release === appVersion"
style="margin-top: 15px">
class="mt-3 text-xs text-muted-foreground">
<span>{{ t('dialog.vrcx_updater.latest_version') }}</span>
</div>
</template>
@@ -72,14 +82,17 @@
</template>
<script setup>
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { nextTick, ref, watch } from 'vue';
import { AlertCircle } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { branches } from '../../shared/constants';
import { getNextDialogIndex } from '../../shared/utils/base/ui';
import { useVRCXUpdaterStore } from '../../stores';
@@ -99,6 +112,13 @@
const { t } = useI18n();
const VRCXUpdateDialogIndex = ref(2000);
const handleBranchChange = (value) => {
if (!value || value === branch.value) {
return;
}
branch.value = value;
loadBranchVersions();
};
watch(
() => VRCXUpdateDialog,