Skip to content

Commit 5a5b2e8

Browse files
dataeaseShudataeaseShu
committed
feat(Embedded): Embedded appearance configuration
1 parent 469b3d4 commit 5a5b2e8

File tree

9 files changed

+744
-20
lines changed

9 files changed

+744
-20
lines changed

‎frontend/src/assets/svg/icon_magnify_outlined.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/src/assets/svg/icon_style-set_outlined.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/src/i18n/en.json‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -517,7 +517,21 @@
517517
"i_am_sqlbot": "Hello, I am SQLBot",
518518
"predict_data_etc": "I can query data, generate charts, detect data anomalies, predict data, etc.",
519519
"intelligent_data_query": "Hurry up and start intelligent data query~",
520-
"origin_format_error": "Format invalid, starts with http or https and cannot end with /"
520+
"origin_format_error": "Format invalid, starts with http or https and cannot end with /",
521+
"display_settings": "Display Settings",
522+
"header_text_color": "Header Text Color",
523+
"app_logo": "App Logo",
524+
"maximum_size_10mb": "Recommended size: 32 x 32, supports JPG, PNG, and SVG, maximum size: 10MB",
525+
"replace": "Replace",
526+
"default_icon_position": "Default Icon Position",
527+
"draggable_position": "Draggable Position",
528+
"up": "Up",
529+
"down": "Down",
530+
"left": "Left",
531+
"right": "Right",
532+
"welcome_description": "Welcome Description",
533+
"data_analysis_now": "I can query data, generate charts, detect data anomalies, predict data, and more! Enable Smart Data Analysis now!",
534+
"window_entrance_icon": "Floating window entrance icon"
521535
},
522536
"chat": {
523537
"type": "Chart Type",
@@ -604,4 +618,4 @@
604618
"setting_successfully": "Setting Successfully",
605619
"customize_theme_color": "Customize theme color"
606620
}
607-
}
621+
}

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -517,7 +517,21 @@
517517
"i_am_sqlbot": "你好，我是 SQLBot",
518518
"predict_data_etc": "我可以查询数据、生成图表、检测数据异常、预测数据等",
519519
"intelligent_data_query": "赶快开启智能问数吧～",
520-
"origin_format_error": "格式错误，http或https开头，不能以 / 结尾"
520+
"origin_format_error": "格式错误，http或https开头，不能以 / 结尾",
521+
"display_settings": "显示设置",
522+
"header_text_color": "头部文本颜色",
523+
"app_logo": "应用 Logo",
524+
"maximum_size_10mb": "建议尺寸 32 x 32，支持 JPG、PNG、SVG，大小不超过 10MB",
525+
"replace": "替换",
526+
"default_icon_position": "图标默认位置",
527+
"draggable_position": "可拖拽位置",
528+
"up": "上",
529+
"down": "下",
530+
"left": "左",
531+
"right": "右",
532+
"welcome_description": "欢迎语描述",
533+
"data_analysis_now": "我可以查询数据、生成图表、检测数据异常、预测数据等赶快开启智能问数吧～",
534+
"window_entrance_icon": "浮窗入口图标"
521535
},
522536
"chat": {
523537
"type": "图表类型",
@@ -604,4 +618,4 @@
604618
"setting_successfully": "设置成功",
605619
"customize_theme_color": "自定义主题色"
606620
}
607-
}
621+
}

