-
+
+
+
![]()
{
@click="toChatIndex"
/>
+
+
= {
+ claude: '#cc785c', // Coral (DESIGN_CLAUDE.md)
+ apple: '#0066cc', // Action Blue (DESIGN_APPLE.md)
+ notion: '#7c66dc', // Notion Purple (DESIGN_NOTION.md)
+ airbnb: '#ff385c', // Rausch (DESIGN_AIRBNB.md)
+}
+
+export function isUiThemeId(v: string | null | undefined): v is UiThemeId {
+ return v === 'claude' || v === 'apple' || v === 'notion' || v === 'airbnb'
+}
+
+export function getThemePrimaryHex(id: UiThemeId): string {
+ return THEME_PRIMARY_HEX[id]
+}
+
+export function getStoredUiTheme(): UiThemeId {
+ try {
+ const raw = localStorage.getItem(UI_THEME_STORAGE_KEY)
+ if (isUiThemeId(raw)) return raw
+ } catch {
+ /* ignore */
+ }
+ return 'claude'
+}
+
+/** Build a data: URL favicon tinted with the given hex color. Mirrors logo-custom_small.svg geometry. */
+function buildThemedFaviconDataUrl(color: string): string {
+ const svg = ``
+ return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
+}
+
+/** Update with a themed favicon. Skipped if a non-themed icon was set externally. */
+export function applyThemedFavicon(color: string) {
+ const link = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null
+ if (!link) return
+ if (link.dataset.themed === undefined && link.getAttribute('href')) {
+ /* If a server-uploaded favicon already exists (no themed flag), keep it */
+ const href = link.getAttribute('href') || ''
+ if (href && !href.startsWith('data:') && !href.endsWith('LOGO-fold.svg')) return
+ }
+ link.setAttribute('href', buildThemedFaviconDataUrl(color))
+ link.setAttribute('type', 'image/svg+xml')
+ link.dataset.themed = 'true'
+}
+
+/** Sets data-ui-theme, localStorage, primary color variables, and favicon. */
+export function applyUiTheme(id: UiThemeId) {
+ try {
+ localStorage.setItem(UI_THEME_STORAGE_KEY, id)
+ } catch {
+ /* ignore */
+ }
+ document.documentElement.setAttribute('data-ui-theme', id)
+ setCurrentColor(THEME_PRIMARY_HEX[id])
+ applyThemedFavicon(THEME_PRIMARY_HEX[id])
+}
+
+/** Call after appearance API sets server theme so user UI preset wins */
+export function reapplyUiThemePrimary() {
+ applyUiTheme(getStoredUiTheme())
+}
+
+export function initUiThemeFromStorage() {
+ const id = getStoredUiTheme()
+ document.documentElement.setAttribute('data-ui-theme', id)
+ setCurrentColor(THEME_PRIMARY_HEX[id])
+ applyThemedFavicon(THEME_PRIMARY_HEX[id])
+}
diff --git a/frontend/src/views/chat/ChatList.vue b/frontend/src/views/chat/ChatList.vue
index c2a98aa3b..2e337c14d 100644
--- a/frontend/src/views/chat/ChatList.vue
+++ b/frontend/src/views/chat/ChatList.vue
@@ -296,12 +296,13 @@ const handleConfirmPassword = () => {
padding-left: 16px;
padding-right: 16px;
+ padding-top: 2px;
width: 100%;
display: flex;
flex-direction: column;
- gap: 16px;
+ gap: 8px;
.group {
display: flex;
@@ -310,11 +311,11 @@ const handleConfirmPassword = () => {
.group-title {
padding: 0 8px;
color: rgba(100, 106, 115, 1);
- line-height: 20px;
+ line-height: 18px;
font-weight: 500;
font-size: 12px;
- margin-bottom: 4px;
+ margin-bottom: 2px;
.expand {
transform: rotate(-90deg);
diff --git a/frontend/src/views/chat/ChatListContainer.vue b/frontend/src/views/chat/ChatListContainer.vue
index d318f6e86..3a25c6a50 100644
--- a/frontend/src/views/chat/ChatListContainer.vue
+++ b/frontend/src/views/chat/ChatListContainer.vue
@@ -8,10 +8,6 @@ import { filter, includes } from 'lodash-es'
import ChatCreator from '@/views/chat/ChatCreator.vue'
import { useAssistantStore } from '@/stores/assistant'
import icon_sidebar_outlined from '@/assets/svg/icon_sidebar_outlined.svg'
-import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
-import { useUserStore } from '@/stores/user'
-import router from '@/router'
-const userStore = useUserStore()
const props = withDefaults(
defineProps<{
inPopover?: boolean
@@ -20,6 +16,8 @@ const props = withDefaults(
currentChat?: ChatInfo
loading?: boolean
appName?: string
+ /** 会话列表停靠在 layout 左侧槽位（与主导航同列） */
+ layoutDocked?: boolean
}>(),
{
chatList: () => [],
@@ -28,6 +26,7 @@ const props = withDefaults(
loading: false,
inPopover: false,
appName: '',
+ layoutDocked: false,
}
)
@@ -119,44 +118,6 @@ function goEmpty(func?: (...p: any[]) => void, ...params: any[]) {
emits('goEmpty', func, ...params)
}
-const createNewChat = async () => {
- try {
- await chatApi.checkLLMModel()
- } catch (error: any) {
- console.error(error)
- let errorMsg = t('model.default_miss')
- let confirm_text = t('datasource.got_it')
- if (userStore.isAdmin) {
- errorMsg = t('model.default_miss_admin')
- confirm_text = t('model.to_config')
- }
- ElMessageBox.confirm(t('qa.ask_failed'), {
- confirmButtonType: 'primary',
- tip: errorMsg,
- showCancelButton: userStore.isAdmin,
- confirmButtonText: confirm_text,
- cancelButtonText: t('common.cancel'),
- customClass: 'confirm-no_icon',
- autofocus: false,
- showClose: false,
- callback: (val: string) => {
- if (userStore.isAdmin && val === 'confirm') {
- router.push('/system/model')
- }
- },
- })
- return
- }
- goEmpty(doCreateNewChat)
-}
-
-async function doCreateNewChat() {
- if (!isCompletePage.value && !selectAssistantDs.value) {
- return
- }
- chatCreatorRef.value?.showDs()
-}
-
function onClickHistory(chat: Chat) {
if (chat !== undefined && chat.id !== undefined) {
if (_currentChatId.value === chat.id) {
@@ -217,9 +178,9 @@ function onChatRenamed(chat: Chat) {
-
-
-
-
+
-
+
+
+
+
+ {{ $t('qa.chat_history_section') }}
+
+ {
+
+
(getStoredUiTheme())
+const themeList = computed(() =>
+ UI_THEME_ORDER.map((id) => ({ id, name: t(`theme.${id}`) }))
+)
+
+function selectUiTheme(id: UiThemeId) {
+ applyUiTheme(id)
+ currentUiTheme.value = id
+ ElMessage.success(t('common.switch_success'))
+}
+
const toSystem = () => {
popoverRef.value.hide()
router.push('/system')
@@ -137,7 +156,7 @@ const logout = async () => {
+
@@ -181,6 +200,33 @@ const logout = async () => {
+ {{ account }}
-
+
- {{ $t('common.system_manage') }}
@@ -154,7 +173,7 @@ const logout = async () => {
API Key
+
+
+
+
+
+
+ {{ $t('common.ui_theme') }}
+
+
+
+
+
+
+ {{ ele.name }}
+
+
+
+
@@ -227,12 +188,6 @@ function onChatRenamed(chat: Chat) {
-
-
-
- {{ t('qa.new_chat') }}
-
import { ChatInfo, type ChatMessage } from '@/api/chat.ts'
-import logo_fold from '@/assets/LOGO-fold.svg'
import { useAppearanceStoreWithOut } from '@/stores/appearance'
import custom_small from '@/assets/svg/logo-custom_small.svg'
@@ -30,8 +29,7 @@ const appearanceStore = useAppearanceStoreWithOut()
height="28"
/>
-
{{ appName || t('qa.title') }}
diff --git a/frontend/src/views/chat/answer/BaseAnswer.vue b/frontend/src/views/chat/answer/BaseAnswer.vue
index cd957471d..8cd9057f0 100644
--- a/frontend/src/views/chat/answer/BaseAnswer.vue
+++ b/frontend/src/views/chat/answer/BaseAnswer.vue
@@ -107,16 +107,19 @@ onMounted(() => {
.thinking-btn {
height: 32px;
padding: 5px 12px;
-
- --ed-button-text-color: rgba(31, 35, 41, 1);
- --ed-button-hover-text-color: var(--ed-button-text-color);
- --ed-button-active-text-color: var(--ed-button-text-color);
- --ed-button-bg-color: rgba(255, 255, 255, 1);
- --ed-button-hover-bg-color: rgba(245, 246, 247, 1);
- --ed-button-active-bg-color: rgba(239, 240, 241, 1);
- --ed-button-border-color: rgba(217, 220, 223, 1);
- --ed-button-hover-border-color: var(--ed-button-border-color);
- --ed-button-active-border-color: var(--ed-button-border-color);
+ border-radius: 9999px;
+ background: var(--chat-bubble-assistant-bg);
+ border: 1px solid var(--color-hairline);
+
+ --ed-button-text-color: var(--color-muted);
+ --ed-button-hover-text-color: var(--color-ink);
+ --ed-button-active-text-color: var(--color-ink);
+ --ed-button-bg-color: var(--chat-bubble-assistant-bg);
+ --ed-button-hover-bg-color: var(--overlay-hover);
+ --ed-button-active-bg-color: var(--overlay-pressed);
+ --ed-button-border-color: var(--color-hairline);
+ --ed-button-hover-border-color: var(--color-hairline);
+ --ed-button-active-border-color: var(--color-hairline);
--ed-button-font-weight: 400;
@@ -125,9 +128,10 @@ onMounted(() => {
flex-direction: row;
align-items: center;
- line-height: 22px;
+ line-height: 1.29;
font-weight: 400;
font-size: 14px;
+ letter-spacing: -0.224px;
}
.btn-icon {
margin-left: 4px;
@@ -139,25 +143,26 @@ onMounted(() => {
display: flex;
flex-direction: column;
padding-left: 9px;
- border-left: 1px solid rgba(31, 35, 41, 0.15);
+ border-left: 1px solid var(--color-hairline);
gap: 8px;
.reasoning {
width: 100%;
- line-height: 22px;
+ line-height: 1.43;
font-weight: 400;
font-size: 14px;
- color: rgba(143, 149, 158, 1) !important;
+ color: var(--color-muted) !important;
.markdown-body {
- color: rgba(143, 149, 158, 1) !important;
- line-height: 22px;
+ color: var(--color-muted) !important;
+ line-height: 1.43;
font-weight: 400;
font-size: 14px;
+ letter-spacing: -0.224px;
}
padding-bottom: 8px;
- border-bottom: 1px solid rgba(31, 35, 41, 0.15);
+ border-bottom: 1px solid var(--color-hairline-soft);
&:last-child {
padding-bottom: unset;
@@ -169,10 +174,11 @@ onMounted(() => {
.answer-container {
width: 100%;
- line-height: 24px;
- font-size: 16px;
+ line-height: 1.47;
+ font-size: 17px;
font-weight: 400;
- color: rgba(31, 35, 41, 1);
+ letter-spacing: -0.374px;
+ color: var(--color-body);
}
}
diff --git a/frontend/src/views/chat/answer/ChartAnswer.vue b/frontend/src/views/chat/answer/ChartAnswer.vue
index 5bec0b639..062be8e0b 100644
--- a/frontend/src/views/chat/answer/ChartAnswer.vue
+++ b/frontend/src/views/chat/answer/ChartAnswer.vue
@@ -1,9 +1,9 @@
@@ -1142,8 +1378,193 @@ onMounted(() => {
.chat-container {
height: 100%;
position: relative;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
border-radius: 12px;
+
+ .chat-inner-wrap {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .chat-record-list--with-toolbar {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+ }
+
+ .chat-main-top-toolbar {
+ flex-shrink: 0;
+ padding: 12px 16px 4px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ }
+
+ .chat-main-new-chat-btn {
+ border-radius: 8px;
+ border: none !important;
+ --ed-button-border-color: transparent;
+ --ed-button-hover-border-color: transparent;
+
+ &:focus,
+ &:focus-visible,
+ &:hover,
+ &:active {
+ border: none !important;
+ }
+ }
+
+ .welcome-content-block {
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding-top: 0;
+ padding-bottom: 24px;
+ }
+
+ .chat-home-stack {
+ width: 100%;
+ max-width: 880px;
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .chat-home-stack__top {
+ flex: 1 1 0;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .chat-home-stack__bottom {
+ position: relative;
+ z-index: 2;
+ margin-top: auto;
+ width: 100%;
+ padding-top: 24px;
+ padding-bottom: 8px;
+ }
+
+ .home-quick-cards-wrap {
+ margin-top: 28px;
+ width: 100%;
+ max-width: 880px;
+ padding: 0 16px 24px;
+ }
+
+ .home-quick-cards-title {
+ font-size: 13px;
+ font-weight: 500;
+ color: rgba(100, 106, 115, 1);
+ margin-bottom: 14px;
+ text-align: center;
+ letter-spacing: 0.02em;
+ }
+
+ .home-quick-cards-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+ }
+
+ @media (max-width: 640px) {
+ .home-quick-cards-grid {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ .home-quick-card {
+ text-align: left;
+ padding: 17px 16px;
+ border-radius: 18px;
+ border: 1px solid #e0e0e0;
+ background: #ffffff;
+ cursor: pointer;
+ transition:
+ border-color 0.15s,
+ background 0.15s;
+
+ &:hover {
+ border-color: #0066cc;
+ background: #ffffff;
+ }
+
+ &__row {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 8px;
+ width: 100%;
+ }
+
+ &__row--stack {
+ align-items: flex-start;
+ }
+
+ &__meta {
+ flex: 1;
+ min-width: 0;
+ word-break: break-word;
+ text-align: left;
+ line-height: 1.43;
+ }
+
+ &__ds {
+ color: #0066cc;
+ font-weight: 600;
+ font-size: 17px;
+ }
+
+ &__sep {
+ color: #86868b;
+ font-weight: 400;
+ }
+
+ &__title {
+ font-size: 17px;
+ font-weight: 400;
+ color: #1d1d1f;
+ line-height: 1.43;
+ flex: 1;
+ min-width: 0;
+ word-break: break-word;
+ text-align: left;
+ letter-spacing: -0.374px;
+ }
+
+ &__count {
+ flex-shrink: 0;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1.43;
+ color: #86868b;
+ padding: 0 8px;
+ border-radius: 10px;
+ background: rgba(0, 0, 0, 0.04);
+ }
+
+ &__desc {
+ font-size: 12px;
+ color: #86868b;
+ line-height: 20px;
+ }
+ }
.assistant-popover-sidebar {
button {
display: none;
@@ -1289,26 +1710,40 @@ onMounted(() => {
}
.input-area {
- border-color: #d9dcdf;
+ border-color: var(--color-hairline);
:deep(.ed-textarea__inner) {
- padding: 42px 12px 52px 12px;
- background: #f8f9fa;
- border-radius: 16px;
- line-height: 24px;
+ padding: 12px 60px 12px 20px;
+ background: var(--color-canvas);
+ border-radius: var(--radius-xl);
+ line-height: 1.47;
+ font-size: 16px;
+ border: 1px solid var(--color-hairline);
+
+ &::placeholder {
+ color: var(--color-muted-soft);
+ font-size: 13px;
+ font-weight: 400;
+ letter-spacing: 0;
+ opacity: 0.75;
+ }
+ }
+
+ &.has-datasource :deep(.ed-textarea__inner) {
+ padding-top: 36px;
+ }
+
+ &.has-quick-question :deep(.ed-textarea__inner) {
+ padding-bottom: 64px;
}
&.is-assistant {
:deep(.ed-textarea__inner) {
- padding: 12px 12px 52px 12px;
font-weight: 400;
font-size: 16px;
- line-height: 24px;
- border-radius: 16px;
-
- &::placeholder {
- color: #8f959e;
- }
+ line-height: 1.47;
+ border-radius: var(--radius-xl);
+ letter-spacing: -0.01em;
}
}
}
@@ -1350,8 +1785,9 @@ onMounted(() => {
.tool-btn {
font-size: 14px;
font-weight: 400;
- line-height: 22px;
- color: rgba(100, 106, 115, 1);
+ letter-spacing: -0.224px;
+ line-height: 1.29;
+ color: #86868b;
.tool-btn-inner {
display: flex;
@@ -1360,10 +1796,12 @@ onMounted(() => {
}
&:hover {
- background: rgba(31, 35, 41, 0.1);
+ background: rgba(0, 0, 0, 0.04);
+ color: #1d1d1f;
}
&:active {
- background: rgba(31, 35, 41, 0.1);
+ background: rgba(0, 0, 0, 0.08);
+ color: #1d1d1f;
}
}
@@ -1374,7 +1812,7 @@ onMounted(() => {
.divider {
width: 1px;
height: 16px;
- border-left: 1px solid rgba(31, 35, 41, 0.15);
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
}
}
@@ -1444,8 +1882,9 @@ onMounted(() => {
.greeting-btn {
width: 100%;
height: 88px;
- border-radius: 16px;
- border-style: dashed;
+ border-radius: 18px;
+ background: #ffffff;
+ border: 1px solid #e0e0e0;
.inner-icon {
display: flex;
@@ -1455,19 +1894,21 @@ onMounted(() => {
margin-right: 6px;
}
- font-size: 16px;
- line-height: 24px;
- font-weight: 500;
-
- --ed-button-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
- --ed-button-hover-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
- --ed-button-active-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
- --ed-button-bg-color: rgba(248, 249, 250, 1);
- --ed-button-hover-bg-color: var(--ed-color-primary-1a, #1cba901a);
- --ed-button-border-color: rgba(217, 220, 223, 1);
- --ed-button-hover-border-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
- --ed-button-active-bg-color: var(--ed-color-primary-33, #1cba9033);
- --ed-button-active-border-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+ font-size: 17px;
+ line-height: 1.47;
+ font-weight: 400;
+ letter-spacing: -0.374px;
+ color: #1d1d1f;
+
+ --ed-button-text-color: #0066cc;
+ --ed-button-hover-text-color: #0066cc;
+ --ed-button-active-text-color: #0066cc;
+ --ed-button-bg-color: #ffffff;
+ --ed-button-hover-bg-color: rgba(0, 102, 204, 0.06);
+ --ed-button-border-color: #e0e0e0;
+ --ed-button-hover-border-color: #0066cc;
+ --ed-button-active-bg-color: rgba(0, 102, 204, 0.1);
+ --ed-button-active-border-color: #0066cc;
}
}
}
@@ -1485,9 +1926,10 @@ onMounted(() => {
}
.popover-chat_history {
- box-shadow: 0px 4px 8px 0px #1f23291a !important;
- border-radius: 12px !important;
+ border: 1px solid #e0e0e0;
+ border-radius: 18px !important;
overflow: hidden;
+ box-shadow: none !important;
}
.popover-chat_history_small {
diff --git a/frontend/src/views/dashboard/components/sq-view/index.vue b/frontend/src/views/dashboard/components/sq-view/index.vue
index d7d176cfd..78f62b14c 100644
--- a/frontend/src/views/dashboard/components/sq-view/index.vue
+++ b/frontend/src/views/dashboard/components/sq-view/index.vue
@@ -26,6 +26,7 @@ import ICON_TABLE from '@/assets/svg/chart/icon_form_outlined.svg'
import ICON_COLUMN from '@/assets/svg/chart/icon_dashboard_outlined.svg'
import ICON_BAR from '@/assets/svg/chart/icon_bar_outlined.svg'
import ICON_LINE from '@/assets/svg/chart/icon_chart-line.svg'
+import ICON_SCATTER from '@/assets/svg/chart/icon_scatter_outlined.svg'
import ICON_PIE from '@/assets/svg/chart/icon_pie_outlined.svg'
import type { ChartTypes } from '@/views/chat/component/BaseChart.ts'
const { t } = useI18n()
@@ -54,6 +55,7 @@ const chartTypeList = computed(() => {
case 'column':
case 'bar':
case 'line':
+ case 'scatter':
_list.push({
value: 'column',
name: t('chat.chart_type.column'),
@@ -69,6 +71,11 @@ const chartTypeList = computed(() => {
name: t('chat.chart_type.line'),
icon: ICON_LINE,
})
+ _list.push({
+ value: 'scatter',
+ name: t('chat.chart_type.scatter'),
+ icon: ICON_SCATTER,
+ })
break
case 'pie':
_list.push({
diff --git a/frontend/src/views/ds/DatasourceForm.vue b/frontend/src/views/ds/DatasourceForm.vue
index 240692d13..892824006 100644
--- a/frontend/src/views/ds/DatasourceForm.vue
+++ b/frontend/src/views/ds/DatasourceForm.vue
@@ -99,6 +99,13 @@ const rules = reactive({
trigger: 'blur',
},
],
+ filename: [
+ {
+ required: true,
+ message: t('datasource.please_enter') + t('common.empty') + t('ds.form.file_path'),
+ trigger: 'blur',
+ },
+ ],
})
const dialogVisible = ref(false)
@@ -647,7 +654,16 @@ defineExpose({
{{ $t('common.not_exceed_50mb') }}
-
+
-
+
diff --git a/frontend/src/views/ds/js/ds-type.ts b/frontend/src/views/ds/js/ds-type.ts
index 800fdefd4..b2d578b74 100644
--- a/frontend/src/views/ds/js/ds-type.ts
+++ b/frontend/src/views/ds/js/ds-type.ts
@@ -10,6 +10,8 @@ import redshift from '@/assets/datasource/icon_redshift.png'
import es from '@/assets/datasource/icon_es.png'
import kingbase from '@/assets/datasource/icon_kingbase.png'
import starrocks from '@/assets/datasource/icon_starrocks.png'
+import sqlite_icon from '@/assets/datasource/icon_sqlite.png'
+import hive_icon from '@/assets/datasource/icon_hive.png'
import { i18n } from '@/i18n'
const t = i18n.global.t
@@ -26,6 +28,8 @@ export const dsType = [
{ label: 'Elasticsearch', value: 'es' },
{ label: 'Kingbase', value: 'kingbase' },
{ label: 'StarRocks', value: 'starrocks' },
+ { label: 'SQLite', value: 'sqlite' },
+ { label: 'Apache Hive', value: 'hive' },
]
export const dsTypeWithImg = [
@@ -41,6 +45,8 @@ export const dsTypeWithImg = [
{ name: 'Elasticsearch', type: 'es', img: es },
{ name: 'Kingbase', type: 'kingbase', img: kingbase },
{ name: 'StarRocks', type: 'starrocks', img: starrocks },
+ { name: 'SQLite', type: 'sqlite', img: sqlite_icon },
+ { name: 'Apache Hive', type: 'hive', img: hive_icon },
]
export const haveSchema = ['sqlServer', 'pg', 'oracle', 'dm', 'redshift', 'kingbase']
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 104f12994..c55151d12 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -4,7 +4,7 @@
v-loading="true"
:element-loading-text="t('qa.loading')"
class="xpack-login-handler-mask"
- element-loading-background="#F5F6F7"
+ :element-loading-background="'var(--color-surface-soft)'"
>
+
+
+
+
@@ -16,12 +16,9 @@
![]()
{{ appearanceStore.slogan ?? $t('common.intelligent_questioning_platform') }}
@@ -79,7 +76,6 @@ import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useI18n } from 'vue-i18n'
import custom_small from '@/assets/svg/logo-custom_small.svg'
-import LOGO_fold from '@/assets/LOGO-fold.svg'
import login_image from '@/assets/embedded/login_image.png'
import { useAppearanceStoreWithOut } from '@/stores/appearance'
import loginImage from '@/assets/blue/login-image_blue.png'
@@ -131,7 +127,7 @@ const switchTab = (name: string) => {
.login-container {
height: 100vh;
width: 100vw;
- background-color: #fff;
+ background-color: var(--color-canvas);
display: flex;
align-items: center;
justify-content: center;
@@ -158,6 +154,15 @@ const switchTab = (name: string) => {
flex-direction: column;
position: relative;
+ .login-brand-name {
+ margin-left: 14px;
+ font-size: 28px;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+ font-family: var(--font-display);
+ color: var(--color-ink);
+ }
+
.login-logo-icon {
width: auto;
height: 52px;
@@ -170,16 +175,17 @@ const switchTab = (name: string) => {
font-weight: 400;
font-size: 14px;
line-height: 20px;
- color: #646a73;
+ color: var(--color-muted);
}
.login-form {
- border: 1px solid #dee0e3;
+ border: 1px solid var(--color-hairline);
padding: 40px;
width: 480px;
min-height: 392px;
- border-radius: 12px;
- box-shadow: 0px 6px 24px 0px #1f232914;
+ border-radius: var(--radius-lg);
+ box-shadow: var(--sqlbot-shadow-soft);
+ background: var(--chat-bubble-assistant-bg);
.form-content_error {
.ed-form-item--default {
@@ -191,24 +197,25 @@ const switchTab = (name: string) => {
}
.title {
- font-weight: 500;
- font-style: Medium;
+ font-weight: 600;
font-size: 20px;
line-height: 28px;
margin-bottom: 24px;
+ color: var(--color-ink);
+ font-family: var(--font-sans);
}
.login-btn {
width: 100%;
height: 40px;
font-size: 16px;
- border-radius: 4px;
+ border-radius: var(--radius-md);
}
.agreement {
margin-top: 20px;
text-align: center;
- color: #666;
+ color: var(--color-muted);
}
}
}
@@ -218,7 +225,7 @@ const switchTab = (name: string) => {
display: none;
}
:deep(.ed-input__wrapper) {
- background-color: #f5f7fa;
+ background-color: var(--color-surface-soft);
}
.xpack-login-handler-mask {
position: fixed;
diff --git a/frontend/src/views/system/embedded/SetUi.vue b/frontend/src/views/system/embedded/SetUi.vue
index c22cc1728..b1744a423 100644
--- a/frontend/src/views/system/embedded/SetUi.vue
+++ b/frontend/src/views/system/embedded/SetUi.vue
@@ -71,8 +71,8 @@ const defaultSqlBotForm = reactive({
float_icon_drag: false,
welcome: t('embedded.i_am_sqlbot'),
welcome_desc: t('embedded.data_analysis_now'),
- theme: '#1CBA90',
- header_font_color: '#1F2329',
+ theme: '#cc785c',
+ header_font_color: '#141413',
logo: '',
float_icon: '',
})
@@ -100,7 +100,7 @@ const init = () => {
? customColor
: themeColor === 'blue'
? '#3370ff'
- : '#1CBA90'
+ : '#cc785c'
sqlBotForm.theme = currentColor || sqlBotForm.theme
}
diff --git a/g2-ssr/app.js b/g2-ssr/app.js
index 734de7022..6592cca96 100644
--- a/g2-ssr/app.js
+++ b/g2-ssr/app.js
@@ -7,6 +7,7 @@ const { getPieOptions } = require('./charts/pie.js');
const { getLineOptions } = require('./charts/line.js');
const { getColumnOptions } = require('./charts/column.js');
const { getBarOptions } = require('./charts/bar.js');
+const { getScatterOptions } = require('./charts/scatter.js');
http.createServer((req, res) => {
res.statusCode = 200,
@@ -42,6 +43,8 @@ function getOptions(type, axis, data) {
return getLineOptions(base_options, axis, data);
case 'pie':
return getPieOptions(base_options, axis, data);
+ case 'scatter':
+ return getScatterOptions(base_options, axis, data);
}
return base_options
diff --git a/g2-ssr/charts/scatter.js b/g2-ssr/charts/scatter.js
new file mode 100644
index 000000000..85e342f2a
--- /dev/null
+++ b/g2-ssr/charts/scatter.js
@@ -0,0 +1,112 @@
+const { checkIsPercent, getAxesWithFilter, processMultiQuotaData } = require('./utils')
+
+function getScatterOptions(baseOptions, axis, data) {
+ const axes = getAxesWithFilter(axis)
+
+ if (axes.x.length === 0 || axes?.y?.length === 0) {
+ return
+ }
+
+ let config = {
+ data: data,
+ y: axes.y,
+ series: axes.series,
+ }
+ if (axes.multiQuota.length > 0) {
+ config = processMultiQuotaData(
+ axes.x,
+ config.y,
+ axes.multiQuota,
+ axes.multiQuotaName,
+ config.data,
+ )
+ }
+
+ const x = axes.x
+ const y = config.y
+ const series = config.series
+
+ const _data = checkIsPercent(y, config.data)
+
+ const options = {
+ ...baseOptions,
+ type: 'view',
+ data: _data.data,
+ encode: {
+ x: x[0].value,
+ y: y[0].value,
+ color: series.length > 0 ? series[0].value : undefined,
+ },
+ axis: {
+ x: {
+ title: x[0].name,
+ labelFontSize: 12,
+ labelAutoHide: {
+ type: 'hide',
+ keepHeader: true,
+ keepTail: true,
+ },
+ labelAutoRotate: false,
+ labelAutoWrap: true,
+ labelAutoEllipsis: true,
+ },
+ y: { title: y[0].name },
+ },
+ scale: {
+ x: {
+ nice: true,
+ },
+ y: {
+ nice: true,
+ type: 'linear',
+ },
+ },
+ children: [
+ {
+ type: 'point',
+ encode: {
+ size: 6,
+ shape: 'point',
+ },
+ style: {
+ stroke: '#fff',
+ lineWidth: 1,
+ },
+ labels: [
+ {
+ text: (d) => {
+ const value = d[y[0].value]
+ if (value === undefined || value === null) {
+ return ''
+ }
+ return `${value}${_data.isPercent ? '%' : ''}`
+ },
+ style: {
+ dx: 0,
+ dy: -10,
+ },
+ transform: [
+ { type: 'contrastReverse' },
+ { type: 'exceedAdjust' },
+ { type: 'overlapHide' },
+ ],
+ },
+ ],
+ tooltip: (d) => {
+ if (series.length > 0) {
+ return {
+ name: d[series[0].value],
+ value: `${d[y[0].value]}${_data.isPercent ? '%' : ''}`,
+ }
+ } else {
+ return { name: y[0].name, value: `${d[y[0].value]}${_data.isPercent ? '%' : ''}` }
+ }
+ },
+ },
+ ],
+ }
+
+ return options
+}
+
+module.exports = { getScatterOptions }