klinsmaya/SQLBot
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git synced 2026-11-08 01:06:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: view preview

Browse Source
This commit is contained in:
wangjiahao
2025-07-21 15:37:03 +08:00
parent 2be094a380
commit 6f70172048
2 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/svg/icon_chart_preview.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M1.99992 1.3335H4.99992C5.18401 1.3335 5.33325 1.48273 5.33325 1.66683V2.3335C5.33325 2.51759 5.18401 2.66683 4.99992 2.66683H2.66659V5.00016C2.66659 5.18426 2.51735 5.3335 2.33325 5.3335H1.66659C1.48249 5.3335 1.33325 5.18426 1.33325 5.00016V2.00016C1.33325 1.63197 1.63173 1.3335 1.99992 1.3335ZM13.9999 14.6668H10.9999C10.8158 14.6668 10.6666 14.5176 10.6666 14.3335V13.6668C10.6666 13.4827 10.8158 13.3335 10.9999 13.3335H13.3333V11.0002C13.3333 10.8161 13.4825 10.6668 13.6666 10.6668H14.3333C14.5173 10.6668 14.6666 10.8161 14.6666 11.0002V14.0002C14.6666 14.3684 14.3681 14.6668 13.9999 14.6668ZM1.33325 14.0002V11.0002C1.33325 10.8161 1.48249 10.6668 1.66659 10.6668H2.33325C2.51735 10.6668 2.66659 10.8161 2.66659 11.0002V13.3335H4.99992C5.18401 13.3335 5.33325 13.4827 5.33325 13.6668V14.3335C5.33325 14.5176 5.18401 14.6668 4.99992 14.6668H1.99992C1.63173 14.6668 1.33325 14.3684 1.33325 14.0002ZM14.6666 2.00016V5.00016C14.6666 5.18426 14.5173 5.3335 14.3333 5.3335H13.6666C13.4825 5.3335 13.3333 5.18426 13.3333 5.00016V2.66683H10.9999C10.8158 2.66683 10.6666 2.51759 10.6666 2.3335V1.66683C10.6666 1.48273 10.8158 1.3335 10.9999 1.3335H13.9999C14.3681 1.3335 14.6666 1.63197 14.6666 2.00016Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

frontend/src/views/dashboard/canvas/ComponentBar.vue
+43 -12
View File
@@ -3,6 +3,10 @@ import { toRefs } from 'vue'
import icon_delete from '@/assets/svg/icon_delete.svg'
import { Icon } from '@/components/icon-custom'
import { useEmitt } from '@/utils/useEmitt.ts'
import { useI18n } from 'vue-i18n'
import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
import icon_chart_preview from '@/assets/svg/icon_chart_preview.svg'
const { t } = useI18n()
const props = defineProps({
active: {
@@ -26,6 +30,10 @@ const props = defineProps({
const { configItem } = toRefs(props)
const doPreview = () => {
// do preview
}
const doDeleteComponent = (e: MouseEvent) => {
e.stopPropagation()
e.preventDefault()
@@ -36,11 +44,23 @@ const doDeleteComponent = (e: MouseEvent) => {
<template>
<div class="component-bar-main" :class="{ 'bar-hidden': !active }">
<div>
<el-icon class="handle-icon" @click="doDeleteComponent">
<Icon>
<icon_delete class="svg-icon"></icon_delete>
</Icon>
</el-icon>
<el-dropdown ref="curDropdown" trigger="click" placement="bottom-end">
<el-icon class="bar-more">
<el-tooltip :content="t('dashboard.more')" placement="bottom">
<icon name="icon_more_outlined"><icon_more_outlined class="svg-icon" /></icon>
</el-tooltip>
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :icon="icon_chart_preview" @click="doPreview">{{
t('dashboard.preview')
}}</el-dropdown-item>
<el-dropdown-item divided :icon="icon_delete" @click="doDeleteComponent">{{
t('dashboard.delete')
}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
@@ -54,16 +74,27 @@ const doDeleteComponent = (e: MouseEvent) => {
display: flex;
z-index: 5;
cursor: pointer !important;
.handle-icon {
color: #646a73;
}
&:hover {
background-color: #e8f0fe;
color: var(--el-color-primary);
}
}
.bar-hidden {
display: none;
}
.bar-more {
width: 24px;
height: 24px;
color: rgba(31, 35, 41, 1);
border-radius: 6px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(217, 220, 223, 1);
padding: 8px;
&:hover {
background-color: rgba(245, 246, 247, 1);
}
&:active {
background-color: rgba(245, 246, 247, 0.5);
}
}
</style>