fix(dashboard): improve ChatInput dark mode styling and placeholder visibility

- Use semi-transparent dark background in input container
- Add backdrop blur and glow effects
- Fix placeholder text color in dark mode
This commit is contained in:
LIghtJUNction
2026-03-29 18:15:52 +08:00
parent a9d657520c
commit 15e3c12eab
4 changed files with 30 additions and 6 deletions

View File

@@ -14,7 +14,7 @@
border: isDark ? 'none' : '1px solid #e0e0e0',
borderRadius: '24px',
boxShadow: isDark ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.1)',
backgroundColor: isDark ? '#2d2d2d' : 'transparent',
backgroundColor: isDark ? 'rgba(15, 15, 22, 0.6)' : 'transparent',
position: 'relative',
}"
>
@@ -579,6 +579,20 @@ defineExpose({
</script>
<style scoped>
/* Dark mode input container glass */
:deep(.input-container) {
background: rgba(15, 15, 22, 0.6) !important;
backdrop-filter: blur(16px) saturate(1.2) !important;
border: 1px solid rgba(0, 242, 255, 0.08) !important;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}
/* Fix placeholder visibility in dark mode */
.chat-textarea::placeholder {
color: rgba(228, 225, 230, 0.35) !important;
opacity: 1 !important;
}
.input-area {
padding: 16px;
background-color: transparent;

View File

@@ -28,7 +28,10 @@
<div
class="message-bubble user-bubble"
:class="{ 'has-audio': hasAudio(msg.content.message) }"
:style="{ backgroundColor: 'rgb(var(--v-theme-chatMessageBubble))' }"
:style="{
backgroundColor: 'var(--v-theme-chatMessageBubble)',
color: 'rgba(228, 225, 230, 0.9) !important',
}"
>
<!-- 遍历 message parts -->
<template
@@ -182,7 +185,13 @@
</v-icon>
</v-avatar>
<div class="bot-message-content">
<div class="message-bubble bot-bubble">
<div
class="message-bubble bot-bubble"
:style="{
backgroundColor: 'var(--v-theme-chatAssistantBubble)',
color: 'rgba(228, 225, 230, 0.9) !important',
}"
>
<!-- Loading state -->
<div v-if="msg.content.isLoading" class="loading-container">
<span class="loading-text">{{ tm("message.loading") }}</span>

View File

@@ -48,7 +48,7 @@
<template #prepend>
<img
:src="
getPlatformIcon(platformTemplates[item.raw].type)
getPlatformIcon(platformTemplates[item.raw]?.type)
"
style="
width: 32px;
@@ -543,6 +543,7 @@ import ConfigPage from "@/views/ConfigPage.vue";
export default {
name: "AddNewPlatform",
components: { AstrBotConfig, AstrBotCoreConfigWrapper, ConfigPage },
emits: ["update:show", "show-toast", "refresh-config"],
props: {
show: {
type: Boolean,

View File

@@ -233,8 +233,8 @@ const emitDeleteSource = (source) => emit("delete-provider-source", source);
}
.provider-source-list-item--active {
background-color: #e8f0fe;
border: 1px solid rgba(var(--v-theme-primary), 0.25);
background-color: rgba(var(--v-theme-primary), 0.1) !important;
border: 1px solid rgba(var(--v-theme-primary), 0.2) !important;
}
@media (max-width: 960px) {