GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-07-02 04:51:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Route toast notifications to agent assistant bubbles

Browse Source
This commit is contained in:
jxxghp
2026-06-24 12:55:01 +08:00
parent 7f0f12ac41
commit 2b426a47c6
3 changed files with 257 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/agent/AgentAssistantEntry.vue
View File

@@ -1,15 +1,18 @@
<script setup lang="ts">
import {
onAgentAssistantNotificationBubble,
onAgentAssistantBubble,
setAgentAssistantBubbleEntryActive,
type AgentAssistantBubbleKind,
type AgentAssistantBubblePayload,
type AgentAssistantBubbleVariant,
type AgentAssistantNotificationBubblePayload,
} from '@/utils/agentAssistantBubble'
import { useI18n } from 'vue-i18n'
type AgentAssistantEntryBubbleKind = 'assistant' | 'custom' | 'notification'
interface AgentAssistantEntryBubble {
id: string
kind: AgentAssistantEntryBubbleKind
kind: AgentAssistantBubbleKind
variant: AgentAssistantBubbleVariant
title?: string
text: string
keepOpen?: boolean
@@ -17,7 +20,8 @@ interface AgentAssistantEntryBubble {
interface AgentAssistantEntryBubbleInput {
id?: string
kind?: AgentAssistantEntryBubbleKind
kind?: AgentAssistantBubbleKind
variant?: AgentAssistantBubbleVariant
title?: string
text: string
autoClose?: boolean
@@ -45,6 +49,7 @@ const { t } = useI18n()
const FAB_IDLE_DOCK_DELAY = 4200
const FAB_RIGHT_EDGE_DOCK_DISTANCE = 88
const FAB_NOTIFICATION_BUBBLE_DURATION = 7000
const FAB_TOAST_BUBBLE_DURATION = 4500
const FAB_MAX_BUBBLES = 4
const FAB_DEFAULT_RIGHT_OFFSET = 18
const FAB_DEFAULT_VERTICAL_RATIO = 2 / 3
@@ -128,7 +133,7 @@ let fabPendingPointerPoint: FabPointerPoint | null = null
let fabLastRandomAction: FabRandomAction | null = null
let fabRandomActionTimer: number | null = null
let fabRandomActionEndTimer: number | null = null
let stopNotificationBubbleListener: (() => void) | null = null
let stopBubbleListener: (() => void) | null = null
const fabBubbleTimers = new Map<string, number>()
@@ -483,6 +488,36 @@ function buildNotificationBubbleText(payload: AgentAssistantNotificationBubblePa
return stripMarkdownPreview(payload.text || payload.title || payload.source || payload.mtype || '')
}
function getBubbleVariant(payload: AgentAssistantBubblePayload): AgentAssistantBubbleVariant {
return payload.variant || 'default'
}
function getBubbleIcon(variant: AgentAssistantBubbleVariant) {
const icons: Record<AgentAssistantBubbleVariant, string> = {
default: 'mdi-bell-outline',
error: 'mdi-alert-circle-outline',
info: 'mdi-information-outline',
success: 'mdi-check-circle-outline',
warning: 'mdi-alert-outline',
}
return icons[variant]
}
function getToastBubbleTitle(payload: AgentAssistantBubblePayload) {
if (payload.title) return payload.title
const titles: Record<AgentAssistantBubbleVariant, string> = {
default: t('common.notice'),
error: t('common.error'),
info: t('common.notice'),
success: t('common.success'),
warning: t('common.notice'),
}
return titles[getBubbleVariant(payload)]
}
function clearFabBubbleTimer(id: string) {
const timer = fabBubbleTimers.get(id)
if (!timer) return
@@ -525,6 +560,7 @@ function showBubble(input: AgentAssistantEntryBubbleInput) {
{
id: input.id || createBubbleId(input.kind || 'custom'),
kind: input.kind || 'custom',
variant: input.variant || 'default',
title: input.title,
text,
keepOpen: input.keepOpen,
@@ -551,6 +587,7 @@ function showNotificationBubble(payload: AgentAssistantNotificationBubblePayload
showBubble({
id: payload.id,
kind: 'notification',
variant: getBubbleVariant(payload),
title: buildNotificationBubbleTitle(payload),
text,
autoClose: true,
@@ -558,6 +595,31 @@ function showNotificationBubble(payload: AgentAssistantNotificationBubblePayload
})
}
function showToastBubble(payload: AgentAssistantBubblePayload) {
const text = stripMarkdownPreview(payload.text || payload.title || '')
if (!text) return
showBubble({
id: payload.id,
kind: 'toast',
variant: getBubbleVariant(payload),
title: getToastBubbleTitle(payload),
text,
autoClose: true,
duration: payload.duration || FAB_TOAST_BUBBLE_DURATION,
keepOpen: payload.keepOpen,
})
}
function showAgentAssistantBubble(payload: AgentAssistantBubblePayload) {
if ((payload.kind || 'notification') === 'toast') {
showToastBubble(payload)
return
}
showNotificationBubble(payload as AgentAssistantNotificationBubblePayload)
}
function closeBubble(id?: string) {
if (id) {
clearFabBubbleTimer(id)
@@ -684,16 +746,19 @@ function handleFabPointerEnter() {
onMounted(() => {
nextTick(resetFabPosition)
setAgentAssistantBubbleEntryActive(props.active)
window.addEventListener('resize', handleWindowResize)
window.addEventListener('pointermove', handleGlobalFabPointer, { passive: true })
window.addEventListener('pointerdown', handleGlobalFabPointer, { passive: true })
stopNotificationBubbleListener = onAgentAssistantNotificationBubble(showNotificationBubble)
stopBubbleListener = onAgentAssistantBubble(showAgentAssistantBubble)
scheduleFabRandomAction()
})
watch(
() => props.active,
active => {
setAgentAssistantBubbleEntryActive(active)
if (active) {
if (isFabNearRightEdge()) scheduleFabAutoDock()
return
@@ -712,8 +777,9 @@ onScopeDispose(clearFabIdleTimer)
onScopeDispose(clearFabRandomAction)
onScopeDispose(resetFabBubbles)
onScopeDispose(() => {
stopNotificationBubbleListener?.()
stopNotificationBubbleListener = null
setAgentAssistantBubbleEntryActive(false)
stopBubbleListener?.()
stopBubbleListener = null
window.removeEventListener('resize', handleWindowResize)
teardownFabPointerTracking()
})
@@ -725,6 +791,7 @@ defineExpose({
showAssistantReplyPreview,
showBubble,
showNotificationBubble,
showToastBubble,
})
</script>
@@ -750,10 +817,16 @@ defineExpose({
v-for="bubble in fabBubbles"
:key="bubble.id"
class="agent-assistant-fab__bubble"
:class="`agent-assistant-fab__bubble--${bubble.kind}`"
:class="[
`agent-assistant-fab__bubble--${bubble.kind}`,
`agent-assistant-fab__bubble--${bubble.variant}`,
]"
role="status"
>
<strong v-if="bubble.title">{{ bubble.title }}</strong>
<strong v-if="bubble.title" class="agent-assistant-fab__bubble-title">
<VIcon class="agent-assistant-fab__bubble-icon" :icon="getBubbleIcon(bubble.variant)" size="18" />
<span>{{ bubble.title }}</span>
</strong>
<span>{{ bubble.text }}</span>
<button
class="agent-assistant-fab__bubble-close"
@@ -886,12 +959,12 @@ defineExpose({
.agent-assistant-fab__bubbles {
position: absolute;
display: grid;
overflow: visible;
overflow-y: auto;
gap: 0.45rem;
inline-size: 13.2rem;
inline-size: clamp(15.5rem, 22vw, 19rem);
inset-block-end: 4.45rem;
inset-inline-end: 2.75rem;
max-block-size: min(22rem, calc(100vh - 8rem));
max-block-size: min(34rem, calc(100vh - 8rem));
max-inline-size: calc(100vw - 6.4rem);
opacity: 0;
pointer-events: none;
@@ -905,6 +978,8 @@ defineExpose({
.agent-assistant-fab__bubble {
position: relative;
display: grid;
--agent-assistant-bubble-accent: var(--v-theme-primary);
--agent-assistant-bubble-accent-rgb: var(--v-theme-primary);
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
border-radius: 18px;
backdrop-filter: blur(12px);
@@ -921,25 +996,59 @@ defineExpose({
linear-gradient(135deg, rgba(var(--v-theme-primary), 0.1), transparent 48%), rgba(var(--v-theme-surface), 0.94);
}
.agent-assistant-fab__bubble strong {
.agent-assistant-fab__bubble--success {
--agent-assistant-bubble-accent-rgb: var(--v-theme-success);
}
.agent-assistant-fab__bubble--error {
--agent-assistant-bubble-accent-rgb: var(--v-theme-error);
}
.agent-assistant-fab__bubble--warning {
--agent-assistant-bubble-accent-rgb: 245, 158, 11;
}
.agent-assistant-fab__bubble--info {
--agent-assistant-bubble-accent-rgb: 14, 165, 233;
}
.agent-assistant-fab__bubble--toast {
border-color: rgba(var(--agent-assistant-bubble-accent-rgb), 0.3);
background:
linear-gradient(135deg, rgba(var(--agent-assistant-bubble-accent-rgb), 0.12), transparent 54%),
rgba(var(--v-theme-surface), 0.95);
}
.agent-assistant-fab__bubble-title {
overflow: hidden;
color: rgba(var(--v-theme-primary), 0.92);
font-size: 0.72rem;
display: inline-grid;
align-items: center;
grid-template-columns: auto minmax(0, 1fr);
color: rgba(var(--agent-assistant-bubble-accent-rgb), 0.92);
column-gap: 0.32rem;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.25;
margin-block-end: 0.22rem;
}
.agent-assistant-fab__bubble-title span {
text-overflow: ellipsis;
white-space: nowrap;
}
.agent-assistant-fab__bubble span {
.agent-assistant-fab__bubble-icon {
color: rgba(var(--agent-assistant-bubble-accent-rgb), 0.92) !important;
}
.agent-assistant-fab__bubble > span {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
color: rgba(var(--v-theme-on-surface), 0.9);
font-size: 0.78rem;
font-size: 0.84rem;
font-weight: 600;
-webkit-line-clamp: 4;
-webkit-line-clamp: 8;
line-height: 1.42;
text-align: start;
white-space: normal;

65
src/main.ts
View File

@@ -14,9 +14,14 @@ import App from '@/App.vue'
import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
// 4. 其他插件和功能模块
import Toast from 'vue-toastification'
import Toast, { TYPE, type PluginOptions } from 'vue-toastification'
import ConfirmDialog from '@/composables/useConfirm'
import { configureApexChartsTheme } from '@/utils/apexCharts'
import {
canUseAgentAssistantBubble,
emitAgentAssistantToastBubble,
type AgentAssistantBubbleVariant,
} from '@/utils/agentAssistantBubble'
// 5. 注册自定义组件
import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
@@ -29,6 +34,8 @@ import '@/styles/main.scss'
// 7. 状态恢复插件
import stateRestorePlugin from '@/plugins/stateRestore'
type ToastFilterPayload = Parameters<NonNullable<PluginOptions['filterBeforeCreate']>>[0]
function runWhenBrowserIdle(callback: () => void, timeout = 1500) {
const requestIdle = globalThis.requestIdleCallback
if (requestIdle) {
@@ -53,6 +60,61 @@ function loadRemoteComponentsAfterLogin() {
})
}
function shouldUseAgentAssistantToastBubble() {
const settings = pinia.state.value.globalSettings
if (!settings?.initialized) return false
return (
settings.data?.AI_AGENT_ENABLE === true &&
settings.data?.AI_AGENT_HIDE_ENTRY !== true &&
canUseAgentAssistantBubble()
)
}
function getAgentAssistantToastVariant(type?: ToastFilterPayload['type']): AgentAssistantBubbleVariant {
const variants: Record<string, AgentAssistantBubbleVariant> = {
[TYPE.DEFAULT]: 'default',
[TYPE.ERROR]: 'error',
[TYPE.INFO]: 'info',
[TYPE.SUCCESS]: 'success',
[TYPE.WARNING]: 'warning',
}
return variants[type || TYPE.DEFAULT] || 'default'
}
function getToastBubbleDuration(type?: ToastFilterPayload['type'], timeout?: ToastFilterPayload['timeout']) {
if (typeof timeout === 'number') return timeout
if (timeout === false) return undefined
return type === TYPE.ERROR || type === TYPE.WARNING ? 7000 : 4500
}
function getToastTextContent(content: ToastFilterPayload['content']) {
if (typeof content === 'string') return content
// 组件型 toast 可能包含操作按钮或复杂布局，无法可靠转成气泡文本时继续使用原生 toast。
return ''
}
function routeToastToAgentAssistantBubble(toast: ToastFilterPayload) {
const text = getToastTextContent(toast.content)
if (!text || !shouldUseAgentAssistantToastBubble()) return toast
const variant = getAgentAssistantToastVariant(toast.type)
emitAgentAssistantToastBubble({
id: `toast-${String(toast.id)}`,
kind: 'toast',
variant,
text,
duration: getToastBubbleDuration(toast.type, toast.timeout),
keepOpen: toast.timeout === false,
})
return false
}
let remoteComponentsInitialized = false
const AsyncAceEditor = defineAsyncComponent(async () => {
@@ -111,6 +173,7 @@ app
.use(Toast, {
position: 'bottom-right',
hideProgressBar: true,
filterBeforeCreate: routeToastToAgentAssistantBubble,
})
.use(ConfirmDialog)
.use(i18n)

83
src/utils/agentAssistantBubble.ts
View File

@@ -1,11 +1,20 @@
import type { SystemNotification } from '@/api/types'
const AGENT_ASSISTANT_BUBBLE_EVENT = 'agentAssistantBubble'
let agentAssistantBubbleListenerCount = 0
let agentAssistantBubbleEntryActive = false
export interface AgentAssistantNotificationBubblePayload {
export type AgentAssistantBubbleKind = 'assistant' | 'custom' | 'notification' | 'toast'
export type AgentAssistantBubbleVariant = 'default' | 'info' | 'success' | 'warning' | 'error'
export interface AgentAssistantBubblePayload {
id: string
kind?: AgentAssistantBubbleKind
variant?: AgentAssistantBubbleVariant
title?: string
text?: string
duration?: number
keepOpen?: boolean
type?: string
mtype?: string
source?: string
@@ -13,7 +22,16 @@ export interface AgentAssistantNotificationBubblePayload {
reg_time?: string
}
interface AgentAssistantBubbleEvent extends CustomEvent<AgentAssistantNotificationBubblePayload> {}
export interface AgentAssistantNotificationBubblePayload extends AgentAssistantBubblePayload {
kind?: 'notification'
}
export interface AgentAssistantToastBubblePayload extends AgentAssistantBubblePayload {
kind: 'toast'
variant: AgentAssistantBubbleVariant
}
interface AgentAssistantBubbleEvent extends CustomEvent<AgentAssistantBubblePayload> {}
function createNotificationBubbleId(notification: SystemNotification) {
if (notification.id) return `notification-${notification.id}`
@@ -21,29 +39,44 @@ function createNotificationBubbleId(notification: SystemNotification) {
return `notification-${Date.now()}-${Math.random().toString(16).slice(2)}`
}
// 通知中心和智能助手入口没有父子关系，通过全局事件传递实时通知气泡数据。
export function emitAgentAssistantNotificationBubble(notification: SystemNotification) {
function emitAgentAssistantBubble(payload: AgentAssistantBubblePayload) {
if (typeof window === 'undefined') return
window.dispatchEvent(
new CustomEvent<AgentAssistantNotificationBubblePayload>(AGENT_ASSISTANT_BUBBLE_EVENT, {
detail: {
id: createNotificationBubbleId(notification),
title: notification.title,
text: notification.text,
type: notification.type,
mtype: notification.mtype,
source: notification.source,
date: notification.date,
reg_time: notification.reg_time,
},
new CustomEvent<AgentAssistantBubblePayload>(AGENT_ASSISTANT_BUBBLE_EVENT, {
detail: payload,
}),
)
}
export function onAgentAssistantNotificationBubble(
callback: (payload: AgentAssistantNotificationBubblePayload) => void,
) {
// 通知中心、toast 和智能助手入口没有父子关系，通过全局事件传递实时气泡数据。
export function emitAgentAssistantNotificationBubble(notification: SystemNotification) {
emitAgentAssistantBubble({
id: createNotificationBubbleId(notification),
kind: 'notification',
title: notification.title,
text: notification.text,
type: notification.type,
mtype: notification.mtype,
source: notification.source,
date: notification.date,
reg_time: notification.reg_time,
})
}
export function emitAgentAssistantToastBubble(payload: AgentAssistantToastBubblePayload) {
emitAgentAssistantBubble(payload)
}
export function setAgentAssistantBubbleEntryActive(active: boolean) {
agentAssistantBubbleEntryActive = active
}
export function canUseAgentAssistantBubble() {
return agentAssistantBubbleEntryActive && agentAssistantBubbleListenerCount > 0
}
export function onAgentAssistantBubble(callback: (payload: AgentAssistantBubblePayload) => void) {
if (typeof window === 'undefined') return () => {}
const handler = (event: Event) => {
@@ -51,6 +84,18 @@ export function onAgentAssistantNotificationBubble(
}
window.addEventListener(AGENT_ASSISTANT_BUBBLE_EVENT, handler)
agentAssistantBubbleListenerCount += 1
return () => window.removeEventListener(AGENT_ASSISTANT_BUBBLE_EVENT, handler)
return () => {
window.removeEventListener(AGENT_ASSISTANT_BUBBLE_EVENT, handler)
agentAssistantBubbleListenerCount = Math.max(0, agentAssistantBubbleListenerCount - 1)
}
}
export function onAgentAssistantNotificationBubble(
callback: (payload: AgentAssistantNotificationBubblePayload) => void,
) {
return onAgentAssistantBubble(payload => {
if ((payload.kind || 'notification') === 'notification') callback(payload as AgentAssistantNotificationBubblePayload)
})
}