replace ElNotification

This commit is contained in:
pa
2026-01-13 16:24:08 +09:00
committed by Natsumi
parent a353defca1
commit 38a8247e9c
5 changed files with 98 additions and 99 deletions

View File

@@ -186,6 +186,8 @@
"removed_list_header": "Avatars pending deletion:",
"copy_removed_ids": "Copy Avatar IDs",
"copied_ids": "Avatar IDs copied to clipboard",
"copy_failed": "Failed to copy to clipboard",
"dismiss": "Dismiss",
"checking_progress": "Checking avatar ({current}/{total})...",
"confirm_delete_invalid": "Delete Invalid Avatars?",
"confirm_delete_description": "Found {count} invalid avatars, delete them?",

View File

@@ -1,5 +1,4 @@
import { computed, reactive, ref, watch } from 'vue';
import { ElNotification } from 'element-plus';
import { defineStore } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -58,18 +57,16 @@ export const useChartsStore = defineStore('Charts', () => {
!mutualGraphStatus.completionNotified
) {
mutualGraphStatus.completionNotified = true;
ElNotification({
title: t(
toast.success(
t(
'view.charts.mutual_friend.notifications.mutual_friend_graph_ready_title'
),
message: t(
'view.charts.mutual_friend.notifications.mutual_friend_graph_ready_message'
),
type: 'success',
position: 'top-right',
duration: 5000,
showClose: true
});
{
description: t(
'view.charts.mutual_friend.notifications.mutual_friend_graph_ready_message'
)
}
);
}
}
);

View File