‎frontend/src/stores/appearance.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,8 @@ export const useAppearanceStore = defineStore('appearanceStore', {
251251
// if (!isDataEaseBi) {
252252
// document.title = ''
253253
// }
254+
const obj = LicenseGenerator.getLicense()
255+
if (obj?.status !== 'valid') return
254256
const resData = await request.get('/system/appearance')
255257
this.loaded = true
256258
if (!resData?.length) {

‎frontend/src/views/embedded/assistant.vue‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import { ref } from 'vue'
33
import icon_sidebar_outlined from '@/assets/embedded/icon_sidebar_outlined.svg'
44
import icon_new_chat_outlined from '@/assets/embedded/icon_new-chat_outlined.svg'
55
import LOGO from '@/assets/embedded/LOGO.png'
6-
import answer from '@/assets/embedded/answer.png'
76
import disable_answer from '@/assets/embedded/disable.png'
8-
import loading_answer from '@/assets/embedded/loading.png'
9-
import send_answer from '@/assets/embedded/send.png'
7+
import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
8+
import icon_magnify_outlined from '@/assets/svg/icon_magnify_outlined.svg'
109
1110
const textareaVal = ref('')
1211
</script>
@@ -25,6 +24,14 @@ const textareaVal = ref('')
2524
<icon_new_chat_outlined></icon_new_chat_outlined>
2625
</el-icon>
2726
</el-tooltip>
27+
28+
<el-icon class="new-chat" style="right: 52px" size="20">
29+
<icon_magnify_outlined></icon_magnify_outlined>
30+
</el-icon>
31+
32+
<el-icon class="new-chat" style="right: 16px" size="20">
33+
<icon_close_outlined></icon_close_outlined>
34+
</el-icon>
2835
</div>
2936
<div class="center">
3037
<img :src="LOGO" class="logo" width="30px" height="30px" alt="" />
@@ -45,7 +52,7 @@ const textareaVal = ref('')
4552
<img :src="disable_answer" width="32px" height="32px" alt="" />
4653
</el-tooltip>
4754

48-
<el-tooltip
55+
<!-- <el-tooltip
4956
:offset="10"
5057
effect="dark"
5158
:content="$t('embedded.stop_replying')"
@@ -55,7 +62,7 @@ const textareaVal = ref('')
5562
</el-tooltip>
5663
5764
<img :src="loading_answer" width="32px" height="32px" alt="" />
58-
<img :src="send_answer" width="32px" height="32px" alt="" />
65+
<img :src="send_answer" width="32px" height="32px" alt="" /> -->
5966
</div>
6067
</div>
6168

@@ -66,14 +73,15 @@ const textareaVal = ref('')
6673
<style lang="less" scoped>
6774
.assistant-window {
6875
width: 460px;
69-
height: 640px;
76+
height: 100%;
7077
border-radius: 12px;
7178
border: 1px solid #dee0e3;
7279
box-shadow: 0px 6px 24px 0px #1f232914;
7380
background-color: #fff;
7481
position: relative;
82+
overflow: hidden;
7583
.header {
76-
background: var(--ed-color-primary-14, #1cba9014);
84+
background: var(--ed-color-primary-1a, #1cba901a);
7785
height: 56px;
7886
padding: 0 16px;
7987
display: flex;

‎frontend/src/views/system/embedded/Card.vue‎

Lines changed: 136 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
<script lang="ts" setup>
22
import delIcon from '@/assets/svg/icon_delete.svg'
3+
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
34
import icon_embedded_outlined from '@/assets/embedded/icon_embedded_outlined.svg'
45
import IconOpeEdit from '@/assets/svg/icon_edit_outlined.svg'
56
import Lock from '@/assets/embedded/LOGO-sql.png'
7+
import { ref, unref } from 'vue'
8+
import { ClickOutside as vClickOutside } from 'element-plus-secondary'
9+
import icon_style_set_outlined from '@/assets/svg/icon_style-set_outlined.svg'
610
711
withDefaults(
812
defineProps<{
@@ -19,19 +23,29 @@ withDefaults(
1923
}
2024
)
2125
22-
const emits = defineEmits(['edit', 'del', 'embedded'])
26+
const emits = defineEmits(['edit', 'del', 'embedded', 'ui'])
2327
2428
const handleEdit = () => {
2529
emits('edit')
2630
}
2731
32+
const handleUi = () => {
33+
emits('ui')
34+
}
35+
2836
const handleDel = () => {
2937
emits('del')
3038
}
3139
3240
const handleEmbedded = () => {
3341
emits('embedded')
3442
}
43+
44+
const buttonRef = ref()
45+
const popoverRef = ref()
46+
const onClickOutside = () => {
47+
unref(popoverRef).popperRef?.delayHide?.()
48+
}
3549
</script>
3650

3751
<template>
@@ -57,12 +71,34 @@ const handleEmbedded = () => {
5771
</el-icon>
5872
{{ $t('dashboard.edit') }}
5973
</el-button>
60-
<el-button secondary @click="handleDel">
61-
<el-icon style="margin-right: 4px" size="16">
62-
<delIcon></delIcon>
63-
</el-icon>
64-
{{ $t('dashboard.delete') }}
65-
</el-button>
74+
<el-icon ref="buttonRef" v-click-outside="onClickOutside" class="more" size="16" @click.stop>
75+
<icon_more_outlined></icon_more_outlined>
76+
</el-icon>
77+
78+
<el-popover
79+
ref="popoverRef"
80+
:virtual-ref="buttonRef"
81+
virtual-triggering
82+
trigger="click"
83+
:teleported="false"
84+
popper-class="popover-card"
85+
placement="bottom-start"
86+
>
87+
<div class="content">
88+
<div class="item" @click.stop="handleUi">
89+
<el-icon size="16">
90+
<icon_style_set_outlined></icon_style_set_outlined>
91+
</el-icon>
92+
{{ $t('embedded.display_settings') }}
93+
</div>
94+
<div class="item" @click.stop="handleDel">
95+
<el-icon size="16">
96+
<delIcon></delIcon>
97+
</el-icon>
98+
{{ $t('dashboard.delete') }}
99+
</div>
100+
</div>
101+
</el-popover>
66102
</div>
67103
</div>
68104
</template>
@@ -77,7 +113,7 @@ const handleEmbedded = () => {
77113
&:hover {
78114
box-shadow: 0px 6px 24px 0px #1f232914;
79115
.methods {
80-
display: block;
116+
display: flex;
81117
}
82118
}
83119
@@ -128,6 +164,98 @@ const handleEmbedded = () => {
128164
.methods {
129165
margin-top: 16px;
130166
display: none;
167+
align-items: center;
168+
.more {
169+
position: relative;
170+
cursor: pointer;
171+
margin-left: 12px;
172+
width: 30px;
173+
height: 30px;
174+
175+
svg {
176+
position: relative;
177+
z-index: 5;
178+
}
179+
180+
&::after {
181+
content: '';
182+
background: #f5f6f7;
183+
position: absolute;
184+
border-radius: 6px;
185+
width: 30px;
186+
height: 30px;
187+
transform: translate(-50%, -50%);
188+
top: 50%;
189+
left: 50%;
190+
border: 1px solid #d9dcdf;
191+
z-index: 1;
192+
display: none;
193+
}
194+
195+
&:hover {
196+
&::after {
197+
display: block;
198+
}
199+
}
200+
}
201+
}
202+
}
203+
</style>
204+
205+
<style lang="less">
206+
.popover-card.popover-card.popover-card {
207+
box-shadow: 0px 4px 8px 0px #1f23291a;
208+
border-radius: 4px;
209+
border: 1px solid #dee0e3;
210+
width: 120px !important;
211+
min-width: 120px !important;
212+
padding: 0;
213+
214+
.content {
215+
position: relative;
216+
217+
&::after {
218+
position: absolute;
219+
content: '';
220+
top: 40px;
221+
left: 0;
222+
width: 100%;
223+
height: 1px;
224+
background: #dee0e3;
225+
}
226+
227+
.item {
228+
position: relative;
229+
padding-left: 12px;
230+
height: 40px;
231+
display: flex;
232+
align-items: center;
233+
cursor: pointer;
234+
235+
.ed-icon {
236+
margin-right: 8px;
237+
color: #646a73;
238+
}
239+
240+
&:hover {
241+
&::after {
242+
display: block;
243+
}
244+
}
245+
246+
&::after {
247+
content: '';
248+
width: 112px;
249+
height: 32px;
250+
border-radius: 4px;
251+
position: absolute;
252+
top: 50%;
253+
left: 50%;
254+
transform: translate(-50%, -50%);
255+
background: #1f23291a;
256+
display: none;
257+
}
258+
}
131259
}
132260
}
133261
</style>

0 commit comments

Comments
 (0)