mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-09 23:28:43 +08:00
perf: 优化层级的 UI 样式,支持点击图标完成功能
This commit is contained in:
parent
752cb744c0
commit
a8211c6a41
@ -2,7 +2,7 @@
|
||||
<div class="go-content-layers-group-list-item">
|
||||
<div
|
||||
class="root-item-content"
|
||||
:class="{ hover: hover, select: select, 'list-mini': layerMode === 'text' }"
|
||||
:class="{ hover: hover, select: select, 'list-mini': selectText }"
|
||||
@click="clickHandle($event)"
|
||||
@mousedown="groupMousedownHandle($event)"
|
||||
@mouseenter="mouseenterHandle(componentGroupData)"
|
||||
@ -23,8 +23,7 @@
|
||||
{{ componentGroupData.chartConfig.title }}
|
||||
</n-text>
|
||||
</n-ellipsis>
|
||||
<n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" v-if="status.lock" />
|
||||
<n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" v-if="status.hide" />
|
||||
<layers-status :isGroup="false" :hover="hover" :status="status"></layers-status>
|
||||
</div>
|
||||
<div :class="{ 'select-modal': select }"></div>
|
||||
</div>
|
||||
@ -34,6 +33,7 @@
|
||||
:key="element.id"
|
||||
:componentData="element"
|
||||
:layer-mode="layerMode"
|
||||
:isGroup="true"
|
||||
@mousedown="mousedownHandle($event, element, componentGroupData.id)"
|
||||
@mouseenter="mouseenterHandle(element)"
|
||||
@mouseleave="mouseleaveHandle(element)"
|
||||
@ -53,10 +53,9 @@ import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { LayersListItem } from '../LayersListItem'
|
||||
import { LayersStatus } from '../LayersStatus/index'
|
||||
import { LayerModeEnum } from '../../index.d'
|
||||
import { icon } from '@/plugins'
|
||||
import { LayerModeEnum } from '../../enums'
|
||||
|
||||
const { LockClosedOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
|
||||
|
||||
const props = defineProps({
|
||||
componentGroupData: {
|
||||
@ -64,10 +63,8 @@ const props = defineProps({
|
||||
required: true
|
||||
},
|
||||
layerMode: {
|
||||
type: Object as PropType<LayerModeEnum>,
|
||||
default(): LayerModeEnum {
|
||||
return 'thumbnail'
|
||||
}
|
||||
type: String as PropType<LayerModeEnum>,
|
||||
default: LayerModeEnum.THUMBNAIL
|
||||
}
|
||||
})
|
||||
|
||||
@ -88,6 +85,27 @@ const themeColor = computed(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
|
||||
// 是否选中文本
|
||||
const selectText = computed(() => {
|
||||
return props.layerMode === LayerModeEnum.TEXT
|
||||
})
|
||||
|
||||
// 计算当前选中目标
|
||||
const select = computed(() => {
|
||||
const id = props.componentGroupData.id
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
|
||||
// 悬浮
|
||||
const hover = computed(() => {
|
||||
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
|
||||
// 组件状态 隐藏/锁定
|
||||
const status = computed(() => {
|
||||
return props.componentGroupData.status
|
||||
})
|
||||
|
||||
// 右键
|
||||
const optionsHandle = (
|
||||
targetList: MenuOptionsItemType[],
|
||||
@ -134,21 +152,6 @@ const clickHandle = (e: MouseEvent) => {
|
||||
mousedownHandle(e, props.componentGroupData)
|
||||
}
|
||||
|
||||
// 计算当前选中目标
|
||||
const select = computed(() => {
|
||||
const id = props.componentGroupData.id
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
|
||||
// 悬浮
|
||||
const hover = computed(() => {
|
||||
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
|
||||
const status = computed(() => {
|
||||
return props.componentGroupData.status
|
||||
})
|
||||
|
||||
// 组点击事件
|
||||
const groupMousedownHandle = (e: MouseEvent) => {
|
||||
onClickOutSide()
|
||||
@ -206,10 +209,19 @@ $textSize: 10px;
|
||||
margin: 10px 5%;
|
||||
margin-bottom: 5px;
|
||||
@extend .go-transition-quick;
|
||||
@include deep() {
|
||||
.go-content-layers-list-item {
|
||||
margin-right: 0 !important;
|
||||
width: 95% !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.go-content-layers-list-item) {
|
||||
margin-right: 0 !important;
|
||||
width: 95% !important;
|
||||
&:hover {
|
||||
@include deep() {
|
||||
.icon-item {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.root-item-content {
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="go-content-layers-list-item" :class="{ hover: hover, select: select, 'list-mini': layerMode === 'text' }">
|
||||
<div class="go-content-layers-list-item" :class="{ hover: hover, select: select, 'list-mini': selectText }">
|
||||
<div class="go-flex-center item-content">
|
||||
<n-image
|
||||
class="list-img"
|
||||
@ -13,61 +13,67 @@
|
||||
{{ props.componentData.chartConfig.title }}
|
||||
</n-text>
|
||||
</n-ellipsis>
|
||||
<n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" v-if="status.lock" />
|
||||
<n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" v-if="status.hide" />
|
||||
<layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
|
||||
</div>
|
||||
<div :class="{ 'select-modal': select }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, computed, PropType } from 'vue'
|
||||
import { computed, PropType } from 'vue'
|
||||
import { requireErrorImg } from '@/utils'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { LayerModeEnum } from '../../enums'
|
||||
|
||||
import { icon } from '@/plugins'
|
||||
const { LockClosedOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
import { LayersStatus } from '../LayersStatus/index'
|
||||
import { LayerModeEnum } from '../../index.d'
|
||||
|
||||
const props = defineProps({
|
||||
componentData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
layerMode: {
|
||||
type: Object as PropType<LayerModeEnum>,
|
||||
default(): LayerModeEnum {
|
||||
return 'thumbnail'
|
||||
}
|
||||
type: String as PropType<LayerModeEnum>,
|
||||
default: LayerModeEnum.THUMBNAIL
|
||||
}
|
||||
})
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const { image } = props.componentData.chartConfig
|
||||
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
|
||||
// 计算当前选中目标
|
||||
const select = computed(() => {
|
||||
const id = props.componentData.id
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
|
||||
// 悬浮对象
|
||||
const hover = computed(() => {
|
||||
return props.componentData.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
|
||||
// 组件状态 隐藏/锁定
|
||||
const status = computed(() => {
|
||||
return props.componentData.status
|
||||
})
|
||||
|
||||
// 是否选中文本
|
||||
const selectText = computed(() => {
|
||||
return props.layerMode === LayerModeEnum.TEXT
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -89,6 +95,13 @@ $textSize: 10px;
|
||||
&:hover {
|
||||
@include fetch-bg-color('background-color4');
|
||||
}
|
||||
&:hover {
|
||||
@include deep() {
|
||||
.icon-item {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-modal,
|
||||
.item-content {
|
||||
@ -126,18 +139,11 @@ $textSize: 10px;
|
||||
font-size: $textSize;
|
||||
}
|
||||
|
||||
.list-status-icon {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
/* 选中样式 */
|
||||
&.select {
|
||||
border: 1px solid v-bind('themeColor');
|
||||
/* 需要设置最高级,覆盖 hover 的颜色 */
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
// .list-img {
|
||||
// border: 1px solid v-bind('themeColor') !important;
|
||||
// }
|
||||
}
|
||||
|
||||
// mini样式
|
||||
|
@ -0,0 +1,3 @@
|
||||
import LayersStatus from './index.vue'
|
||||
|
||||
export { LayersStatus }
|
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div v-show="!isGroup">
|
||||
<n-icon
|
||||
class="go-ml-1 icon-item"
|
||||
:class="{ active: status.lock }"
|
||||
size="15"
|
||||
:component="status.lock ? LockClosedOutlineIcon : LockOpenOutlineIcon"
|
||||
@click="lockHandle"
|
||||
/>
|
||||
<n-icon
|
||||
class="go-ml-1 icon-item"
|
||||
:class="{ active: status.hide }"
|
||||
size="15"
|
||||
:component="status.hide ? EyeOffOutlineIcon : EyeOutlineIcon"
|
||||
@click="showHandle"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType } from 'vue'
|
||||
import { LayerModeEnum } from '../../index.d'
|
||||
import { PublicConfigType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const props = defineProps({
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
status: {
|
||||
type: Object as PropType<Pick<PublicConfigType, 'status'>>,
|
||||
default: () => ({
|
||||
lock: false,
|
||||
hide: false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const { LockClosedOutlineIcon, LockOpenOutlineIcon, EyeOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
// 隐藏 / 展示
|
||||
const showHandle = (e: MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
props.status.hide ? chartEditStore.setShow() : chartEditStore.setHide()
|
||||
}
|
||||
|
||||
// 锁定 / 解锁
|
||||
const lockHandle = (e: MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
props.status.lock ? chartEditStore.setUnLock() : chartEditStore.setLock()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$activeColor: #ebcb87;
|
||||
|
||||
.icon-item {
|
||||
opacity: 0;
|
||||
padding-top: 5px;
|
||||
&.active,
|
||||
&:hover {
|
||||
color: $activeColor;
|
||||
}
|
||||
&.active {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1 +0,0 @@
|
||||
export type LayerModeEnum = 'thumbnail' | 'text'
|
4
src/views/chart/ContentLayers/index.d.ts
vendored
Normal file
4
src/views/chart/ContentLayers/index.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
export enum LayerModeEnum {
|
||||
THUMBNAIL = 'thumbnail',
|
||||
TEXT = 'text'
|
||||
}
|
@ -17,7 +17,7 @@
|
||||
v-for="(item, index) in layerModeEnumList"
|
||||
:key="index"
|
||||
ghost
|
||||
size="tiny"
|
||||
size="small"
|
||||
:type="layerMode === item.value ? 'primary' : 'tertiary'"
|
||||
@click="layerMode = item.value as LayerModeEnum"
|
||||
>
|
||||
@ -77,7 +77,7 @@ import { MenuEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/ed
|
||||
|
||||
import { LayersListItem } from './components/LayersListItem/index'
|
||||
import { LayersGroupListItem } from './components/LayersGroupListItem/index'
|
||||
import { LayerModeEnum } from './enums'
|
||||
import { LayerModeEnum } from './index.d'
|
||||
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user