mirror of
https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git
synced 2026-11-08 01:06:59 +08:00
feat(Embedded): Embedded appearance configuration
This commit is contained in:
dataeaseShu
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.15199 11.5968C7.31471 11.4341 7.57853 11.4341 7.74125 11.5968L8.33051 12.1861C8.49323 12.3488 8.49323 12.6126 8.33051 12.7754L4.99606 16.1087H7.36641C7.59652 16.1087 7.78307 16.2952 7.78307 16.5254V17.3587C7.78307 17.5888 7.59652 17.7754 7.36641 17.7754H3.05575C2.82563 17.7754 2.61729 17.6821 2.46649 17.5313C2.31569 17.3805 2.22241 17.1721 2.22241 16.942V12.6422C2.22241 12.4121 2.40896 12.2255 2.63908 12.2255H3.47241C3.70253 12.2255 3.88908 12.4121 3.88908 12.6422V14.8586L7.15199 11.5968ZM16.9369 2.22224C17.167 2.22224 17.3753 2.31552 17.5261 2.46632C17.6769 2.61713 17.7702 2.82546 17.7702 3.05558V7.35539C17.7702 7.5855 17.5837 7.77205 17.3535 7.77205H16.5202C16.2901 7.77205 16.1035 7.5855 16.1035 7.35539V5.13895L12.8406 8.40076C12.6779 8.56347 12.4141 8.56347 12.2514 8.40076L11.6621 7.8115C11.4994 7.64878 11.4994 7.38496 11.6621 7.22224L14.9966 3.88891H12.6262C12.3961 3.88891 12.2095 3.70236 12.2095 3.47224V2.63891C12.2095 2.40879 12.3961 2.22224 12.6262 2.22224H16.9369Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.96583 1.78703C9.13864 1.78803 10.2887 2.01536 11.3384 2.44349L10.5144 3.46052C9.80941 3.21446 9.05752 3.07048 8.28858 3.03833L7.95808 3.03143L7.59923 3.03862C6.82439 3.07218 6.06177 3.2231 5.32578 3.49014C4.53228 3.77783 3.81743 4.18524 3.2016 4.70216C2.59845 5.20948 2.1244 5.79319 1.79475 6.43562C1.46089 7.0846 1.29112 7.76698 1.29112 8.45824C1.29112 9.1452 1.45971 9.81483 1.79119 10.4477C2.11777 11.067 2.58867 11.6282 3.18914 12.1142C3.80099 12.6078 4.51687 12.9972 5.31534 13.2702C6.14854 13.556 7.03742 13.7007 7.95622 13.7007C8.32646 13.7007 8.69485 13.6763 9.06098 13.6277L9.42633 13.5712L9.87386 13.4822L9.92024 13.4677C9.98171 13.4403 10.0407 13.3814 10.0853 13.3037C10.1508 13.1887 10.1779 13.049 10.1638 12.9113L10.1454 12.8088L10.1209 12.722L10.0754 12.5397C9.91783 11.8082 10.0536 11.0527 10.4583 10.4363C10.8947 9.7706 11.5955 9.35495 12.3563 9.30249L12.5202 9.29685H13.7008L13.7922 9.29074C14.1833 9.23822 14.5067 8.85337 14.5859 8.3706L14.5998 8.25756L14.6044 8.11144L14.6027 8.05416L14.5819 7.87007L14.5414 7.63164C14.4314 7.07787 14.2139 6.54267 13.8923 6.0357C13.8038 5.89531 13.7081 5.75834 13.6055 5.62499L14.4044 4.63789C14.6002 4.87122 14.7787 5.11515 14.9393 5.36894C15.3493 6.01516 15.6263 6.70619 15.7635 7.42183L15.8084 7.6913L15.8417 7.97987L15.8452 8.13982L15.8413 8.28567C15.7764 9.48991 14.9129 10.4539 13.8364 10.5291L13.7008 10.5338H12.5221C12.1161 10.5357 11.7347 10.752 11.4966 11.1149C11.3116 11.3985 11.2291 11.7439 11.2591 12.084L11.2789 12.2293L11.3387 12.462C11.4752 12.9498 11.4117 13.4821 11.1657 13.914C10.9695 14.2584 10.6727 14.5118 10.3299 14.6356L10.1994 14.6759L9.71784 14.7744C9.37012 14.8389 9.02123 14.8841 8.67152 14.91L8.32155 14.9293L7.95808 14.9358C6.90362 14.9358 5.87856 14.7685 4.91587 14.439C3.98119 14.1188 3.13984 13.6597 2.41283 13.0736C1.67994 12.4814 1.10258 11.7894 0.697402 11.0179C0.271905 10.2057 0.0560303 9.3427 0.0560303 8.45265C0.0560303 7.5609 0.270858 6.69043 0.695718 5.86288C1.10131 5.07206 1.67719 4.35966 2.4079 3.7455C3.13566 3.13441 3.9767 2.65448 4.91094 2.31711C5.67111 2.04594 6.45674 1.87817 7.25029 1.81701L7.59082 1.79733L7.94961 1.79025L7.96583 1.78703ZM3.6675 8.7277C4.17275 8.7277 4.58176 9.13843 4.58348 9.64368C4.58348 10.1489 4.17275 10.5597 3.6675 10.5597C3.16054 10.5597 2.75153 10.1489 2.75153 9.64368C2.75153 9.13843 3.16225 8.7277 3.6675 8.7277ZM13.8995 1.2254C14.0431 1.04584 14.3051 1.01673 14.4847 1.16037L14.8098 1.42047C14.9894 1.56411 15.0185 1.82612 14.8748 2.00568L8.47329 10.0076L7.52 10.4291C7.48834 10.4431 7.4531 10.4468 7.41919 10.4399C7.32909 10.4214 7.27103 10.3334 7.28952 10.2433L7.49794 9.22733L13.8995 1.2254ZM4.50021 5.39688C5.00545 5.39688 5.41618 5.80761 5.41618 6.31286C5.41618 6.81811 5.00545 7.22883 4.50021 7.22883C3.99324 7.22883 3.58423 6.81811 3.58423 6.31286C3.58423 5.80761 3.99496 5.39688 4.50021 5.39688ZM7.99757 4.14783C8.50453 4.14783 8.91354 4.55856 8.91354 5.0638C8.91354 5.56905 8.50281 5.97978 7.99757 5.97978C7.4906 5.97978 7.08159 5.56905 7.08159 5.0638C7.08159 4.55856 7.49232 4.14783 7.99757 4.14783Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -517,7 +517,21 @@
|
||||
"i_am_sqlbot": "Hello, I am SQLBot",
|
||||
"predict_data_etc": "I can query data, generate charts, detect data anomalies, predict data, etc.",
|
||||
"intelligent_data_query": "Hurry up and start intelligent data query~",
|
||||
"origin_format_error": "Format invalid, starts with http or https and cannot end with /"
|
||||
"origin_format_error": "Format invalid, starts with http or https and cannot end with /",
|
||||
"display_settings": "Display Settings",
|
||||
"header_text_color": "Header Text Color",
|
||||
"app_logo": "App Logo",
|
||||
"maximum_size_10mb": "Recommended size: 32 x 32, supports JPG, PNG, and SVG, maximum size: 10MB",
|
||||
"replace": "Replace",
|
||||
"default_icon_position": "Default Icon Position",
|
||||
"draggable_position": "Draggable Position",
|
||||
"up": "Up",
|
||||
"down": "Down",
|
||||
"left": "Left",
|
||||
"right": "Right",
|
||||
"welcome_description": "Welcome Description",
|
||||
"data_analysis_now": "I can query data, generate charts, detect data anomalies, predict data, and more! Enable Smart Data Analysis now!",
|
||||
"window_entrance_icon": "Floating window entrance icon"
|
||||
},
|
||||
"chat": {
|
||||
"type": "Chart Type",
|
||||
@@ -604,4 +618,4 @@
|
||||
"setting_successfully": "Setting Successfully",
|
||||
"customize_theme_color": "Customize theme color"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -517,7 +517,21 @@
|
||||
"i_am_sqlbot": "你好，我是 SQLBot",
|
||||
"predict_data_etc": "我可以查询数据、生成图表、检测数据异常、预测数据等",
|
||||
"intelligent_data_query": "赶快开启智能问数吧～",
|
||||
"origin_format_error": "格式错误，http或https开头，不能以 / 结尾"
|
||||
"origin_format_error": "格式错误，http或https开头，不能以 / 结尾",
|
||||
"display_settings": "显示设置",
|
||||
"header_text_color": "头部文本颜色",
|
||||
"app_logo": "应用 Logo",
|
||||
"maximum_size_10mb": "建议尺寸 32 x 32，支持 JPG、PNG、SVG，大小不超过 10MB",
|
||||
"replace": "替换",
|
||||
"default_icon_position": "图标默认位置",
|
||||
"draggable_position": "可拖拽位置",
|
||||
"up": "上",
|
||||
"down": "下",
|
||||
"left": "左",
|
||||
"right": "右",
|
||||
"welcome_description": "欢迎语描述",
|
||||
"data_analysis_now": "我可以查询数据、生成图表、检测数据异常、预测数据等赶快开启智能问数吧～",
|
||||
"window_entrance_icon": "浮窗入口图标"
|
||||
},
|
||||
"chat": {
|
||||
"type": "图表类型",
|
||||
@@ -604,4 +618,4 @@
|
||||
"setting_successfully": "设置成功",
|
||||
"customize_theme_color": "自定义主题色"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -251,6 +251,8 @@ export const useAppearanceStore = defineStore('appearanceStore', {
|
||||
// if (!isDataEaseBi) {
|
||||
// document.title = ''
|
||||
// }
|
||||
const obj = LicenseGenerator.getLicense()
|
||||
if (obj?.status !== 'valid') return
|
||||
const resData = await request.get('/system/appearance')
|
||||
this.loaded = true
|
||||
if (!resData?.length) {
|
||||
|
||||
@@ -3,10 +3,9 @@ import { ref } from 'vue'
|
||||
import icon_sidebar_outlined from '@/assets/embedded/icon_sidebar_outlined.svg'
|
||||
import icon_new_chat_outlined from '@/assets/embedded/icon_new-chat_outlined.svg'
|
||||
import LOGO from '@/assets/embedded/LOGO.png'
|
||||
import answer from '@/assets/embedded/answer.png'
|
||||
import disable_answer from '@/assets/embedded/disable.png'
|
||||
import loading_answer from '@/assets/embedded/loading.png'
|
||||
import send_answer from '@/assets/embedded/send.png'
|
||||
import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
|
||||
import icon_magnify_outlined from '@/assets/svg/icon_magnify_outlined.svg'
|
||||
|
||||
const textareaVal = ref('')
|
||||
</script>
|
||||
@@ -25,6 +24,14 @@ const textareaVal = ref('')
|
||||
<icon_new_chat_outlined></icon_new_chat_outlined>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-icon class="new-chat" style="right: 52px" size="20">
|
||||
<icon_magnify_outlined></icon_magnify_outlined>
|
||||
</el-icon>
|
||||
|
||||
<el-icon class="new-chat" style="right: 16px" size="20">
|
||||
<icon_close_outlined></icon_close_outlined>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="center">
|
||||
<img :src="LOGO" class="logo" width="30px" height="30px" alt="" />
|
||||
@@ -45,7 +52,7 @@ const textareaVal = ref('')
|
||||
<img :src="disable_answer" width="32px" height="32px" alt="" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
<!-- <el-tooltip
|
||||
:offset="10"
|
||||
effect="dark"
|
||||
:content="$t('embedded.stop_replying')"
|
||||
@@ -55,7 +62,7 @@ const textareaVal = ref('')
|
||||
</el-tooltip>
|
||||
|
||||
<img :src="loading_answer" width="32px" height="32px" alt="" />
|
||||
<img :src="send_answer" width="32px" height="32px" alt="" />
|
||||
<img :src="send_answer" width="32px" height="32px" alt="" /> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -66,14 +73,15 @@ const textareaVal = ref('')
|
||||
<style lang="less" scoped>
|
||||
.assistant-window {
|
||||
width: 460px;
|
||||
height: 640px;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #dee0e3;
|
||||
box-shadow: 0px 6px 24px 0px #1f232914;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.header {
|
||||
background: var(--ed-color-primary-14, #1cba9014);
|
||||
background: var(--ed-color-primary-1a, #1cba901a);
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import delIcon from '@/assets/svg/icon_delete.svg'
|
||||
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
|
||||
import icon_embedded_outlined from '@/assets/embedded/icon_embedded_outlined.svg'
|
||||
import IconOpeEdit from '@/assets/svg/icon_edit_outlined.svg'
|
||||
import Lock from '@/assets/embedded/LOGO-sql.png'
|
||||
import { ref, unref } from 'vue'
|
||||
import { ClickOutside as vClickOutside } from 'element-plus-secondary'
|
||||
import icon_style_set_outlined from '@/assets/svg/icon_style-set_outlined.svg'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
@@ -19,12 +23,16 @@ withDefaults(
|
||||
}
|
||||
)
|
||||
|
||||
const emits = defineEmits(['edit', 'del', 'embedded'])
|
||||
const emits = defineEmits(['edit', 'del', 'embedded', 'ui'])
|
||||
|
||||
const handleEdit = () => {
|
||||
emits('edit')
|
||||
}
|
||||
|
||||
const handleUi = () => {
|
||||
emits('ui')
|
||||
}
|
||||
|
||||
const handleDel = () => {
|
||||
emits('del')
|
||||
}
|
||||
@@ -32,6 +40,12 @@ const handleDel = () => {
|
||||
const handleEmbedded = () => {
|
||||
emits('embedded')
|
||||
}
|
||||
|
||||
const buttonRef = ref()
|
||||
const popoverRef = ref()
|
||||
const onClickOutside = () => {
|
||||
unref(popoverRef).popperRef?.delayHide?.()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -57,12 +71,34 @@ const handleEmbedded = () => {
|
||||
</el-icon>
|
||||
{{ $t('dashboard.edit') }}
|
||||
</el-button>
|
||||
<el-button secondary @click="handleDel">
|
||||
<el-icon style="margin-right: 4px" size="16">
|
||||
<delIcon></delIcon>
|
||||
</el-icon>
|
||||
{{ $t('dashboard.delete') }}
|
||||
</el-button>
|
||||
<el-icon ref="buttonRef" v-click-outside="onClickOutside" class="more" size="16" @click.stop>
|
||||
<icon_more_outlined></icon_more_outlined>
|
||||
</el-icon>
|
||||
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:virtual-ref="buttonRef"
|
||||
virtual-triggering
|
||||
trigger="click"
|
||||
:teleported="false"
|
||||
popper-class="popover-card"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="item" @click.stop="handleUi">
|
||||
<el-icon size="16">
|
||||
<icon_style_set_outlined></icon_style_set_outlined>
|
||||
</el-icon>
|
||||
{{ $t('embedded.display_settings') }}
|
||||
</div>
|
||||
<div class="item" @click.stop="handleDel">
|
||||
<el-icon size="16">
|
||||
<delIcon></delIcon>
|
||||
</el-icon>
|
||||
{{ $t('dashboard.delete') }}
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -77,7 +113,7 @@ const handleEmbedded = () => {
|
||||
&:hover {
|
||||
box-shadow: 0px 6px 24px 0px #1f232914;
|
||||
.methods {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -128,6 +164,98 @@ const handleEmbedded = () => {
|
||||
.methods {
|
||||
margin-top: 16px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
.more {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background: #f5f6f7;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 1px solid #d9dcdf;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.popover-card.popover-card.popover-card {
|
||||
box-shadow: 0px 4px 8px 0px #1f23291a;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dee0e3;
|
||||
width: 120px !important;
|
||||
min-width: 120px !important;
|
||||
padding: 0;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dee0e3;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.ed-icon {
|
||||
margin-right: 8px;
|
||||
color: #646a73;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 112px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #1f23291a;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,546 @@
|
||||
<script lang="ts" setup>
|
||||
import Assistant from '@/views/embedded/assistant.vue'
|
||||
import { ref, unref, reactive, nextTick } from 'vue'
|
||||
import { type UploadUserFile, ElMessage } from 'element-plus-secondary'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { request } from '@/utils/request'
|
||||
import { useAppearanceStoreWithOut } from '@/stores/appearance'
|
||||
import colorFunctions from 'less/lib/less/functions/color.js'
|
||||
import colorTree from 'less/lib/less/tree/color.js'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
const appearanceStore = useAppearanceStoreWithOut()
|
||||
const { t } = useI18n()
|
||||
interface SqlBotForm {
|
||||
name: string
|
||||
theme: string
|
||||
header_font_color: string
|
||||
// logo?: string
|
||||
x_type: string
|
||||
y_type: string
|
||||
welcome_desc: string
|
||||
// float_icon?: string
|
||||
welcome: string
|
||||
float_icon_drag: boolean
|
||||
x_val: number
|
||||
y_val: number
|
||||
}
|
||||
|
||||
const optionsY = [
|
||||
{
|
||||
label: t('embedded.up'),
|
||||
value: 'top',
|
||||
},
|
||||
{
|
||||
label: t('embedded.down'),
|
||||
value: 'bottom',
|
||||
},
|
||||
]
|
||||
|
||||
const optionsX = [
|
||||
{
|
||||
label: t('embedded.left'),
|
||||
value: 'left',
|
||||
},
|
||||
{
|
||||
label: t('embedded.right'),
|
||||
value: 'right',
|
||||
},
|
||||
]
|
||||
const COLOR_PANEL = [
|
||||
'#FF4500',
|
||||
'#FF8C00',
|
||||
'#FFD700',
|
||||
'#71AE46',
|
||||
'#00CED1',
|
||||
'#1E90FF',
|
||||
'#C71585',
|
||||
'#999999',
|
||||
'#000000',
|
||||
'#FFFFFF',
|
||||
]
|
||||
const fileList = ref<(UploadUserFile & { flag: string })[]>([])
|
||||
const dialogVisible = ref(false)
|
||||
const logo = ref('')
|
||||
const floatIcon = ref('')
|
||||
|
||||
const defaultSqlBotForm = reactive<SqlBotForm>({
|
||||
name: t('embedded.intelligent_customer_service'),
|
||||
x_type: 'right',
|
||||
y_type: 'bottom',
|
||||
x_val: 0,
|
||||
y_val: 33,
|
||||
float_icon_drag: false,
|
||||
welcome: t('embedded.i_am_sqlbot'),
|
||||
welcome_desc: t('embedded.data_analysis_now'),
|
||||
theme: '#1CBA90',
|
||||
header_font_color: '#1F2329',
|
||||
// logo: '',
|
||||
// float_icon: '',
|
||||
})
|
||||
const sqlBotForm = reactive<SqlBotForm>(cloneDeep(defaultSqlBotForm)) as { [key: string]: any }
|
||||
let rawData = {} as { [key: string]: any }
|
||||
const init = () => {
|
||||
fileList.value = []
|
||||
logo.value = rawData.logo
|
||||
floatIcon.value = rawData.float_icon
|
||||
|
||||
for (const key in sqlBotForm) {
|
||||
if (Object.prototype.hasOwnProperty.call(sqlBotForm, key)) {
|
||||
sqlBotForm[key] = rawData[key]
|
||||
}
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
setPageCustomColor(sqlBotForm.theme)
|
||||
setPageHeaderFontColor(sqlBotForm.header_font_color)
|
||||
})
|
||||
}
|
||||
const giveUp = () => {
|
||||
resetSqlBotForm(false)
|
||||
init()
|
||||
}
|
||||
const showSaveButton = ref(true)
|
||||
const saveHandler = () => {
|
||||
const param = buildParam()
|
||||
const url = '/system/assistant/ui'
|
||||
request
|
||||
.patch(url, param, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (!res) {
|
||||
ElMessage.success(t('system.setting_successfully'))
|
||||
appearanceStore.setLoaded(false)
|
||||
appearanceStore.setAppearance()
|
||||
showSaveButton.value = false
|
||||
nextTick(() => {
|
||||
showSaveButton.value = true
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const buildParam = () => {
|
||||
const formData = new FormData()
|
||||
if (fileList.value.length) {
|
||||
fileList.value.forEach((file: any) => {
|
||||
const name = file.name + ',' + file['flag']
|
||||
const fileArray = [file]
|
||||
const newfile = new File(fileArray, name, { type: file['type'] })
|
||||
formData.append('files', newfile)
|
||||
})
|
||||
}
|
||||
formData.append('data', JSON.stringify(unref(sqlBotForm)))
|
||||
return formData
|
||||
}
|
||||
|
||||
const headerFontColorChange = (val: any) => {
|
||||
setPageHeaderFontColor(val)
|
||||
}
|
||||
|
||||
const customColorChange = (val: any) => {
|
||||
setPageCustomColor(val)
|
||||
}
|
||||
|
||||
const setPageCustomColor = (val: any) => {
|
||||
const ele = document.getElementsByClassName('ui-main')[0] as HTMLElement
|
||||
|
||||
ele.style.setProperty('--ed-color-primary', val)
|
||||
ele.style.setProperty('--van-blue', val)
|
||||
ele.style.setProperty(
|
||||
'--ed-color-primary-light-5',
|
||||
colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 40 }).toRGB()
|
||||
)
|
||||
ele.style.setProperty(
|
||||
'--ed-color-primary-light-3',
|
||||
colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 15 }).toRGB()
|
||||
)
|
||||
ele.style.setProperty('--ed-color-primary-1a', `${val}1a`)
|
||||
ele.style.setProperty('--ed-color-primary-14', `${val}14`)
|
||||
ele.style.setProperty('--ed-color-primary-33', `${val}33`)
|
||||
ele.style.setProperty('--ed-color-primary-99', `${val}99`)
|
||||
ele.style.setProperty(
|
||||
'--ed-color-primary-dark-2',
|
||||
colorFunctions.mix(new colorTree('000000'), new colorTree(val.substr(1)), { value: 15 }).toRGB()
|
||||
)
|
||||
}
|
||||
|
||||
const setPageHeaderFontColor = (val: any) => {
|
||||
const ele = document.getElementsByClassName('ui-main')[0] as HTMLElement
|
||||
ele.style.setProperty('--ed-text-color-primary', val)
|
||||
}
|
||||
const resetSqlBotForm = (reset2Default?: boolean) => {
|
||||
Object.assign(sqlBotForm, cloneDeep(defaultSqlBotForm))
|
||||
clearFiles(['logo', 'float_icon'])
|
||||
if (reset2Default) {
|
||||
logo.value = ''
|
||||
floatIcon.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const uploadImg = (options: any) => {
|
||||
const file = options.file
|
||||
if (file['flag'] === 'logo') {
|
||||
logo.value = URL.createObjectURL(file)
|
||||
} else if (file['flag'] === 'float_icon') {
|
||||
floatIcon.value = URL.createObjectURL(file)
|
||||
}
|
||||
}
|
||||
const beforeUpload = (file: any, type: any) => {
|
||||
let len = fileList.value?.length
|
||||
let match = false
|
||||
file.flag = type
|
||||
while (len--) {
|
||||
const tfile = fileList.value[len]
|
||||
if (type == tfile['flag']) {
|
||||
fileList.value[len] = file
|
||||
match = true
|
||||
}
|
||||
}
|
||||
if (!match) {
|
||||
fileList.value?.push(file)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const clearFiles = (array?: string[]) => {
|
||||
if (!array?.length || !fileList.value?.length) {
|
||||
fileList.value = []
|
||||
return
|
||||
}
|
||||
let len = fileList.value.length
|
||||
while (len--) {
|
||||
const file = fileList.value[len]
|
||||
if (array.includes(file['flag'])) {
|
||||
fileList.value.splice(len, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const open = (row: any) => {
|
||||
console.log(JSON.parse(row.configuration))
|
||||
// rawData = JSON.parse(row.configuration)
|
||||
// init()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="$t('embedded.display_settings')"
|
||||
width="1000"
|
||||
modal-class="embed-third_party_ui"
|
||||
>
|
||||
<div class="ui-main">
|
||||
<div class="left-preview">
|
||||
<assistant></assistant>
|
||||
</div>
|
||||
<div class="right-form">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div class="theme">
|
||||
<div class="theme-bg">{{ $t('system.customize_theme_color') }}</div>
|
||||
<el-color-picker
|
||||
v-model="sqlBotForm.theme"
|
||||
:trigger-width="28"
|
||||
:predefine="COLOR_PANEL"
|
||||
is-custom
|
||||
effect="light"
|
||||
@change="customColorChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="theme">
|
||||
<div class="theme-bg">{{ $t('embedded.header_text_color') }}</div>
|
||||
<el-color-picker
|
||||
v-model="sqlBotForm.header_font_color"
|
||||
:trigger-width="28"
|
||||
:predefine="COLOR_PANEL"
|
||||
is-custom
|
||||
effect="light"
|
||||
@change="headerFontColorChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-item" style="margin-top: 3px">
|
||||
<div class="config-logo">
|
||||
<span class="logo">{{ $t('embedded.app_logo') }}</span>
|
||||
<el-upload
|
||||
name="logo"
|
||||
:show-file-list="false"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
:before-upload="(e: any) => beforeUpload(e, 'logo')"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-button secondary>{{ t('embedded.replace') }}</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="tips">{{ $t('embedded.maximum_size_10mb') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="config-item float-icon">
|
||||
<div class="config-logo">
|
||||
<span class="logo">{{ $t('embedded.window_entrance_icon') }}</span>
|
||||
<el-upload
|
||||
name="float_icon"
|
||||
:show-file-list="false"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
:before-upload="(e: any) => beforeUpload(e, 'float_icon')"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-button secondary>{{ t('embedded.replace') }}</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="tips">{{ $t('embedded.maximum_size_10mb') }}</div>
|
||||
<div style="background: #1f232926; height: 1px; margin: 12px 0"></div>
|
||||
<div class="position-set">
|
||||
{{ $t('embedded.default_icon_position') }}
|
||||
<el-checkbox
|
||||
v-model="sqlBotForm.float_icon_drag"
|
||||
:label="$t('embedded.draggable_position')"
|
||||
/>
|
||||
</div>
|
||||
<div class="position-set_input">
|
||||
<div class="x">
|
||||
<el-input-number
|
||||
v-model="sqlBotForm.x_val"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-select v-model="sqlBotForm.x_type" style="width: 51px">
|
||||
<el-option
|
||||
v-for="item in optionsX"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template> </el-input-number
|
||||
>px
|
||||
</div>
|
||||
<div class="y">
|
||||
<el-input-number
|
||||
v-model="sqlBotForm.y_val"
|
||||
:min="0"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-select v-model="sqlBotForm.y_type" style="width: 51px">
|
||||
<el-option
|
||||
v-for="item in optionsY"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template> </el-input-number
|
||||
>px
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
label-width="120px"
|
||||
class="page-Form"
|
||||
>
|
||||
<el-form-item :label="t('embedded.application_name')">
|
||||
<el-input
|
||||
v-model="sqlBotForm.name"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('embedded.application_name')
|
||||
"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('system.welcome_message')">
|
||||
<el-input
|
||||
v-model="sqlBotForm.welcome"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('system.welcome_message')
|
||||
"
|
||||
maxlength="50"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('embedded.welcome_description')">
|
||||
<el-input
|
||||
v-model="sqlBotForm.welcome_desc"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('embedded.welcome_description')
|
||||
"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
maxlength="50"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="btns">
|
||||
<el-button secondary @click="resetSqlBotForm(true)">{{
|
||||
t('system.restore_default')
|
||||
}}</el-button>
|
||||
<el-button style="margin-left: auto" secondary @click="giveUp">{{
|
||||
t('common.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" @click="saveHandler">{{ t('common.save') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.embed-third_party_ui {
|
||||
.ui-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 628px;
|
||||
|
||||
.left-preview {
|
||||
width: 460px;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-form {
|
||||
width: 470px;
|
||||
height: 100%;
|
||||
|
||||
.theme {
|
||||
width: 223px;
|
||||
|
||||
.ed-color-picker__trigger {
|
||||
padding: 0 !important;
|
||||
height: 26px !important;
|
||||
width: 26px !important;
|
||||
}
|
||||
.ed-color-picker__icon {
|
||||
display: none;
|
||||
}
|
||||
.ed-color-picker {
|
||||
height: 28px !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.theme-bg {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
.ed-color-picker {
|
||||
height: 32px;
|
||||
.ed-color-picker__trigger {
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-item {
|
||||
min-height: 86px;
|
||||
margin-bottom: 8px;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dee0e3;
|
||||
background: #fff;
|
||||
.config-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
.logo {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.ed-button {
|
||||
min-width: 48px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 4px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
white-space: pre-wrap;
|
||||
color: #8f959e;
|
||||
}
|
||||
}
|
||||
|
||||
.position-set,
|
||||
.position-set_input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.position-set_input {
|
||||
margin-top: 8px;
|
||||
.x,
|
||||
.y {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ed-input-number.is-controls-right .ed-input-number__increase {
|
||||
--ed-input-number-controls-height: 17px;
|
||||
}
|
||||
|
||||
.ed-input-number {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ed-input-number.is-controls-right .ed-input__wrapper {
|
||||
padding-left: 1px;
|
||||
}
|
||||
.ed-select__wrapper {
|
||||
box-shadow: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
.ed-input__prefix {
|
||||
border-right: 1px solid #d9dcdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-Form {
|
||||
margin-top: 8px;
|
||||
.ed-form-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ed-form-item--label-top .ed-form-item__label {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.ed-textarea__inner {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,7 @@ import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
|
||||
import icon_delete from '@/assets/svg/icon_delete.svg'
|
||||
import icon_copy_outlined from '@/assets/embedded/icon_copy_outlined.svg'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
|
||||
import SetUi from './SetUi.vue'
|
||||
import Card from './Card.vue'
|
||||
import { workspaceList } from '@/api/workspace'
|
||||
import DsCard from './DsCard.vue'
|
||||
@@ -232,6 +232,10 @@ const deleteHandler = (row: any) => {
|
||||
})
|
||||
})
|
||||
}
|
||||
const setUiRef = ref()
|
||||
const handleSetUi = (row: any) => {
|
||||
setUiRef.value.open(row)
|
||||
}
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
@@ -532,6 +536,7 @@ const saveHandler = () => {
|
||||
@embedded="handleEmbedded(ele)"
|
||||
@edit="handleEditRule(ele)"
|
||||
@del="deleteHandler(ele)"
|
||||
@ui="handleSetUi(ele)"
|
||||
></Card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -936,6 +941,7 @@ const saveHandler = () => {
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
<SetUi ref="setUiRef"></SetUi>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
Reference in New Issue
Block a user