From 59edf69edcd427aa23e0b1237d9425ca0d0fedbe Mon Sep 17 00:00:00 2001 From: ulleo Date: Tue, 15 Jul 2025 19:23:13 +0800 Subject: [PATCH] feat: chat css --- frontend/src/i18n/en.json | 3 +- frontend/src/i18n/zh-CN.json | 3 +- frontend/src/views/chat/ChatRow.vue | 37 +--- .../src/views/chat/chat-block/UserChat.vue | 2 +- frontend/src/views/chat/index.vue | 202 ++++++++++-------- 5 files changed, 131 insertions(+), 116 deletions(-) diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json index 8e3d6560..95d3df7f 100644 --- a/frontend/src/i18n/en.json +++ b/frontend/src/i18n/en.json @@ -49,6 +49,7 @@ }, "qa": { "new_chat": "New Chat", + "start_sqlbot": "Start SQLBot", "title": "Smart Query", "placeholder": "Enter your question", "ask": "Ask", @@ -57,7 +58,7 @@ "error": "An error occurred, please try again later", "question_placeholder": "Press Enter to submit, or use Ctrl + Enter for new line", "greeting": "Hi, I'm SQLBot, nice to serve you", - "description": "I can help query data, generate charts, detect data anomalies, predict data, etc. Please select a data source to start smart querying~", + "hint_description": "I can help query data, generate charts, detect data anomalies, predict data, etc. Please select a data source to start smart querying~", "select_datasource": "Select Data Source", "view_more": "View More", "selected_datasource": "Selected Data Source", diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json index 56fb28da..b52b3a3d 100644 --- a/frontend/src/i18n/zh-CN.json +++ b/frontend/src/i18n/zh-CN.json @@ -52,6 +52,7 @@ }, "qa": { "new_chat": "新建对话", + "start_sqlbot": "开启问数", "title": "智能问数", "placeholder": "请输入您的问题", "ask": "提问", @@ -60,7 +61,7 @@ "error": "发生错误，请稍后再试", "question_placeholder": "按下 Enter 提交问题, 或使用 Ctrl + Enter 换行", "greeting": "你好，我是SQLBot，很高兴为你服务", - "description": "我可以帮忙查询数据、生成图表、检测数据异常、预测数据等，请选择一个数据源，开启智能问数吧～", + "hint_description": "我可以查询数据、生成图表、检测数据异常、预测数据等，请选择一个数据源，开启智能问数吧～", "select_datasource": "选择数据源", "view_more": "查看更多", "selected_datasource": "已选择数据源", diff --git a/frontend/src/views/chat/ChatRow.vue b/frontend/src/views/chat/ChatRow.vue index c21b4c6d..99da6724 100644 --- a/frontend/src/views/chat/ChatRow.vue +++ b/frontend/src/views/chat/ChatRow.vue @@ -24,23 +24,9 @@ withDefaults( - - - - - - - - - - - - - - - - - +
+ +
@@ -51,7 +37,9 @@ withDefaults( align-items: flex-start; gap: 8px; - padding: 20px 20px 0; + padding: 20px 0 0; + max-width: 800px; + width: 100%; &.right-to-left { flex-direction: row-reverse; @@ -61,14 +49,11 @@ withDefaults( flex: 1; width: 0; } -} -.ai-avatar { - font-size: 28px; - background: transparent; -} - -.user-avatar { - font-size: 28px; + .ai-avatar { + font-size: 28px; + background: transparent; + width: 28px; + } } diff --git a/frontend/src/views/chat/chat-block/UserChat.vue b/frontend/src/views/chat/chat-block/UserChat.vue index e27d4b18..aac69cc4 100644 --- a/frontend/src/views/chat/chat-block/UserChat.vue +++ b/frontend/src/views/chat/chat-block/UserChat.vue @@ -33,7 +33,7 @@ function clickPredict() { flex-direction: row; gap: 8px; border-radius: 16px; - height: 48px; + min-height: 48px; line-height: 24px; font-size: 16px; padding: 12px 16px; diff --git a/frontend/src/views/chat/index.vue b/frontend/src/views/chat/index.vue index 4d7de5ad..65446265 100644 --- a/frontend/src/views/chat/index.vue +++ b/frontend/src/views/chat/index.vue @@ -59,11 +59,15 @@ class="chat-record-list" :class="{ 'hide-sidebar': !isAssistant && !chatListSideBarShow }" > -
+
- -
{{ t('qa.greeting') }}
-
{{ t('qa.description') }}
+
+ + + + {{ t('qa.greeting') }} +
+
{{ t('qa.hint_description') }}
- + - {{ t('qa.new_chat') }} + {{ t('qa.start_sqlbot') }}
+
+ +
- +
import { computed, nextTick, onMounted, ref } from 'vue' -import { Plus, Position } from '@element-plus/icons-vue' +import { Position } from '@element-plus/icons-vue' import { Chat, chatApi, ChatInfo, type ChatMessage, ChatRecord, questionApi } from '@/api/chat' import ChatRow from './ChatRow.vue' import ChatAnswer from './ChatAnswer.vue' @@ -213,6 +222,8 @@ import { useI18n } from 'vue-i18n' import { endsWith, find, startsWith } from 'lodash-es' import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg' import icon_sidebar_outlined from '@/assets/svg/icon_sidebar_outlined.svg' +import logo_fold from '@/assets/LOGO-fold.svg' +import logo from '@/assets/LOGO.svg' import { useAssistantStore } from '@/stores/assistant' const assistantStore = useAssistantStore() @@ -876,6 +887,19 @@ defineExpose({ } } + .chat-scroll { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding-left: 56px; + padding-right: 56px; + + &.no-sidebar { + padding-left: 96px; + } + } + .chat-footer { --ed-footer-height: 120px; @@ -929,22 +953,26 @@ defineExpose({ padding: 12px; width: fit-content; + max-width: 800px; display: flex; gap: 16px; align-items: center; flex-direction: column; - .logo { - line-height: 60px; - font-size: 3em; - font-weight: bold; - color: var(--el-color-primary); - text-align: left; + .greeting { + display: flex; + align-items: center; + gap: 16px; + line-height: 32px; + font-size: 24px; + font-weight: 600; + color: rgba(31, 35, 41, 1); } .sub { color: grey; - font-size: 0.8em; + font-size: 16px; + line-height: 24px; } } }