fix(ai-assistant): 修复深色模式反转样式和交互优化

- 将 no-dark-content 类从容器移动到 SVG 元素,修复深色模式样式问题
  - 添加深色模式反转时的悬浮按钮和聊天窗口样式适配
  - 支持 Escape 键关闭聊天模式窗口
  - 移除多余空白行
This commit is contained in:
kuaifan 2026-01-16 01:07:54 +08:00
parent 138336711f
commit f4f9ee1d3d
2 changed files with 29 additions and 7 deletions

View File

@ -3,10 +3,10 @@
<div
v-if="visible"
ref="floatBtn"
class="ai-float-button no-dark-content"
class="ai-float-button"
:style="btnStyle"
@mousedown.stop.prevent="onMouseDown">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<svg class="no-dark-content" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M385.80516777 713.87417358c-12.76971517 0-24.13100586-7.79328205-28.82575409-19.62404756l-48.91927648-123.9413531c-18.40341303-46.75969229-55.77360888-84.0359932-102.53330118-102.53330117l-123.94135309-48.91927649c-11.83076552-4.69474822-19.62404757-16.05603892-19.62404757-28.8257541s7.79328205-24.13100586 19.62404757-28.82575407l123.94135309-48.91927649c46.75969229-18.40341303 84.0359932-55.77360888 102.53330118-102.53330119l48.91927648-123.94135308c4.69474822-11.83076552 16.05603892-19.62404757 28.8257541-19.62404757s24.13100586 7.79328205 28.82575408 19.62404757l48.91927648 123.94135308c18.40341303 46.75969229 55.77360888 84.0359932 102.53330118 102.53330119l123.94135309 48.91927649c11.83076552 4.69474822 19.62404757 16.05603892 19.62404757 28.82575407 0 12.76971517-7.79328205 24.13100586-19.62404757 28.8257541l-123.94135309 48.91927649c-46.75969229 18.40341303-84.0359932 55.77360888-102.53330118 102.53330117l-48.91927648 123.9413531c-4.69474822 11.83076552-16.14993388 19.62404757-28.82575408 19.62404756zM177.45224165 390.12433614l50.89107073 20.0935224c62.62794129 24.69437565 112.67395736 74.74039171 137.368333 137.36833299l20.09352239 50.89107073 20.0935224-50.89107073c24.69437565-62.62794129 74.74039171-112.67395736 137.368333-137.36833299l50.89107072-20.0935224-50.89107073-20.09352239c-62.62794129-24.69437565-112.67395736-74.74039171-137.36833299-137.36833301l-20.09352239-50.89107074-20.0935224 50.89107074c-24.69437565 62.62794129-74.74039171 112.67395736-137.368333 137.36833301l-50.89107073 20.09352239zM771.33789183 957.62550131c-12.76971517 0-24.13100586-7.79328205-28.82575409-19.62404758l-26.6661699-67.6043744c-8.63833672-21.87752672-26.10280012-39.34199011-47.98032684-47.98032684l-67.60437441-26.6661699c-11.83076552-4.69474822-19.62404757-16.05603892-19.62404757-28.82575409s7.79328205-24.13100586 19.62404757-28.82575409l67.60437441-26.6661699c21.87752672-8.63833672 39.34199011-26.10280012 47.98032684-47.98032685l26.6661699-67.6043744c4.69474822-11.83076552 16.05603892-19.62404757 28.82575409-19.62404757s24.13100586 7.79328205 28.82575409 19.62404757l26.66616991 67.6043744c8.63833672 21.87752672 26.10280012 39.34199011 47.98032684 47.98032685l67.6043744 26.6661699c11.83076552 4.69474822 19.62404757 16.05603892 19.62404757 28.82575409s-7.79328205 24.13100586-19.62404757 28.82575409l-67.6043744 26.6661699c-21.87752672 8.63833672-39.34199011 26.10280012-47.98032684 47.98032684l-26.66616991 67.6043744c-4.69474822 11.83076552-16.14993388 19.62404757-28.82575409 19.62404758z m-75.58544639-190.70067281c33.61439727 14.83540438 60.75004201 41.87715415 75.49155143 75.49155143 14.83540438-33.61439727 41.87715415-60.75004201 75.49155142-75.49155143-33.61439727-14.83540438-60.75004201-41.87715415-75.49155142-75.49155143-14.74150942 33.61439727-41.87715415 60.75004201-75.49155143 75.49155143z"/>
</svg>
</div>
@ -269,7 +269,7 @@ export default {
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.ai-float-button {
position: fixed;
z-index: 1000;
@ -298,4 +298,12 @@ export default {
fill: #fff;
}
}
body.dark-mode-reverse {
.ai-float-button {
box-shadow: none;
&:hover {
box-shadow: none;
}
}
}
</style>

View File

@ -480,9 +480,13 @@ export default {
* 注意输入法组合输入时如中文候选字不发送
*/
onInputKeydown(e) {
if (e.key === 'Enter' && !e.shiftKey && !this.isComposing) {
e.preventDefault();
this.onSubmit();
if (!e.shiftKey && !this.isComposing) {
if (e.key === 'Enter') {
e.preventDefault();
this.onSubmit();
} else if (e.key === 'Escape' && this.displayMode === 'chat') {
this.showModal = false;
}
}
},
@ -1626,6 +1630,16 @@ export default {
}
body.dark-mode-reverse {
.ai-assistant-content {
.ai-assistant-welcome,
.ai-assistant-output {
background-color: #f5f5f5;
}
}
.ai-assistant-chat {
background-color: #e9e9e9;
box-shadow: none;
}
.ai-assistant-modal {
--apply-reasoning-before-bg: #4e4e56;
}