From 7e3e95fbcdfc62883b2f24e498140ae0db9051f7 Mon Sep 17 00:00:00 2001 From: jxxghp Date: Thu, 30 Jul 2026 16:42:43 +0800 Subject: [PATCH] Theme agent robot colors dynamically --- src/components/agent/AgentAssistantEntry.vue | 23 ++++++++++--------- src/components/agent/AgentAssistantPanel.vue | 19 +++++++-------- .../agent/pet/renderers/cssRobotBase.scss | 6 ++--- 3 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/agent/AgentAssistantEntry.vue b/src/components/agent/AgentAssistantEntry.vue index 825432f6..9d0a2114 100644 --- a/src/components/agent/AgentAssistantEntry.vue +++ b/src/components/agent/AgentAssistantEntry.vue @@ -1573,17 +1573,18 @@ defineExpose({ /* 保持机器人和提示气泡高于 Vuetify 弹窗（2400）及全局 Toast（2500）。 */ z-index: 2600; - --agent-assistant-robot-outline: #5b00c5; - --agent-assistant-robot-outline-soft: #7432df; - --agent-assistant-robot-shell-start: #d3bbff; - --agent-assistant-robot-shell-mid: #a576ff; - --agent-assistant-robot-shell-end: #8d51f9; - --agent-assistant-robot-face-start: #24124e; - --agent-assistant-robot-face-end: #100525; - --agent-assistant-robot-eye: #f1dcff; - --agent-assistant-robot-play: #fff; - --agent-assistant-robot-shadow: rgba(54, 0, 126, 28%); - --agent-assistant-robot-shadow-strong: rgba(54, 0, 126, 34%); + --agent-assistant-robot-outline: color-mix(in srgb, rgb(var(--v-theme-primary)) 72%, #090510 28%); + --agent-assistant-robot-outline-soft: color-mix(in srgb, rgb(var(--v-theme-primary)) 84%, #090510 16%); + --agent-assistant-robot-shell-start: color-mix(in srgb, rgb(var(--v-theme-primary)) 38%, white 62%); + --agent-assistant-robot-shell-mid: color-mix(in srgb, rgb(var(--v-theme-primary)) 74%, white 26%); + --agent-assistant-robot-shell-end: rgb(var(--v-theme-primary)); + --agent-assistant-robot-face-start: color-mix(in srgb, rgb(var(--v-theme-primary)) 30%, #080a12 70%); + --agent-assistant-robot-face-end: color-mix(in srgb, rgb(var(--v-theme-primary)) 14%, #03050a 86%); + --agent-assistant-robot-eye: color-mix(in srgb, rgb(var(--v-theme-primary)) 12%, white 88%); + --agent-assistant-robot-play: rgb(var(--v-theme-on-primary)); + --agent-assistant-robot-shadow: color-mix(in srgb, rgb(var(--v-theme-primary)) 28%, transparent); + --agent-assistant-robot-shadow-strong: color-mix(in srgb, rgb(var(--v-theme-primary)) 36%, transparent); + --agent-assistant-robot-shade: color-mix(in srgb, rgb(var(--v-theme-primary)) 25%, transparent); --agent-assistant-bubble-bg: rgba(var(--v-theme-surface), 0.92); --agent-assistant-bot-scale: 1; --agent-assistant-bot-pressed-scale: 0.96; diff --git a/src/components/agent/AgentAssistantPanel.vue b/src/components/agent/AgentAssistantPanel.vue index b1a5b6ae..dc547538 100644 --- a/src/components/agent/AgentAssistantPanel.vue +++ b/src/components/agent/AgentAssistantPanel.vue @@ -2425,14 +2425,15 @@ onScopeDispose(() => { justify-content: center; border-radius: var(--app-control-radius); - --agent-assistant-mini-robot-outline: #5b00c5; - --agent-assistant-mini-robot-outline-soft: #7432df; - --agent-assistant-mini-robot-shell-start: #d3bbff; - --agent-assistant-mini-robot-shell-mid: #a576ff; - --agent-assistant-mini-robot-shell-end: #8d51f9; - --agent-assistant-mini-robot-face-start: #24124e; - --agent-assistant-mini-robot-face-end: #100525; - --agent-assistant-mini-robot-eye: #f1dcff; + --agent-assistant-mini-robot-outline: color-mix(in srgb, rgb(var(--v-theme-primary)) 72%, #090510 28%); + --agent-assistant-mini-robot-outline-soft: color-mix(in srgb, rgb(var(--v-theme-primary)) 84%, #090510 16%); + --agent-assistant-mini-robot-shell-start: color-mix(in srgb, rgb(var(--v-theme-primary)) 38%, white 62%); + --agent-assistant-mini-robot-shell-mid: color-mix(in srgb, rgb(var(--v-theme-primary)) 74%, white 26%); + --agent-assistant-mini-robot-shell-end: rgb(var(--v-theme-primary)); + --agent-assistant-mini-robot-face-start: color-mix(in srgb, rgb(var(--v-theme-primary)) 30%, #080a12 70%); + --agent-assistant-mini-robot-face-end: color-mix(in srgb, rgb(var(--v-theme-primary)) 14%, #03050a 86%); + --agent-assistant-mini-robot-eye: color-mix(in srgb, rgb(var(--v-theme-primary)) 12%, white 88%); + --agent-assistant-mini-robot-shade: color-mix(in srgb, rgb(var(--v-theme-primary)) 22%, transparent); background: rgba(var(--v-theme-primary), 0.12); block-size: 2.5rem; @@ -2489,7 +2490,7 @@ onScopeDispose(() => { ); block-size: 1.04rem; box-shadow: - inset 0 -0.12rem 0 rgba(54, 0, 126, 22%), + inset 0 -0.12rem 0 var(--agent-assistant-mini-robot-shade), inset 0.08rem 0.08rem 0 rgba(255, 255, 255, 22%); inline-size: 1.45rem; inset-block-start: 0.42rem; diff --git a/src/components/agent/pet/renderers/cssRobotBase.scss b/src/components/agent/pet/renderers/cssRobotBase.scss index 9eb50423..9f818851 100644 --- a/src/components/agent/pet/renderers/cssRobotBase.scss +++ b/src/components/agent/pet/renderers/cssRobotBase.scss @@ -64,7 +64,7 @@ ); block-size: 2.05rem; box-shadow: - inset 0 -0.2rem 0 rgba(54, 0, 126, 26%), + inset 0 -0.2rem 0 var(--agent-assistant-robot-shade), inset 0.15rem 0.14rem 0 rgba(255, 255, 255, 24%); inline-size: 2.82rem; inset-block-start: 1.42rem; @@ -140,7 +140,7 @@ ); block-size: 1.34rem; box-shadow: - inset 0 -0.18rem 0 rgba(54, 0, 126, 24%), + inset 0 -0.18rem 0 var(--agent-assistant-robot-shade), inset 0.16rem 0.12rem 0 rgba(255, 255, 255, 24%); inline-size: 1.88rem; inset-block-start: 3.24rem; @@ -186,7 +186,7 @@ var(--agent-assistant-robot-shell-mid) 0%, var(--agent-assistant-robot-outline-soft) 100% ); - box-shadow: inset 0 -0.12rem 0 rgba(54, 0, 126, 24%); + box-shadow: inset 0 -0.12rem 0 var(--agent-assistant-robot-shade); transition: opacity 0.2s ease, transform 0.22s ease;