@@ -1,6 +1,6 @@
import { computed, ref } from 'vue';
import { ElNotification } from 'element-plus';
import { defineStore } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import { formatDateFilter, openExternalLink } from '../shared/utils';
@@ -26,6 +26,14 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
return lastStatus.value;
});
function dismissAlert() {
if (!alertRef.value) {
return;
}
toast.dismiss(alertRef.value);
alertRef.value = null;
}
function updateAlert() {
if (lastStatusText.value === statusText.value) {
return;
@@ -34,32 +42,28 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
if (!statusText.value) {
if (alertRef.value) {
alertRef.value.close();
alertRef.value = ElNotification({
title: t('status.title'),
message: `${formatDateFilter(lastStatusTime.value, 'short')}: All Systems Operational`,
type: 'success',
duration: 5000,
showClose: true,
dismissAlert();
alertRef.value = toast.success(t('status.title'), {
description: `${formatDateFilter(lastStatusTime.value, 'short')}: All Systems Operational`,
position: 'bottom-right',
onClick: () => {
openStatusPage();
action: {
label: 'Open',
onClick: () => openStatusPage()
}
});
}
return;
}
alertRef.value?.close();
alertRef.value = ElNotification({
title: t('status.title'),
message: `${formatDateFilter(lastStatusTime.value, 'short')}: ${statusText.value}`,
type: 'warning',
duration: 0,
showClose: true,
dismissAlert();
alertRef.value = toast.warning(t('status.title'), {
description: `${formatDateFilter(lastStatusTime.value, 'short')}: ${statusText.value}`,
duration: Infinity,
closeButton: true,
position: 'bottom-right',
onClick: () => {
openStatusPage();
action: {
label: 'Open',
onClick: () => openStatusPage()
}
});
}

View File

@@ -521,13 +521,23 @@
</template>
<script setup>
import { computed, h, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { ElMessageBox, ElNotification, ElProgress } from 'element-plus';
import {
computed,
h,
markRaw,
nextTick,
onBeforeMount,
onBeforeUnmount,
onMounted,
reactive,
ref,
watch
} from 'vue';
import { Ellipsis, Loader, RefreshCcw } from 'lucide-vue-next';
import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
import { Button } from '@/components/ui/button';
import { Loader } from 'lucide-vue-next';
import { ElMessageBox } from 'element-plus';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
@@ -560,6 +570,7 @@
import AvatarExportDialog from './dialogs/AvatarExportDialog.vue';
import FavoritesAvatarItem from './components/FavoritesAvatarItem.vue';
import FavoritesAvatarLocalHistoryItem from './components/FavoritesAvatarLocalHistoryItem.vue';
import InvalidAvatarsProgressToast from './components/InvalidAvatarsProgressToast.jsx';
import configRepository from '../../service/config.js';
import * as workerTimers from 'worker-timers';
@@ -1261,58 +1272,30 @@
percentage: 0
});
const ProgressContent = {
setup() {
return () =>
h('div', { style: 'padding: 4px 0;' }, [
h(
'p',
{
style: 'margin: 0 0 12px 0; font-size: 14px; color: var(--el-text-color-primary);'
},
t('view.favorite.avatars.checking_progress', {
current: progressState.current,
total: progressState.total
})
),
h(ElProgress, {
percentage: progressState.percentage,
style: 'margin-top: 8px;'
})
]);
}
};
let progressNotification = null;
let progressToastId;
try {
progressNotification = ElNotification({
title: t('view.favorite.avatars.checking'),
message: h(ProgressContent),
duration: 0,
type: 'info',
position: 'bottom-right'
progressToastId = toast(markRaw(InvalidAvatarsProgressToast), {
duration: Infinity,
componentProps: {
t,
progress: progressState,
onDismiss: () => progressToastId && toast.dismiss(progressToastId)
}
});
const result = await checkInvalidLocalAvatars(groupName, (current, total) => {
progressState.current = current;
progressState.total = total;
progressState.percentage = Math.floor((current / total) * 100);
progressState.percentage = total ? Math.floor((current / total) * 100) : 0;
});
if (progressNotification) {
progressNotification.close();
progressNotification = null;
if (progressToastId) {
toast.dismiss(progressToastId);
}
if (result.invalid === 0) {
ElNotification({
title: t('view.favorite.avatars.check_complete'),
message: t('view.favorite.avatars.no_invalid_found'),
type: 'success',
duration: 5000,
position: 'bottom-right'
});
toast.success(t('view.favorite.avatars.no_invalid_found'));
return;
}
@@ -1352,7 +1335,7 @@
toast.success(t('view.favorite.avatars.copied_ids'));
})
.catch(() => {
toast.error('Failed to copy');
toast.error(t('view.favorite.avatars.copy_failed'));
});
return;
}
@@ -1364,39 +1347,23 @@
.catch(() => false);
if (!confirmDelete) {
ElNotification({
title: t('view.favorite.avatars.check_complete'),
message: t('view.favorite.avatars.delete_cancelled'),
type: 'info',
duration: 5000,
position: 'bottom-right'
});
toast.info(t('view.favorite.avatars.delete_cancelled'));
return;
}
const removeResult = await removeInvalidLocalAvatars(result.invalidIds, groupName);
ElNotification({
title: t('view.favorite.avatars.check_complete'),
message: t('view.favorite.avatars.delete_summary', {
toast.success(
t('view.favorite.avatars.delete_summary', {
removed: removeResult.removed
}),
type: 'success',
duration: 5000,
position: 'bottom-right'
});
})
);
} catch (err) {
if (progressNotification) {
progressNotification.close();
if (progressToastId) {
toast.dismiss(progressToastId);
}
console.error(err);
ElNotification({
title: t('message.api_handler.avatar_private_or_deleted'),
message: String(err.message || err),
type: 'error',
duration: 5000,
position: 'bottom-right'
});
toast.error(String(err.message || err));
}
}

View File

@@ -0,0 +1,29 @@
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
export default {
name: 'InvalidAvatarsProgressToast',
props: {
t: { type: Function, required: true },
progress: { type: Object, required: true },
onDismiss: { type: Function, required: true }
},
setup(props) {
return () => (
<div class="flex flex-col gap-2 pr-1">
<div class="text-sm font-medium">
{props.t('view.favorite.avatars.checking_progress', {
current: props.progress.current,
total: props.progress.total
})}
</div>
<Progress modelValue={props.progress.percentage} class="h-2 w-full" />
<div class="flex justify-end">
<Button size="sm" variant="secondary" onClick={props.onDismiss}>
{props.t('view.favorite.avatars.dismiss')}
</Button>
</div>
</div>
);
}
};