refactor(工作台): 优化工作台可视化资源跳转样式逻辑

This commit is contained in:
wangjiahao 2024-03-29 16:56:56 +08:00
parent 7afd3ae2e5
commit 2839cf3e6f
2 changed files with 29 additions and 17 deletions

View File

@ -5,11 +5,11 @@
:content="t('visualization.share')"
placement="top"
>
<el-icon class="hover-icon hover-icon-in-table share-button-icon" @click="share">
<el-icon class="hover-icon hover-icon-in-table share-button-icon" @click.stop="share">
<Icon name="icon_share-label_outlined"></Icon>
</el-icon>
</el-tooltip>
<el-button v-if="props.weight >= 7 && props.isButton" @click="share" icon="Share">{{
<el-button v-if="props.weight >= 7 && props.isButton" @click.stop="share" icon="Share">{{
t('visualization.share')
}}</el-button>
@ -66,7 +66,7 @@
<div class="inline-share-item" v-if="state.detailInfo.pwd">
<el-input v-model="state.detailInfo.pwd" readonly size="small">
<template #append>
<div @click="resetPwd" class="share-reset-container">
<div @click.stop="resetPwd" class="share-reset-container">
<span>{{ t('commons.reset') }}</span>
</div>
</template>
@ -77,7 +77,7 @@
</div>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="!shareEnable || expError" type="primary" @click="copyInfo">
<el-button :disabled="!shareEnable || expError" type="primary" @click.stop="copyInfo">
{{ t('visualization.copy_link') }}
</el-button>
</span>

View File

@ -43,6 +43,10 @@ const iconMap = {
datasource: 'icon_database_outlined'
}
const jumpActiveCheck = row => {
return row && ['dashboard', 'panel', 'dataV', 'screen'].includes(row.type)
}
const handleClick = (ele: TabsPaneContext) => {
if (ele.paneName === 'recent' || ele.paneName === 'store') {
loading.value = true
@ -276,7 +280,7 @@ const getEmptyDesc = (): string => {
>
<el-table-column key="name" width="280" prop="name" :label="t('common.name')">
<template v-slot:default="scope">
<div class="name-content">
<div class="name-content" :class="{ 'jump-active': jumpActiveCheck(scope.row) }">
<el-icon :class="`main-color color-${scope.row.type}`">
<Icon :name="iconMap[scope.row.type]" />
</el-icon>
@ -287,7 +291,7 @@ const getEmptyDesc = (): string => {
<el-icon
v-if="activeName === 'recent' && ['screen', 'panel'].includes(scope.row.type)"
class="custom-icon"
@click="executeStore(scope.row)"
@click.stop="executeStore(scope.row)"
:style="{ color: scope.row.favorite ? '#FFC60A' : '#646A73' }"
>
<icon
@ -306,16 +310,18 @@ const getEmptyDesc = (): string => {
:label="item.label"
>
<template #default="scope">
<span v-if="item.type && item.type === 'time'">{{
formatterTime(null, null, scope.row[item.field])
}}</span>
<span v-else-if="item.field && item.field === 'type'">{{
typeMap[scope.row[item.field]]
}}</span>
<span v-else-if="desktop && item.field && item.field.endsWith('tor')">{{
userStore.getName
}}</span>
<span v-else>{{ scope.row[item.field] }}</span>
<span :class="{ 'jump-active': jumpActiveCheck(scope.row) }">
<span v-if="item.type && item.type === 'time'">{{
formatterTime(null, null, scope.row[item.field])
}}</span>
<span v-else-if="item.field && item.field === 'type'">{{
typeMap[scope.row[item.field]]
}}</span>
<span v-else-if="desktop && item.field && item.field.endsWith('tor')">{{
userStore.getName
}}</span>
<span v-else>{{ scope.row[item.field] }}</span>
</span>
</template>
</el-table-column>
@ -325,7 +331,9 @@ const getEmptyDesc = (): string => {
<el-tooltip effect="dark" content="新页面预览" placement="top">
<el-icon
class="hover-icon hover-icon-in-table"
@click="preview(activeName === 'recent' ? scope.row.id : scope.row.resourceId)"
@click.stop="
preview(activeName === 'recent' ? scope.row.id : scope.row.resourceId)
"
>
<Icon name="icon_pc_outlined"></Icon>
</el-icon>
@ -456,6 +464,10 @@ const getEmptyDesc = (): string => {
line-height: 20px !important;
}
}
.jump-active {
cursor: pointer;
}
</style>
<style lang="less">
.menu-panel-select_popper {