GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-09 01:36:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve stylelint warnings and enhance bubble layout for agent assistant

Browse Source
This commit is contained in:
jxxghp
2026-06-24 14:33:55 +08:00
parent d9cbcc2991
commit 50ae739a4d
1 changed files with 44 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/agent/AgentAssistantEntry.vue
+44 -33
View File
@@ -382,7 +382,10 @@ function pauseFabAutoDock() {
// 返回下一次趣味动作的随机等待时间，让动作出现节奏更自然。 // 返回下一次趣味动作的随机等待时间，让动作出现节奏更自然。
function getFabRandomActionDelay() { function getFabRandomActionDelay() {
return FAB_RANDOM_ACTION_MIN_DELAY + Math.round(Math.random() * (FAB_RANDOM_ACTION_MAX_DELAY - FAB_RANDOM_ACTION_MIN_DELAY)) return (
FAB_RANDOM_ACTION_MIN_DELAY +
Math.round(Math.random() * (FAB_RANDOM_ACTION_MAX_DELAY - FAB_RANDOM_ACTION_MIN_DELAY))
)
} }
// 判断当前交互状态是否适合播放随机动作，避免干扰半隐藏、拖拽和思考态。 // 判断当前交互状态是否适合播放随机动作，避免干扰半隐藏、拖拽和思考态。
@@ -461,7 +464,8 @@ function runFabRandomAction() {
// 根据当前显示和交互状态同步随机动作队列。 // 根据当前显示和交互状态同步随机动作队列。
function syncFabRandomActionSchedule() { function syncFabRandomActionSchedule() {
if (canRunFabRandomAction()) { if (canRunFabRandomAction()) {
if (!fabRandomAction.value && fabRandomActionTimer === null && fabRandomActionEndTimer === null) scheduleFabRandomAction() if (!fabRandomAction.value && fabRandomActionTimer === null && fabRandomActionEndTimer === null)
scheduleFabRandomAction()
return return
} }
@@ -658,7 +662,10 @@ function setFabDocked(docked: boolean) {
updateFabPosition({ updateFabPosition({
...currentPosition, ...currentPosition,
x: Math.min(currentPosition.x, Math.max(0, getViewportSize().width - getOpenFabSize().width - FAB_DEFAULT_RIGHT_OFFSET)), x: Math.min(
currentPosition.x,
Math.max(0, getViewportSize().width - getOpenFabSize().width - FAB_DEFAULT_RIGHT_OFFSET),
),
}) })
scheduleFabAutoDock() scheduleFabAutoDock()
} }
@@ -676,7 +683,6 @@ function handleFabTriggerPointerDown(event: PointerEvent) {
startY: currentPosition.y, startY: currentPosition.y,
moved: false, moved: false,
} }
;(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId) ;(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId)
} }
@@ -817,10 +823,7 @@ defineExpose({
v-for="bubble in fabBubbles" v-for="bubble in fabBubbles"
:key="bubble.id" :key="bubble.id"
class="agent-assistant-fab__bubble" class="agent-assistant-fab__bubble"
:class="[ :class="[`agent-assistant-fab__bubble--${bubble.kind}`, `agent-assistant-fab__bubble--${bubble.variant}`]"
`agent-assistant-fab__bubble--${bubble.kind}`,
`agent-assistant-fab__bubble--${bubble.variant}`,
]"
role="status" role="status"
> >
<strong v-if="bubble.title" class="agent-assistant-fab__bubble-title"> <strong v-if="bubble.title" class="agent-assistant-fab__bubble-title">
@@ -874,6 +877,7 @@ defineExpose({
<style lang="scss" scoped> <style lang="scss" scoped>
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
/* stylelint-disable no-duplicate-selectors */
.agent-assistant-fab { .agent-assistant-fab {
position: fixed; position: fixed;
@@ -959,7 +963,6 @@ defineExpose({
.agent-assistant-fab__bubbles { .agent-assistant-fab__bubbles {
position: absolute; position: absolute;
display: grid; display: grid;
overflow-y: auto;
gap: 0.45rem; gap: 0.45rem;
inline-size: clamp(15.5rem, 22vw, 19rem); inline-size: clamp(15.5rem, 22vw, 19rem);
inset-block-end: 4.45rem; inset-block-end: 4.45rem;
@@ -967,6 +970,7 @@ defineExpose({
max-block-size: min(34rem, calc(100vh - 8rem)); max-block-size: min(34rem, calc(100vh - 8rem));
max-inline-size: calc(100vw - 6.4rem); max-inline-size: calc(100vw - 6.4rem);
opacity: 0; opacity: 0;
overflow-y: auto;
pointer-events: none; pointer-events: none;
transform: translateY(0.22rem) scale(0.96); transform: translateY(0.22rem) scale(0.96);
transform-origin: 100% 100%; transform-origin: 100% 100%;
@@ -978,8 +982,10 @@ defineExpose({
.agent-assistant-fab__bubble { .agent-assistant-fab__bubble {
position: relative; position: relative;
display: grid; display: grid;
--agent-assistant-bubble-accent: var(--v-theme-primary); --agent-assistant-bubble-accent: var(--v-theme-primary);
--agent-assistant-bubble-accent-rgb: 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: 1px solid rgba(var(--v-theme-on-surface), 0.1);
border-radius: 18px; border-radius: 18px;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
@@ -1020,14 +1026,14 @@ defineExpose({
} }
.agent-assistant-fab__bubble-title { .agent-assistant-fab__bubble-title {
overflow: hidden;
display: inline-grid; display: inline-grid;
overflow: hidden;
align-items: center; align-items: center;
grid-template-columns: auto minmax(0, 1fr);
color: rgba(var(--agent-assistant-bubble-accent-rgb), 0.92); color: rgba(var(--agent-assistant-bubble-accent-rgb), 0.92);
column-gap: 0.32rem; column-gap: 0.32rem;
font-size: 1.05rem; font-size: 1.05rem;
font-weight: 800; font-weight: 800;
grid-template-columns: auto minmax(0, 1fr);
line-height: 1.25; line-height: 1.25;
margin-block-end: 0.22rem; margin-block-end: 0.22rem;
} }
@@ -1143,12 +1149,12 @@ defineExpose({
z-index: 3; z-index: 3;
display: block; display: block;
border-radius: 999px; border-radius: 999px;
animation: agent-fab-antenna-idle 3.9s ease-in-out infinite;
background: var(--agent-assistant-robot-outline); background: var(--agent-assistant-robot-outline);
block-size: 0.66rem; block-size: 0.66rem;
inline-size: 0.18rem; inline-size: 0.18rem;
inset-block-start: 0.72rem; inset-block-start: 0.72rem;
inset-inline-start: 2.62rem; inset-inline-start: 2.62rem;
animation: agent-fab-antenna-idle 3.9s ease-in-out infinite;
transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)) rotate(22deg); transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)) rotate(22deg);
transform-origin: bottom center; transform-origin: bottom center;
transition: transition:
@@ -1174,6 +1180,7 @@ defineExpose({
display: block; display: block;
border: 2px solid var(--agent-assistant-robot-outline); border: 2px solid var(--agent-assistant-robot-outline);
border-radius: 11px; border-radius: 11px;
animation: agent-fab-head-idle 4.6s ease-in-out infinite;
background: linear-gradient( background: linear-gradient(
145deg, 145deg,
var(--agent-assistant-robot-shell-start) 0%, var(--agent-assistant-robot-shell-start) 0%,
@@ -1186,7 +1193,6 @@ defineExpose({
inline-size: 2.82rem; inline-size: 2.82rem;
inset-block-start: 1.42rem; inset-block-start: 1.42rem;
inset-inline-start: 0.88rem; inset-inline-start: 0.88rem;
animation: agent-fab-head-idle 4.6s ease-in-out infinite;
transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y)); transform: translate(var(--agent-assistant-head-x), var(--agent-assistant-head-y));
transform-origin: 50% 85%; transform-origin: 50% 85%;
} }
@@ -1194,6 +1200,7 @@ defineExpose({
.agent-assistant-fab__face { .agent-assistant-fab__face {
position: absolute; position: absolute;
display: block; display: block;
overflow: hidden;
border: 2px solid var(--agent-assistant-robot-outline-soft); border: 2px solid var(--agent-assistant-robot-outline-soft);
border-radius: 8px; border-radius: 8px;
background: linear-gradient( background: linear-gradient(
@@ -1206,7 +1213,6 @@ defineExpose({
inline-size: 2.1rem; inline-size: 2.1rem;
inset-block-start: 0.33rem; inset-block-start: 0.33rem;
inset-inline-start: 0.25rem; inset-inline-start: 0.25rem;
overflow: hidden;
} }
.agent-assistant-fab__eye { .agent-assistant-fab__eye {
@@ -1219,6 +1225,7 @@ defineExpose({
inline-size: 0.42rem; inline-size: 0.42rem;
inset-block-start: 0.36rem; inset-block-start: 0.36rem;
transform: translate(var(--agent-assistant-eye-x), var(--agent-assistant-eye-y)); transform: translate(var(--agent-assistant-eye-x), var(--agent-assistant-eye-y));
/* 触屏设备没有连续 hover 轨迹，给眼神位移补过渡避免点按时瞬移。 */ /* 触屏设备没有连续 hover 轨迹，给眼神位移补过渡避免点按时瞬移。 */
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
} }
@@ -1234,9 +1241,9 @@ defineExpose({
.agent-assistant-fab__smile { .agent-assistant-fab__smile {
position: absolute; position: absolute;
display: block; display: block;
border-block-end: 0.13rem solid var(--agent-assistant-robot-eye);
border-radius: 0 0 999px 999px; border-radius: 0 0 999px 999px;
block-size: 0.32rem; block-size: 0.32rem;
border-block-end: 0.13rem solid var(--agent-assistant-robot-eye);
inline-size: 0.7rem; inline-size: 0.7rem;
inset-block-start: 0.75rem; inset-block-start: 0.75rem;
inset-inline-start: 50%; inset-inline-start: 50%;
@@ -1251,6 +1258,7 @@ defineExpose({
display: block; display: block;
border: 2px solid var(--agent-assistant-robot-outline); border: 2px solid var(--agent-assistant-robot-outline);
border-radius: 0.65rem 0.65rem 0.55rem 0.55rem; border-radius: 0.65rem 0.65rem 0.55rem 0.55rem;
animation: agent-fab-body-idle 4.2s ease-in-out infinite;
background: linear-gradient( background: linear-gradient(
145deg, 145deg,
var(--agent-assistant-robot-shell-mid) 0%, var(--agent-assistant-robot-shell-mid) 0%,
@@ -1263,7 +1271,6 @@ defineExpose({
inline-size: 1.88rem; inline-size: 1.88rem;
inset-block-start: 3.24rem; inset-block-start: 3.24rem;
inset-inline-start: 1.32rem; inset-inline-start: 1.32rem;
animation: agent-fab-body-idle 4.2s ease-in-out infinite;
transform: translate(var(--agent-assistant-body-x), var(--agent-assistant-body-y)); transform: translate(var(--agent-assistant-body-x), var(--agent-assistant-body-y));
transform-origin: 50% 18%; transform-origin: 50% 18%;
transition: transition:
@@ -1380,10 +1387,7 @@ defineExpose({
} }
.agent-assistant-fab.is-docked .agent-assistant-fab__eye { .agent-assistant-fab.is-docked .agent-assistant-fab__eye {
transform: translate( transform: translate(calc(var(--agent-assistant-eye-x) * 0.24 - 0.22rem), calc(var(--agent-assistant-eye-y) * 0.24));
calc(var(--agent-assistant-eye-x) * 0.24 - 0.22rem),
calc(var(--agent-assistant-eye-y) * 0.24)
);
} }
.agent-assistant-fab.is-docked .agent-assistant-fab__body, .agent-assistant-fab.is-docked .agent-assistant-fab__body,
@@ -2155,23 +2159,27 @@ defineExpose({
9%, 9%,
37%, 37%,
65% { 65% {
transform: translateY(0.22rem) scale(var(--agent-assistant-bot-scale)) rotate(calc(var(--agent-assistant-robot-tilt) - 3deg)); transform: translateY(0.22rem) scale(var(--agent-assistant-bot-scale))
rotate(calc(var(--agent-assistant-robot-tilt) - 3deg));
} }
20%, 20%,
48%, 48%,
76% { 76% {
transform: translateY(-0.76rem) scale(var(--agent-assistant-bot-scale)) rotate(calc(var(--agent-assistant-robot-tilt) + 4deg)); transform: translateY(-0.76rem) scale(var(--agent-assistant-bot-scale))
rotate(calc(var(--agent-assistant-robot-tilt) + 4deg));
} }
29%, 29%,
57%, 57%,
85% { 85% {
transform: translateY(0.1rem) scale(var(--agent-assistant-bot-scale)) rotate(calc(var(--agent-assistant-robot-tilt) - 2deg)); transform: translateY(0.1rem) scale(var(--agent-assistant-bot-scale))
rotate(calc(var(--agent-assistant-robot-tilt) - 2deg));
} }
92% { 92% {
transform: translateY(-0.1rem) scale(var(--agent-assistant-bot-scale)) rotate(calc(var(--agent-assistant-robot-tilt) + 1deg)); transform: translateY(-0.1rem) scale(var(--agent-assistant-bot-scale))
rotate(calc(var(--agent-assistant-robot-tilt) + 1deg));
} }
} }
@@ -2287,19 +2295,22 @@ defineExpose({
9%, 9%,
37%, 37%,
65% { 65% {
transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) + 0.18rem)) scaleY(0.84) rotate(-2deg); transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) + 0.18rem)) scaleY(0.84)
rotate(-2deg);
} }
20%, 20%,
48%, 48%,
76% { 76% {
transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) - 0.1rem)) scaleY(1.08) rotate(4deg); transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) - 0.1rem)) scaleY(1.08)
rotate(4deg);
} }
29%, 29%,
57%, 57%,
85% { 85% {
transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) + 0.08rem)) scaleY(0.94) rotate(-3deg); transform: translate(var(--agent-assistant-body-x), calc(var(--agent-assistant-body-y) + 0.08rem)) scaleY(0.94)
rotate(-3deg);
} }
} }
@@ -2443,9 +2454,9 @@ defineExpose({
.agent-assistant-fab__bubbles { .agent-assistant-fab__bubbles {
gap: 0.38rem; gap: 0.38rem;
inline-size: min(9.6rem, calc(100vw - 5.6rem)); inline-size: min(16.5rem, calc(100vw - 5.6rem));
inset-inline-end: 2.35rem; inset-inline-end: 2.35rem;
max-block-size: min(18rem, calc(100vh - 9.2rem)); max-block-size: min(30rem, calc(100vh - 9.2rem));
} }
.agent-assistant-fab__bubble { .agent-assistant-fab__bubble {
@@ -2453,12 +2464,12 @@ defineExpose({
padding-inline: 0.72rem 1.62rem; padding-inline: 0.72rem 1.62rem;
} }
.agent-assistant-fab__bubble strong { .agent-assistant-fab__bubble-title {
font-size: 0.8rem; font-size: 1.05rem;
} }
.agent-assistant-fab__bubble span { .agent-assistant-fab__bubble > span {
font-size: 0.68rem; font-size: 1rem;
} }
.agent-assistant-fab__trigger { .agent-assistant-fab__trigger {