fix: 样式优化

This commit is contained in:
dataeaseShu 2025-01-07 10:37:59 +08:00 committed by fit2cloud-chenyw
parent c61cae2020
commit 8b7d289f13
5 changed files with 54 additions and 43 deletions

View File

@ -7,7 +7,8 @@ import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import icon_sort_priority from '@/assets/svg/icon_sort_priority.svg'
import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'
import icon_invisible_outlined from '@/assets/svg/icon_invisible_outlined.svg'
import { useI18n } from '@/hooks/web/useI18n'
import { computed, onMounted, ref, toRefs, watch } from 'vue'
import { getItemType } from '@/views/chart/components/editor/drag-item/utils'
@ -282,7 +283,9 @@ onMounted(() => {
</span>
</el-tooltip>
<el-icon style="margin-left: 8px">
<Icon><Hide v-show="showHideIcon" class="svg-icon inner-class" /></Icon>
<Icon
><icon_invisible_outlined v-show="showHideIcon" class="svg-icon inner-class"
/></Icon>
</el-icon>
<el-tooltip :effect="toolTip" placement="top">
<template #content>
@ -392,10 +395,10 @@ onMounted(() => {
</el-dropdown-item>
<el-dropdown-item
v-if="showSort()"
:icon="icon_sort_priority"
:command="beforeClickItem('sortPriority')"
class="menu-item-padding"
>
<el-icon />
<span>{{ t('chart.sort_priority') }}</span>
</el-dropdown-item>
<el-dropdown-item
@ -642,8 +645,10 @@ onMounted(() => {
:command="beforeClickItem('toggleHide')"
>
<el-icon>
<icon v-if="item.hide === true" name="view"><View class="svg-icon" /></icon>
<icon v-else name="hide"><Hide class="svg-icon" /></icon>
<icon
><icon_visible_outlined v-if="item.hide === true" class="svg-icon" />
<icon_invisible_outlined v-else class="svg-icon"
/></icon>
</el-icon>
<span>{{ item.hide === true ? t('chart.show') : t('chart.hide') }}</span>
</el-dropdown-item>

View File

@ -288,10 +288,10 @@ onMounted(() => {
</el-dropdown-item>
<el-dropdown-item
v-if="index !== 0"
:icon="icon_sort_priority"
:command="beforeClickItem('sortPriority')"
class="menu-item-padding"
>
<el-icon />
<span>{{ t('chart.sort_priority') }}</span>
</el-dropdown-item>
<el-dropdown-item class="menu-item-padding" :command="beforeClickItem('rename')">

View File

@ -4,18 +4,17 @@ import icon_sortZToA_outlined from '@/assets/svg/icon_sort-z-to-a_outlined.svg'
import icon_sort_outlined from '@/assets/svg/icon_sort_outlined.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
import icon_functions_outlined from '@/assets/svg/icon_functions_outlined.svg'
import icon_describe_outlined from '@/assets/svg/icon_describe_outlined.svg'
import icon_sort_priority from '@/assets/svg/icon_sort_priority.svg'
import icon_visible_outlined from '@/assets/svg/icon_visible_outlined.svg'
import icon_invisible_outlined from '@/assets/svg/icon_invisible_outlined.svg'
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import iconFilter from '@/assets/svg/icon-filter.svg'
import { useI18n } from '@/hooks/web/useI18n'
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { formatterItem } from '@/views/chart/components/js/formatter'
import { getItemType, resetValueFormatter } from '@/views/chart/components/editor/drag-item/utils'
import { Filter } from '@element-plus/icons-vue'
import { quotaViews } from '@/views/chart/components/js/util'
import { SUPPORT_Y_M } from '@/views/chart/components/editor/util/chart'
import { fieldType } from '@/utils/attr'
@ -393,7 +392,7 @@ onMounted(() => {
</span>
<el-icon style="margin-left: 8px">
<Icon>
<Hide
<icon_invisible_outlined
v-show="showHideIcon"
:class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
class="svg-icon inner-class"
@ -748,9 +747,9 @@ onMounted(() => {
<el-dropdown-item
v-if="showSort"
class="menu-item-padding"
:icon="icon_sort_priority"
:command="beforeClickItem('sortPriority')"
>
<el-icon />
<span>{{ t('chart.sort_priority') }}</span>
</el-dropdown-item>
@ -759,7 +758,7 @@ onMounted(() => {
v-if="
props.type !== 'extLabel' && props.type !== 'extTooltip' && props.type !== 'extBubble'
"
:icon="Filter"
:icon="iconFilter"
:command="beforeClickItem('filter')"
:divided="chart.type.includes('chart-mix')"
>
@ -788,8 +787,10 @@ onMounted(() => {
:command="beforeClickItem('toggleHide')"
>
<el-icon>
<icon v-if="item.hide === true" name="view"><View class="svg-icon" /></icon>
<icon v-else name="hide"><Hide class="svg-icon" /></icon>
<icon
><icon_visible_outlined v-if="item.hide === true" class="svg-icon" />
<icon_invisible_outlined v-else class="svg-icon"
/></icon>
</el-icon>
<span>{{ item.hide === true ? t('chart.show') : t('chart.hide') }}</span>
</el-dropdown-item>

View File

@ -1398,6 +1398,7 @@ const mousedownDrag = () => {
margin-bottom: 8px;
background-color: white;
color: #1f2329;
font-size: 14px;
.ed-icon {
font-size: 16px;
@ -1480,8 +1481,22 @@ const mousedownDrag = () => {
.system-text_bg {
color: #1f2329;
&:hover {
background: #1f23291a;
}
&:active {
background: #1f232933;
}
&:focus {
background: #3370ff1a;
color: #3370ff;
}
&:focus:hover {
color: #3370ff;
background: #3370ff33;
}
}
}
}

View File

@ -1195,25 +1195,25 @@ const emits = defineEmits([
direction="rtl"
>
<template #header v-if="currentNode">
<div class="info-content">
<div style="width: 100%">
<div class="info">
<span class="label">{{ t('data_set.table_name_de') }}</span>
<span :title="currentNode.tableName" class="name ellipsis">{{
<span :title="currentNode.tableName" class="label ellipsis">{{
currentNode.tableName
}}</span>
</div>
<div class="info">
<span class="label">{{ t('data_set.table_remarks') }}</span>
<span :title="currentNode.noteName" style="max-width: 240px" class="name ellipsis">{{
currentNode.noteName || '-'
}}</span>
<div class="info" style="margin-top: 4px">
<span
:title="getDsName(currentNode.datasourceId)"
style="max-width: 550px"
class="name ellipsis"
>{{ t('auth.datasource') }}:{{ getDsName(currentNode.datasourceId) }}</span
>
</div>
<div class="info" style="margin-top: 4px">
<span :title="currentNode.noteName" style="max-width: 500px" class="name ellipsis"
>{{ t('data_set.table_remarks') }}:{{ currentNode.noteName || '-' }}</span
>
</div>
<span
:title="getDsName(currentNode.datasourceId)"
style="max-width: 550px"
class="ds ellipsis"
>{{ t('auth.datasource') }}:{{ getDsName(currentNode.datasourceId) }}</span
>
</div>
</template>
<union-field-list
@ -1253,22 +1253,16 @@ const emits = defineEmits([
.union-item-drawer {
.ed-drawer__header {
height: 82px;
height: auto;
font-family: var(--de-custom_font, 'PingFang');
.ed-drawer__close-btn {
top: 26px;
}
.info-content {
display: flex;
flex-wrap: wrap;
top: 40.5px;
}
.info {
width: 100%;
display: flex;
flex-direction: column;
width: 50%;
.label {
font-weight: 500;
font-size: 16px;
@ -1278,12 +1272,8 @@ const emits = defineEmits([
.name {
font-weight: 400;
font-size: 14px;
}
.ds {
font-weight: 400;
font-size: 14px;
max-width: 500px;
color: #646a73;
line-height: 22px;
}
}
}