Skip to content

Commit e679785

Browse files
dataeaseShudataeaseShu
committed
feat(Appearance Configuration): Logo and website name optimization
1 parent f467cb3 commit e679785

9 files changed

Lines changed: 186 additions & 60 deletions

File tree

‎frontend/src/components/layout/LayoutDsl.vue‎

Lines changed: 113 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
<script lang="ts" setup>
22
import { ref, computed, onUnmounted } from 'vue'
33
import Menu from './Menu.vue'
4-
import LOGOCustom from '@/assets/svg/LOGO-custom.svg'
54
import custom_small from '@/assets/svg/logo-custom_small.svg'
65
import Workspace from './Workspace.vue'
76
import Person from './Person.vue'
8-
import LOGO from '@/assets/LOGO.svg'
97
import LOGO_fold from '@/assets/LOGO-fold.svg'
108
import icon_moments_categories_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
119
import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
1210
import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
1311
import { useRoute, useRouter } from 'vue-router'
1412
import { useAppearanceStoreWithOut } from '@/stores/appearance'
15-
import logo_blue from '@/assets/blue/LOGO-blue.png'
16-
import logo_fold_blue from '@/assets/blue/LOGO-head_blue.png'
1713
import { useEmitt } from '@/utils/useEmitt'
1814

1915
const router = useRouter()
@@ -24,6 +20,9 @@ let time: any
2420
onUnmounted(() => {
2521
clearTimeout(time)
2622
})
23+
const loginBg = computed(() => {
24+
return appearanceStore.getLogin
25+
})
2726
const handleCollapseChange = (val: any = true) => {
2827
collapseCopy.value = val
2928
clearTimeout(time)
@@ -61,8 +60,18 @@ const showSysmenu = computed(() => {
6160
<div class="left-side" :class="collapse && 'left-side-collapse'">
6261
<template v-if="showSysmenu">
6362
<div @click="toUserIndex" class="sys-management">
63+
<img
64+
:style="{ marginLeft: collapse ? '5px' : 0 }"
65+
@click="toChatIndex"
66+
height="30"
67+
width="30"
68+
v-if="loginBg"
69+
:src="loginBg"
70+
:class="!collapse && 'collapse-icon'"
71+
alt=""
72+
/>
6473
<custom_small
65-
v-if="appearanceStore.themeColor !== 'default'"
74+
v-else-if="appearanceStore.themeColor !== 'default'"
6675
:style="{ marginLeft: collapse ? '5px' : 0 }"
6776
:class="!collapse && 'collapse-icon'"
6877
></custom_small>
@@ -77,41 +86,109 @@ const showSysmenu = computed(() => {
7786
<template v-else>
7887
<template v-if="appearanceStore.isBlue">
7988
<img
80-
v-if="collapse"
81-
width="30"
82-
height="30"
83-
:src="logo_fold_blue"
8489
style="margin: 0 0 6px 5px; cursor: pointer"
8590
@click="toChatIndex"
91+
height="30"
92+
width="30"
93+
v-if="loginBg && collapse"
94+
:src="loginBg"
95+
alt=""
8696
/>
97+
<div v-else-if="loginBg && !collapse" class="default-sqlbot">
98+
<img
99+
@click="toChatIndex"
100+
height="30"
101+
width="30"
102+
:src="loginBg"
103+
alt=""
104+
class="collapse-icon"
105+
/>
106+
<span style="max-width: 150px" :title="appearanceStore.name" class="ellipsis">{{
107+
appearanceStore.name
108+
}}</span>
109+
</div>
110+
<custom_small
111+
v-else-if="collapse"
112+
:style="{ marginLeft: collapse ? '5px' : 0 }"
113+
:class="!collapse && 'collapse-icon'"
114+
></custom_small>
115+
116+
<div v-else class="default-sqlbot">
117+
<custom_small class="collapse-icon"></custom_small>
118+
<span style="max-width: 150px" :title="appearanceStore.name" class="ellipsis">{{
119+
appearanceStore.name
120+
}}</span>
121+
</div>
122+
</template>
123+
<template v-else-if="appearanceStore.themeColor === 'custom'">
87124
<img
88-
v-else
89-
width="130"
90-
height="31"
91-
:src="logo_blue"
92-
style="margin-bottom: 6px; cursor: pointer"
125+
style="margin: 0 0 6px 5px; cursor: pointer"
93126
@click="toChatIndex"
127+
height="30"
128+
width="30"
129+
v-if="loginBg && collapse"
130+
:src="loginBg"
131+
alt=""
94132
/>
95-
</template>
96-
<template v-else-if="appearanceStore.themeColor === 'custom'">
133+
<div v-else-if="loginBg && !collapse" class="default-sqlbot">
134+
<img
135+
@click="toChatIndex"
136+
height="30"
137+
width="30"
138+
:src="loginBg"
139+
alt=""
140+
class="collapse-icon"
141+
/>
142+
<span style="max-width: 150px" :title="appearanceStore.name" class="ellipsis">{{
143+
appearanceStore.name
144+
}}</span>
145+
</div>
97146
<custom_small
98-
v-if="collapse"
147+
v-else-if="collapse"
99148
style="margin: 0 0 6px 5px; cursor: pointer"
100149
@click="toChatIndex"
101150
></custom_small>
102-
<LOGOCustom
103-
v-else
104-
style="margin-bottom: 6px; cursor: pointer"
105-
@click="toChatIndex"
106-
></LOGOCustom>
151+
<div v-else class="default-sqlbot">
152+
<custom_small class="collapse-icon"></custom_small>
153+
<span style="max-width: 150px" :title="appearanceStore.name" class="ellipsis">{{
154+
appearanceStore.name
155+
}}</span>
156+
</div>
107157
</template>
108158
<template v-else>
159+
<img
160+
style="margin: 0 0 6px 5px; cursor: pointer"
161+
@click="toChatIndex"
162+
height="30"
163+
width="30"
164+
v-if="loginBg && collapse"
165+
:src="loginBg"
166+
alt=""
167+
/>
168+
<div v-else-if="loginBg && !collapse" class="default-sqlbot">
169+
<img
170+
@click="toChatIndex"
171+
height="30"
172+
width="30"
173+
:src="loginBg"
174+
alt=""
175+
class="collapse-icon"
176+
/>
177+
<span style="max-width: 150px" :title="appearanceStore.name" class="ellipsis">{{
178+
appearanceStore.name
179+
}}</span>
180+
</div>
109181
<LOGO_fold
110-
v-if="collapse"
182+
v-else-if="collapse"
111183
style="margin: 0 0 6px 5px; cursor: pointer"
112184
@click="toChatIndex"
113185
></LOGO_fold>
114-
<LOGO v-else style="margin-bottom: 6px; cursor: pointer" @click="toChatIndex"></LOGO>
186+
<div v-else class="default-sqlbot">
187+
<LOGO_fold class="collapse-icon" @click="toChatIndex"></LOGO_fold>
188+
<span style="max-width: 150px" :title="appearanceStore.name" class="ellipsis">{{
189+
appearanceStore.name
190+
}}</span>
191+
</div>
115192
</template>
116193
</template>
117194
<Workspace v-if="!showSysmenu" :collapse="collapse"></Workspace>
@@ -168,6 +245,18 @@ const showSysmenu = computed(() => {
168245
position: relative;
169246
min-width: 240px;
170247

248+
.default-sqlbot {
249+
display: flex;
250+
align-items: center;
251+
font-weight: 500;
252+
font-size: 16px;
253+
cursor: pointer;
254+
margin-bottom: 12px;
255+
.collapse-icon {
256+
margin-right: 8px;
257+
}
258+
}
259+
171260
.sys-management {
172261
display: flex;
173262
align-items: center;

‎frontend/src/i18n/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -675,7 +675,7 @@
675675
"tab": "Tab",
676676
"replace_image": "Replace Image",
677677
"larger_than_200kb": "Logo displayed at the top of the website: Recommended size: 48 x 48 pixels, supports JPG, PNG, and SVG, and no larger than 200KB",
678-
"login_logo": "Login Logo",
678+
"login_logo": "System Logo",
679679
"larger_than_200kb_de": "Logo on the right side of the login page: Recommended size: 204 x 52 pixels, supports JPG, PNG, and SVG, and no larger than 200KB",
680680
"login_background_image": "Login Background Image",
681681
"larger_than_5mb": "Background image on the left: Recommended size: 576 x 900 for vector images, 1152 x 1800 for bitmap images, supports JPG, PNG, and SVG, and no larger than 5MB",

‎frontend/src/i18n/ko-KR.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -675,7 +675,7 @@
675675
"tab": "페이지 탭",
676676
"replace_image": "이미지 교체",
677677
"larger_than_200kb": "상단 웹사이트에 표시되는 로고, 권장 크기 48 x 48, JPG, PNG, SVG 지원, 크기 200KB 이하",
678-
"login_logo": "로그인 로고",
678+
"login_logo": "시스템 로고",
679679
"larger_than_200kb_de": "로그인 페이지 오른쪽 로고, 권장 크기 204*52, JPG, PNG, SVG 지원, 크기 200KB 이하",
680680
"login_background_image": "로그인 배경 이미지",
681681
"larger_than_5mb": "왼쪽 배경 이미지, 벡터 이미지 권장 크기 576*900, 비트맵 권장 크기 1152*1800; JPG, PNG, SVG 지원, 크기 5MB 이하",

‎frontend/src/i18n/zh-CN.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -675,7 +675,7 @@
675675
"tab": "页签",
676676
"replace_image": "替换图片",
677677
"larger_than_200kb": "顶部网站显示的 Logo，建议尺寸 48 x 48，支持 JPG、PNG、SVG，大小不超过 200KB",
678-
"login_logo": "登录 Logo",
678+
"login_logo": "系统 Logo",
679679
"larger_than_200kb_de": "登录页面右侧 Logo，建议尺寸 204*52，支持 JPG、PNG、SVG，大小不超过 200KB",
680680
"login_background_image": "登录背景图",
681681
"larger_than_5mb": "左侧背景图，矢量图建议尺寸 576*900，位图建议尺寸 1152*1800；支持 JPG、PNG、SVG，大小不超过 5M",

‎frontend/src/stores/appearance.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const useAppearanceStore = defineStore('appearanceStore', {
5959
login: '',
6060
slogan: '',
6161
web: '',
62-
name: '',
62+
name: 'SQLBot',
6363
foot: 'false',
6464
footContent: '',
6565
loaded: false,

‎frontend/src/views/chat/index.vue‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -138,9 +138,11 @@
138138
<div class="welcome-content">
139139
<template v-if="isCompletePage">
140140
<div class="greeting">
141-
<el-icon size="32">
142-
<logo_fold />
143-
</el-icon>
141+
<img height="32" width="32" v-if="loginBg" :src="loginBg" alt="" />
142+
<el-icon size="32" v-else
143+
><custom_small v-if="appearanceStore.themeColor !== 'default'"></custom_small>
144+
<LOGO_fold v-else></LOGO_fold
145+
></el-icon>
144146
{{ t('qa.greeting') }}
145147
</div>
146148
<div class="sub">
@@ -422,6 +424,8 @@ import ChatToolBar from './ChatToolBar.vue'
422424
import { dsTypeWithImg } from '@/views/ds/js/ds-type'
423425
import { useI18n } from 'vue-i18n'
424426
import { find, forEach } from 'lodash-es'
427+
import custom_small from '@/assets/svg/logo-custom_small.svg'
428+
import LOGO_fold from '@/assets/LOGO-fold.svg'
425429
import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
426430
import icon_sidebar_outlined from '@/assets/svg/icon_sidebar_outlined.svg'
427431
import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
@@ -432,6 +436,7 @@ import logo from '@/assets/LOGO.svg'
432436
import icon_send_filled from '@/assets/svg/icon_send_filled.svg'
433437
import { useAssistantStore } from '@/stores/assistant'
434438
import { onClickOutside } from '@vueuse/core'
439+
import { useAppearanceStoreWithOut } from '@/stores/appearance'
435440
import { useUserStore } from '@/stores/user'
436441
import { debounce } from 'lodash-es'
437442
@@ -483,11 +488,14 @@ const scrollToBottom = debounce(() => {
483488
484489
const loading = ref<boolean>(false)
485490
const chatList = ref<Array<ChatInfo>>([])
491+
const appearanceStore = useAppearanceStoreWithOut()
486492
487493
const currentChatId = ref<number | undefined>()
488494
const currentChat = ref<ChatInfo>(new ChatInfo())
489495
const isTyping = ref<boolean>(false)
490-
496+
const loginBg = computed(() => {
497+
return appearanceStore.getLogin
498+
})
491499
const computedMessages = computed<Array<ChatMessage>>(() => {
492500
const messages: Array<ChatMessage> = []
493501
if (currentChatId.value === undefined) {

‎frontend/src/views/login/index.vue‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,16 @@
55
</div>
66
<div class="login-content">
77
<div class="login-right">
8-
<img width="auto" height="52" :src="loginBg" alt="" />
8+
<div class="login-logo-icon">
9+
<img height="52" v-if="loginBg" :src="loginBg" alt="" />
10+
<el-icon size="52" v-else
11+
><custom_small v-if="appearanceStore.themeColor !== 'default'"></custom_small>
12+
<LOGO_fold v-else></LOGO_fold
13+
></el-icon>
14+
<span style="margin-left: 14px; font-size: 34px; font-weight: 900; color: #485559">{{
15+
appearanceStore.name
16+
}}</span>
17+
</div>
918
<div v-if="appearanceStore.getShowSlogan" class="welcome">
1019
{{ appearanceStore.slogan || $t('common.intelligent_questioning_platform') }}
1120
</div>
@@ -54,10 +63,10 @@ import { ref, computed } from 'vue'
5463
import { useRouter } from 'vue-router'
5564
import { useUserStore } from '@/stores/user'
5665
import { useI18n } from 'vue-i18n'
57-
import aboutBg from '@/assets/embedded/LOGO-about.png'
66+
import custom_small from '@/assets/svg/logo-custom_small.svg'
67+
import LOGO_fold from '@/assets/LOGO-fold.svg'
5868
import login_image from '@/assets/embedded/login_image.png'
5969
import { useAppearanceStoreWithOut } from '@/stores/appearance'
60-
import logo from '@/assets/blue/LOGO-blue.png'
6170
import loginImage from '@/assets/blue/login-image_blue.png'
6271
6372
const router = useRouter()
@@ -75,7 +84,7 @@ const bg = computed(() => {
7584
})
7685
7786
const loginBg = computed(() => {
78-
return appearanceStore.getLogin || (appearanceStore.isBlue ? logo : aboutBg)
87+
return appearanceStore.getLogin
7988
})
8089
8190
const rules = {
@@ -126,6 +135,14 @@ const submitForm = () => {
126135
align-items: center;
127136
flex-direction: column;
128137
position: relative;
138+
139+
.login-logo-icon {
140+
width: auto;
141+
height: 52px;
142+
display: flex;
143+
align-items: center;
144+
justify-content: center;
145+
}
129146
.welcome {
130147
margin: 8px 0 40px 0;
131148
font-weight: 400;

‎frontend/src/views/system/appearance/LoginPreview.vue‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,17 @@
3939
<div class="login-form-center">
4040
<div class="config-area">
4141
<div class="login-logo">
42-
<img class="login-logo-icon" :src="pageLogin" alt="" />
42+
<div class="login-logo-icon">
43+
<img height="52" v-if="pageLogin" :src="pageLogin" alt="" />
44+
<el-icon size="52" v-else
45+
><custom_small v-if="themeColor !== 'default'"></custom_small>
46+
<LOGO_fold v-else></LOGO_fold
47+
></el-icon>
48+
<span
49+
style="margin-left: 14px; font-size: 34px; font-weight: 900; color: #485559"
50+
>{{ name }}</span
51+
>
52+
</div>
4353
</div>
4454
<div v-if="isBtnShow(showSlogan)" class="login-welcome">
4555
{{ pageSlogan || t('system.available_to_everyone') }}
@@ -92,10 +102,10 @@
92102

93103
<script lang="ts" setup>
94104
import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
105+
import LOGO_fold from '@/assets/LOGO-fold.svg'
95106
import login_image from '@/assets/embedded/login_image.png'
96-
import aboutBg from '@/assets/embedded/LOGO-about.png'
97107
import logoHeader from '@/assets/blue/LOGO-head_blue.png'
98-
import logo from '@/assets/blue/LOGO-blue.png'
108+
import custom_small from '@/assets/svg/logo-custom_small.svg'
99109
import loginImage from '@/assets/blue/login-image_blue.png'
100110
import { propTypes } from '@/utils/propTypes'
101111
import { isBtnShow } from '@/utils/utils'
@@ -132,13 +142,7 @@ const pageWeb = computed(() => {
132142
: baseUrl + props.web
133143
})
134144
const pageLogin = computed(() =>
135-
!props.login
136-
? props.isBlue
137-
? logo
138-
: aboutBg
139-
: props.login.startsWith('blob')
140-
? props.login
141-
: baseUrl + props.login
145+
!props.login ? null : props.login.startsWith('blob') ? props.login : baseUrl + props.login
142146
)
143147
const pageBg = computed(() =>
144148
!props.bg
@@ -273,6 +277,9 @@ onMounted(() => {
273277
.login-logo-icon {
274278
width: auto;
275279
height: 52px;
280+
display: flex;
281+
align-items: center;
282+
justify-content: center;
276283
}
277284
}
278285
.login-welcome {

0 commit comments

Comments
 (0)