mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
Merge branch 'dev'
This commit is contained in:
奔跑的面条
@@ -9,11 +9,12 @@
|
||||
<div
|
||||
class="item-box"
|
||||
v-for="(item, index) in menuOptions"
|
||||
:key="index"
|
||||
:key="item.title"
|
||||
draggable
|
||||
@dragstart="dragStartHandle($event, item)"
|
||||
@dragend="dragendHandle"
|
||||
@dragstart="!item.disabled && dragStartHandle($event, item)"
|
||||
@dragend="!item.disabled && dragendHandle"
|
||||
@dblclick="dblclickHandle(item)"
|
||||
@click="clickHandle(item)"
|
||||
>
|
||||
<div class="list-header">
|
||||
<mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
|
||||
@@ -21,14 +22,28 @@
|
||||
<n-ellipsis>{{ item.title }}</n-ellipsis>
|
||||
</n-text>
|
||||
</div>
|
||||
<div class="list-center go-flex-center go-transition">
|
||||
<chart-glob-image class="list-img" :chartConfig="item"></chart-glob-image>
|
||||
<div class="list-center go-flex-center go-transition" draggable="true">
|
||||
<Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
|
||||
<chart-glob-image v-else class="list-img" :chartConfig="item" />
|
||||
</div>
|
||||
<div class="list-bottom">
|
||||
<n-text class="list-bottom-text" depth="3">
|
||||
<n-ellipsis style="max-width: 90%">{{ item.title }}</n-ellipsis>
|
||||
</n-text>
|
||||
</div>
|
||||
<!-- 遮罩 -->
|
||||
<div v-if="item.disabled" class="list-model"></div>
|
||||
<!-- 工具栏 -->
|
||||
<div v-if="isShowTools(item)" class="list-tools go-transition" @click="deleteHandle(item, index)">
|
||||
<n-button text type="default" color="#ffffff">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<TrashIcon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,17 +57,23 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||
import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify } from '@/utils'
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||
import { componentInstall, loadingStart, loadingFinish, loadingError, JSONStringify, goDialog } from '@/utils'
|
||||
import { DragKeyEnum } from '@/enums/editPageEnum'
|
||||
import { createComponent } from '@/packages'
|
||||
import { ConfigType, CreateComponentType } from '@/packages/index.d'
|
||||
import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
|
||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
import omit from 'lodash/omit'
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { TrashIcon } = icon.ionicons5
|
||||
|
||||
defineProps({
|
||||
const emit = defineEmits(['deletePhoto'])
|
||||
const props = defineProps({
|
||||
menuOptions: {
|
||||
type: Array as PropType<ConfigType[]>,
|
||||
default: () => []
|
||||
@@ -62,6 +83,11 @@ defineProps({
|
||||
const chartLayoutStore = useChartLayoutStore()
|
||||
const contentChartsItemBoxRef = ref()
|
||||
|
||||
// 判断工具栏展示
|
||||
const isShowTools = (item: ConfigType) => {
|
||||
return !item.disabled && item.package === PackagesCategoryEnum.PHOTOS && item.category === ChatCategoryEnum.PRIVATE
|
||||
}
|
||||
|
||||
// 组件展示状态
|
||||
const chartMode: Ref<ChartModeEnum> = computed(() => {
|
||||
return chartLayoutStore.getChartType
|
||||
@@ -69,6 +95,7 @@ const chartMode: Ref<ChartModeEnum> = computed(() => {
|
||||
|
||||
// 拖拽处理
|
||||
const dragStartHandle = (e: DragEvent, item: ConfigType) => {
|
||||
if (item.disabled) return
|
||||
// 动态注册图表组件
|
||||
componentInstall(item.chartKey, fetchChartComponent(item))
|
||||
componentInstall(item.conKey, fetchConfigComponent(item))
|
||||
@@ -85,6 +112,7 @@ const dragendHandle = () => {
|
||||
|
||||
// 双击添加
|
||||
const dblclickHandle = async (item: ConfigType) => {
|
||||
if (item.disabled) return
|
||||
try {
|
||||
loadingStart()
|
||||
// 动态注册图表组件
|
||||
@@ -92,6 +120,11 @@ const dblclickHandle = async (item: ConfigType) => {
|
||||
componentInstall(item.conKey, fetchConfigComponent(item))
|
||||
// 创建新图表组件
|
||||
let newComponent: CreateComponentType = await createComponent(item)
|
||||
if (item.redirectComponent) {
|
||||
item.dataset && (newComponent.option.dataset = item.dataset)
|
||||
newComponent.chartConfig.title = item.title
|
||||
newComponent.chartConfig.chartFrame = item.chartFrame
|
||||
}
|
||||
// 添加
|
||||
chartEditStore.addComponentList(newComponent, false, true)
|
||||
// 选中
|
||||
@@ -103,6 +136,23 @@ const dblclickHandle = async (item: ConfigType) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 单击事件
|
||||
const clickHandle = (item: ConfigType) => {
|
||||
item?.configEvents?.addHandle(item)
|
||||
}
|
||||
|
||||
const deleteHandle = (item: ConfigType, index: number) => {
|
||||
goDialog({
|
||||
message: '是否删除此图片？',
|
||||
transformOrigin: 'center',
|
||||
onPositiveCallback: () => {
|
||||
const packagesStore = usePackagesStore()
|
||||
emit('deletePhoto', item, index)
|
||||
packagesStore.deletePhotos(item, index)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => chartMode.value,
|
||||
(newValue: ChartModeEnum) => {
|
||||
@@ -135,6 +185,7 @@ $halfCenterHeight: 50px;
|
||||
gap: 9px;
|
||||
transition: all 0.7s linear;
|
||||
.item-box {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: $itemWidth;
|
||||
overflow: hidden;
|
||||
@@ -145,7 +196,10 @@ $halfCenterHeight: 50px;
|
||||
&:hover {
|
||||
@include hover-border-color('background-color4');
|
||||
.list-img {
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
.list-tools {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.list-header {
|
||||
@@ -157,6 +211,7 @@ $halfCenterHeight: 50px;
|
||||
&-text {
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
.list-center {
|
||||
@@ -165,7 +220,7 @@ $halfCenterHeight: 50px;
|
||||
overflow: hidden;
|
||||
.list-img {
|
||||
height: 100px;
|
||||
width: 140px;
|
||||
max-width: 140px;
|
||||
border-radius: 6px;
|
||||
@extend .go-transition;
|
||||
}
|
||||
@@ -177,6 +232,33 @@ $halfCenterHeight: 50px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
.list-model {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.list-tools {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0 4px 2px;
|
||||
height: 26px;
|
||||
width: calc(100% - 8px);
|
||||
opacity: 0;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(20px);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
&:hover {
|
||||
background-color: rgba(232, 128, 128, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.single {
|
||||
.item-box {
|
||||
@@ -196,6 +278,9 @@ $halfCenterHeight: 50px;
|
||||
.item-box {
|
||||
width: $halfItemWidth;
|
||||
max-width: $maxItemWidth;
|
||||
.list-img {
|
||||
max-width: 76px;
|
||||
}
|
||||
}
|
||||
.list-center {
|
||||
height: $halfCenterHeight;
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
@update:value="clickItemHandle"
|
||||
></n-menu>
|
||||
<div class="chart-content-list">
|
||||
<n-scrollbar>
|
||||
<charts-item-box :menuOptions="packages.selectOptions"></charts-item-box>
|
||||
<n-scrollbar trigger="none">
|
||||
<charts-item-box :menuOptions="packages.selectOptions" @deletePhoto="deleteHandle"></charts-item-box>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
@@ -23,8 +23,11 @@ import { ref, watch, computed, reactive } from 'vue'
|
||||
import { ConfigType } from '@/packages/index.d'
|
||||
import { useSettingStore } from '@/store/modules/settingStore/settingStore'
|
||||
import { loadAsyncComponent } from '@/utils'
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||
import { PackagesCategoryEnum } from '@/packages/index.d'
|
||||
|
||||
const ChartsItemBox = loadAsyncComponent(() => import('../ChartsItemBox/index.vue'))
|
||||
const packagesStore = usePackagesStore()
|
||||
|
||||
const props = defineProps({
|
||||
selectOptions: {
|
||||
@@ -61,7 +64,7 @@ let packages = reactive<{
|
||||
saveSelectOptions: {}
|
||||
})
|
||||
|
||||
const selectValue = ref<string>()
|
||||
const selectValue = ref<string>('all')
|
||||
|
||||
// 设置初始列表
|
||||
const setSelectOptions = (categorys: any) => {
|
||||
@@ -79,7 +82,6 @@ watch(
|
||||
if (!newData) return
|
||||
newData.list.forEach((e: ConfigType) => {
|
||||
const value: ConfigType[] = (packages.categorys as any)[e.category]
|
||||
// @ts-ignore
|
||||
packages.categorys[e.category] = value && value.length ? [...value, e] : [e]
|
||||
packages.categoryNames[e.category] = e.categoryName
|
||||
packages.categorys['all'].push(e)
|
||||
@@ -100,6 +102,22 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => packagesStore.newPhoto,
|
||||
newPhoto => {
|
||||
if (!newPhoto) return
|
||||
const newPhotoCategory = newPhoto.category
|
||||
packages.categorys[newPhotoCategory].splice(1, 0, newPhoto)
|
||||
packages.categorys['all'].splice(1, 0, newPhoto)
|
||||
}
|
||||
)
|
||||
|
||||
// 删除图片
|
||||
const deleteHandle = (item: ConfigType, index: number) => {
|
||||
packages.categorys[item.category].splice(index, 1)
|
||||
packages.categorys['all'].splice(index, 1)
|
||||
}
|
||||
|
||||
// 处理点击事件
|
||||
const clickItemHandle = (key: string) => {
|
||||
packages.selectOptions = packages.categorys[key]
|
||||
@@ -119,6 +137,7 @@ $menuWidth: 65px;
|
||||
@include fetch-bg-color('background-color2-shallow');
|
||||
}
|
||||
.chart-content-list {
|
||||
width: 200px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -37,7 +37,8 @@
|
||||
:title="item.title"
|
||||
@click="selectChartHandle(item)"
|
||||
>
|
||||
<chart-glob-image class="list-item-img" :chartConfig="item"></chart-glob-image>
|
||||
<Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
|
||||
<chart-glob-image v-else class="list-item-img" :chartConfig="item" />
|
||||
<n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
@@ -70,7 +71,7 @@ import { ref, onUnmounted } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { createComponent } from '@/packages'
|
||||
import { ConfigType, CreateComponentType } from '@/packages/index.d'
|
||||
import { themeColor, MenuOptionsType } from '../../hooks/useAside.hook'
|
||||
import { themeColor } from '../../hooks/useLayout.hook'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { ChartModeEnum, ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||
@@ -78,6 +79,7 @@ import { isString, addEventListener, removeEventListener } from '@/utils'
|
||||
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
|
||||
import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
|
||||
import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
const props = defineProps({
|
||||
menuOptions: {
|
||||
@@ -129,7 +131,9 @@ const searchHandle = (key: string | null) => {
|
||||
}
|
||||
loading.value = true
|
||||
showPopover.value = true
|
||||
searchRes.value = List.filter((e: ConfigType) => !key || e.title.toLowerCase().includes(key.toLowerCase()))
|
||||
searchRes.value = List.filter(
|
||||
(e: ConfigType) => !e.disabled && (!key || e.title.toLowerCase().includes(key.toLowerCase()))
|
||||
)
|
||||
setTimeout(() => {
|
||||
loading.value = undefined
|
||||
}, 500)
|
||||
@@ -146,6 +150,7 @@ const listenerCloseHandle = (e: Event) => {
|
||||
|
||||
// 选择处理
|
||||
const selectChartHandle = async (item: ConfigType) => {
|
||||
if (item.disabled) return
|
||||
try {
|
||||
loadingStart()
|
||||
// 动态注册图表组件
|
||||
@@ -153,6 +158,11 @@ const selectChartHandle = async (item: ConfigType) => {
|
||||
componentInstall(item.conKey, fetchConfigComponent(item))
|
||||
// 创建新图表组件
|
||||
let newComponent: CreateComponentType = await createComponent(item)
|
||||
if (item.redirectComponent) {
|
||||
item.dataset && (newComponent.option.dataset = item.dataset)
|
||||
newComponent.chartConfig.title = item.title
|
||||
newComponent.chartConfig.chartFrame = item.chartFrame
|
||||
}
|
||||
// 添加
|
||||
chartEditStore.addComponentList(newComponent, false, true)
|
||||
// 选中
|
||||
@@ -221,10 +231,16 @@ $searchWidth: 176px;
|
||||
font-size: 12px;
|
||||
}
|
||||
&-img {
|
||||
height: 28px;
|
||||
height: 20px;
|
||||
max-width: 30px;
|
||||
margin-right: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
& > svg {
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
&:hover {
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
@@ -1,92 +1,95 @@
|
||||
import { shallowReactive, ref } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { renderLang, renderIcon } from '@/utils'
|
||||
import { themeColor, setItem, getCharts } from './useLayout.hook'
|
||||
import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/packages/index.d'
|
||||
// 图表
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
// 图标
|
||||
const { BarChartIcon } = icon.ionicons5
|
||||
const {
|
||||
TableSplitIcon,
|
||||
RoadmapIcon,
|
||||
SpellCheckIcon,
|
||||
GraphicalDataFlowIcon,
|
||||
} = icon.carbon
|
||||
|
||||
|
||||
// 图表
|
||||
export type MenuOptionsType = {
|
||||
key: string
|
||||
icon: ReturnType<typeof renderIcon>
|
||||
label: ReturnType<typeof renderLang>
|
||||
list: PackagesType
|
||||
}
|
||||
|
||||
const { getPackagesList } = usePackagesStore()
|
||||
const menuOptions: MenuOptionsType[] = []
|
||||
|
||||
const packagesListObj = {
|
||||
[PackagesCategoryEnum.CHARTS]: {
|
||||
icon: renderIcon(RoadmapIcon),
|
||||
label: PackagesCategoryName.CHARTS,
|
||||
},
|
||||
[PackagesCategoryEnum.INFORMATIONS]: {
|
||||
icon: renderIcon(SpellCheckIcon),
|
||||
label: PackagesCategoryName.INFORMATIONS,
|
||||
},
|
||||
[PackagesCategoryEnum.TABLES]: {
|
||||
icon: renderIcon(TableSplitIcon),
|
||||
label: PackagesCategoryName.TABLES,
|
||||
},
|
||||
[PackagesCategoryEnum.DECORATES]: {
|
||||
icon: renderIcon(GraphicalDataFlowIcon),
|
||||
label: PackagesCategoryName.DECORATES,
|
||||
},
|
||||
}
|
||||
|
||||
// 处理列表
|
||||
const handlePackagesList = () => {
|
||||
for (const val in getPackagesList) {
|
||||
menuOptions.push({
|
||||
key: val,
|
||||
// @ts-ignore
|
||||
icon: packagesListObj[val].icon,
|
||||
// @ts-ignore
|
||||
label: packagesListObj[val].label,
|
||||
// @ts-ignore
|
||||
list: getPackagesList[val],
|
||||
})
|
||||
}
|
||||
}
|
||||
handlePackagesList()
|
||||
|
||||
// 记录选中值
|
||||
let beforeSelect: string = menuOptions[0]['key']
|
||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||
|
||||
// 选中的对象值
|
||||
const selectOptions = ref(menuOptions[0])
|
||||
|
||||
// 点击 item
|
||||
const clickItemHandle = (key: string, item: any) => {
|
||||
selectOptions.value = item
|
||||
// 处理折叠
|
||||
if (beforeSelect === key) {
|
||||
setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
|
||||
} else {
|
||||
setItem(ChartLayoutStoreEnum.CHARTS, true, false)
|
||||
}
|
||||
beforeSelect = key
|
||||
}
|
||||
|
||||
export {
|
||||
getCharts,
|
||||
BarChartIcon,
|
||||
themeColor,
|
||||
selectOptions,
|
||||
selectValue,
|
||||
clickItemHandle,
|
||||
menuOptions,
|
||||
}
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { renderLang, renderIcon } from '@/utils'
|
||||
import { themeColor, setItem, getCharts } from './useLayout.hook'
|
||||
import { PackagesCategoryEnum, PackagesCategoryName, ConfigType } from '@/packages/index.d'
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
// 图标
|
||||
const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
|
||||
const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
|
||||
|
||||
// 图表
|
||||
export type MenuOptionsType = {
|
||||
key: string
|
||||
icon: ReturnType<typeof renderIcon>
|
||||
label: ReturnType<typeof renderLang>
|
||||
list: ConfigType[]
|
||||
}
|
||||
|
||||
const packagesListObj = {
|
||||
[PackagesCategoryEnum.CHARTS]: {
|
||||
icon: renderIcon(RoadmapIcon),
|
||||
label: PackagesCategoryName.CHARTS
|
||||
},
|
||||
[PackagesCategoryEnum.INFORMATIONS]: {
|
||||
icon: renderIcon(SpellCheckIcon),
|
||||
label: PackagesCategoryName.INFORMATIONS
|
||||
},
|
||||
[PackagesCategoryEnum.TABLES]: {
|
||||
icon: renderIcon(TableSplitIcon),
|
||||
label: PackagesCategoryName.TABLES
|
||||
},
|
||||
[PackagesCategoryEnum.DECORATES]: {
|
||||
icon: renderIcon(GraphicalDataFlowIcon),
|
||||
label: PackagesCategoryName.DECORATES
|
||||
},
|
||||
[PackagesCategoryEnum.PHOTOS]: {
|
||||
icon: renderIcon(ImageIcon),
|
||||
label: PackagesCategoryName.PHOTOS
|
||||
},
|
||||
[PackagesCategoryEnum.ICONS]: {
|
||||
icon: renderIcon(AirPlaneOutlineIcon),
|
||||
label: PackagesCategoryName.ICONS
|
||||
}
|
||||
}
|
||||
|
||||
export const useAsideHook = () => {
|
||||
const packagesStore = usePackagesStore()
|
||||
const menuOptions: MenuOptionsType[] = []
|
||||
|
||||
// 处理列表
|
||||
const handlePackagesList = () => {
|
||||
for (const val in packagesStore.getPackagesList) {
|
||||
menuOptions.push({
|
||||
key: val,
|
||||
// @ts-ignore
|
||||
icon: packagesListObj[val].icon,
|
||||
// @ts-ignore
|
||||
label: packagesListObj[val].label,
|
||||
// @ts-ignore
|
||||
list: packagesStore.getPackagesList[val]
|
||||
})
|
||||
}
|
||||
}
|
||||
handlePackagesList()
|
||||
|
||||
// 记录选中值
|
||||
let beforeSelect: string = menuOptions[0]['key']
|
||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||
|
||||
// 选中的对象值
|
||||
const selectOptions = ref(menuOptions[0])
|
||||
|
||||
// 点击 item
|
||||
const clickItemHandle = (key: string, item: any) => {
|
||||
selectOptions.value = item
|
||||
// 处理折叠
|
||||
if (beforeSelect === key) {
|
||||
setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value, false)
|
||||
} else {
|
||||
setItem(ChartLayoutStoreEnum.CHARTS, true, false)
|
||||
}
|
||||
beforeSelect = key
|
||||
}
|
||||
|
||||
return {
|
||||
getCharts,
|
||||
BarChartIcon,
|
||||
themeColor,
|
||||
selectOptions,
|
||||
selectValue,
|
||||
clickItemHandle,
|
||||
menuOptions
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,123 +1,105 @@
|
||||
<template>
|
||||
<!-- 左侧所有组件的展示列表 -->
|
||||
<content-box
|
||||
class="go-content-charts"
|
||||
:class="{ scoped: !getCharts }"
|
||||
title="组件"
|
||||
:depth="1"
|
||||
:backIcon="false"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon size="14" :depth="2">
|
||||
<bar-chart-icon></bar-chart-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
|
||||
<template #top-right>
|
||||
<charts-search v-show="getCharts" :menuOptions="menuOptions"></charts-search>
|
||||
</template>
|
||||
<!-- 图表 -->
|
||||
<aside>
|
||||
<div class="menu-width-box">
|
||||
<n-menu
|
||||
class="menu-width"
|
||||
v-model:value="selectValue"
|
||||
:options="menuOptions"
|
||||
:icon-size="16"
|
||||
:indent="18"
|
||||
@update:value="clickItemHandle"
|
||||
></n-menu>
|
||||
<div class="menu-component-box">
|
||||
<go-skeleton
|
||||
:load="!selectOptions"
|
||||
round
|
||||
text
|
||||
:repeat="2"
|
||||
style="width: 90%"
|
||||
></go-skeleton>
|
||||
<charts-option-content
|
||||
v-if="selectOptions"
|
||||
:selectOptions="selectOptions"
|
||||
:key="selectValue"
|
||||
></charts-option-content>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</content-box>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ContentBox } from '../ContentBox/index'
|
||||
import { ChartsOptionContent } from './components/ChartsOptionContent'
|
||||
import { ChartsSearch } from './components/ChartsSearch'
|
||||
import {
|
||||
getCharts,
|
||||
BarChartIcon,
|
||||
themeColor,
|
||||
selectOptions,
|
||||
selectValue,
|
||||
clickItemHandle,
|
||||
menuOptions,
|
||||
} from './hooks/useAside.hook'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 整体宽度 */
|
||||
$width: 330px;
|
||||
/* 列表的宽度 */
|
||||
$widthScoped: 65px;
|
||||
/* 此高度与 ContentBox 组件关联 */
|
||||
$topHeight: 40px;
|
||||
|
||||
@include go(content-charts) {
|
||||
width: $width;
|
||||
@extend .go-transition;
|
||||
&.scoped,
|
||||
.menu-width {
|
||||
width: $widthScoped;
|
||||
}
|
||||
.menu-width-box {
|
||||
display: flex;
|
||||
height: calc(100vh - #{$--header-height} - #{$topHeight});
|
||||
.menu-width {
|
||||
flex-shrink: 0;
|
||||
@include fetch-bg-color('background-color2');
|
||||
}
|
||||
.menu-component-box {
|
||||
flex-shrink: 0;
|
||||
width: $width - $widthScoped;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@include deep() {
|
||||
.menu-width {
|
||||
.n-menu-item {
|
||||
height: auto !important;
|
||||
&.n-menu-item--selected {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background-color: v-bind('themeColor');
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
.n-menu-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 12px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.n-menu-item-content__icon {
|
||||
font-size: 18px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<!-- 左侧所有组件的展示列表 -->
|
||||
<content-box class="go-content-charts" :class="{ scoped: !getCharts }" title="组件" :depth="1" :backIcon="false">
|
||||
<template #icon>
|
||||
<n-icon size="14" :depth="2">
|
||||
<bar-chart-icon></bar-chart-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
|
||||
<template #top-right>
|
||||
<charts-search v-show="getCharts" :menuOptions="menuOptions"></charts-search>
|
||||
</template>
|
||||
<!-- 图表 -->
|
||||
<aside>
|
||||
<div class="menu-width-box">
|
||||
<n-menu
|
||||
class="menu-width"
|
||||
v-model:value="selectValue"
|
||||
:options="menuOptions"
|
||||
:icon-size="16"
|
||||
:indent="18"
|
||||
@update:value="clickItemHandle"
|
||||
></n-menu>
|
||||
<div class="menu-component-box">
|
||||
<go-skeleton :load="!selectOptions" round text :repeat="2" style="width: 90%"></go-skeleton>
|
||||
<charts-option-content
|
||||
v-if="selectOptions"
|
||||
:selectOptions="selectOptions"
|
||||
:key="selectValue"
|
||||
></charts-option-content>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</content-box>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ContentBox } from '../ContentBox/index'
|
||||
import { ChartsOptionContent } from './components/ChartsOptionContent'
|
||||
import { ChartsSearch } from './components/ChartsSearch'
|
||||
import { useAsideHook } from './hooks/useAside.hook'
|
||||
|
||||
const { getCharts, BarChartIcon, themeColor, selectOptions, selectValue, clickItemHandle, menuOptions } = useAsideHook()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 整体宽度 */
|
||||
$width: 330px;
|
||||
/* 列表的宽度 */
|
||||
$widthScoped: 65px;
|
||||
/* 此高度与 ContentBox 组件关联 */
|
||||
$topHeight: 40px;
|
||||
|
||||
@include go(content-charts) {
|
||||
width: $width;
|
||||
@extend .go-transition;
|
||||
&.scoped,
|
||||
.menu-width {
|
||||
width: $widthScoped;
|
||||
}
|
||||
.menu-width-box {
|
||||
display: flex;
|
||||
height: calc(100vh - #{$--header-height} - #{$topHeight});
|
||||
.menu-width {
|
||||
flex-shrink: 0;
|
||||
@include fetch-bg-color('background-color2');
|
||||
}
|
||||
.menu-component-box {
|
||||
flex-shrink: 0;
|
||||
width: $width - $widthScoped;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@include deep() {
|
||||
.menu-width {
|
||||
.n-menu-item {
|
||||
height: auto !important;
|
||||
&.n-menu-item--selected {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background-color: v-bind('themeColor');
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
.n-menu-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 12px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.n-menu-item-content__icon {
|
||||
font-size: 18px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+22
-2
@@ -58,7 +58,7 @@
|
||||
<help-outline-icon></help-outline-icon>
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-text>不支持「静态组件」和「分组」</n-text>
|
||||
<n-text>不支持「静态组件」</n-text>
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<n-select
|
||||
@@ -169,7 +169,27 @@ const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
|
||||
|
||||
// 绑定组件列表
|
||||
const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
|
||||
const filterOptionList = chartEditStore.componentList.filter(item => {
|
||||
// 扁平化树形数据
|
||||
const fnFlattern = (
|
||||
data: Array<CreateComponentType | CreateComponentGroupType>
|
||||
): Array<CreateComponentType | CreateComponentGroupType> => {
|
||||
return data.reduce(
|
||||
(
|
||||
iter: Array<CreateComponentType | CreateComponentGroupType>,
|
||||
val: CreateComponentType | CreateComponentGroupType
|
||||
) => {
|
||||
if (val.groupList && val.groupList.length > 0) {
|
||||
iter.push(val)
|
||||
} else {
|
||||
iter.push(val)
|
||||
}
|
||||
return val.groupList ? [...iter, ...fnFlattern(val.groupList)] : iter
|
||||
},
|
||||
[]
|
||||
)
|
||||
}
|
||||
|
||||
const filterOptionList = fnFlattern(chartEditStore.componentList).filter(item => {
|
||||
// 排除自己
|
||||
const isNotSelf = item.id !== targetData.value.id
|
||||
// 排除静态组件
|
||||
|
||||
@@ -29,9 +29,15 @@ export const dragHandle = async (e: DragEvent) => {
|
||||
// 修改状态
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
|
||||
const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
|
||||
if (dropData.disabled) return
|
||||
|
||||
// 创建新图表组件
|
||||
let newComponent: CreateComponentType = await createComponent(dropData)
|
||||
if (dropData.redirectComponent) {
|
||||
dropData.dataset && (newComponent.option.dataset = dropData.dataset)
|
||||
newComponent.chartConfig.title = dropData.title
|
||||
newComponent.chartConfig.chartFrame = dropData.chartFrame
|
||||
}
|
||||
|
||||
setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
|
||||
chartEditStore.addComponentList(newComponent, false, true)
|
||||
|
||||
@@ -1,159 +1,159 @@
|
||||
<template>
|
||||
<div class="go-content-layers-list-item" :class="{ hover, select, 'list-mini': selectText }">
|
||||
<div class="go-flex-center item-content">
|
||||
<n-image
|
||||
class="list-img"
|
||||
object-fit="contain"
|
||||
preview-disabled
|
||||
:src="imageInfo"
|
||||
:fallback-src="requireErrorImg()"
|
||||
></n-image>
|
||||
<n-ellipsis style="margin-right: auto">
|
||||
<span class="list-text">
|
||||
{{ props.componentData.chartConfig.title }}
|
||||
</span>
|
||||
</n-ellipsis>
|
||||
<layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
|
||||
</div>
|
||||
<div :class="{ 'select-modal': select }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, ref, watch } from 'vue'
|
||||
import { requireErrorImg } from '@/utils'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { fetchImages } from '@/packages'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { LayersStatus } from '../LayersStatus/index'
|
||||
|
||||
const props = defineProps({
|
||||
componentData: {
|
||||
type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
|
||||
required: true
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
layerMode: {
|
||||
type: String as PropType<LayerModeEnum>,
|
||||
default: LayerModeEnum.THUMBNAIL
|
||||
}
|
||||
})
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
const imageInfo = ref('')
|
||||
|
||||
// 获取图片
|
||||
const fetchImageUrl = async () => {
|
||||
imageInfo.value = await fetchImages(props.componentData.chartConfig)
|
||||
}
|
||||
fetchImageUrl()
|
||||
|
||||
// 颜色
|
||||
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>
|
||||
$centerHeight: 52px;
|
||||
$centerMiniHeight: 28px;
|
||||
$textSize: 10px;
|
||||
|
||||
@include go(content-layers-list-item) {
|
||||
position: relative;
|
||||
height: $centerHeight;
|
||||
width: 90%;
|
||||
margin: 5px 5%;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
@extend .go-transition-quick;
|
||||
&.hover,
|
||||
&:hover {
|
||||
@include fetch-bg-color('background-color4');
|
||||
}
|
||||
&:hover {
|
||||
@include deep() {
|
||||
.icon-item {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-modal,
|
||||
.item-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.item-content {
|
||||
z-index: 1;
|
||||
padding: 6px 5px;
|
||||
justify-content: start !important;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.select-modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
background-color: v-bind('themeColor');
|
||||
}
|
||||
|
||||
.list-img {
|
||||
flex-shrink: 0;
|
||||
height: $centerHeight;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
border: none !important;
|
||||
padding: 2px;
|
||||
@include hover-border-color('hover-border-color');
|
||||
}
|
||||
|
||||
.list-text {
|
||||
padding-left: 6px;
|
||||
font-size: $textSize;
|
||||
}
|
||||
|
||||
/* 选中样式 */
|
||||
&.select {
|
||||
border: 1px solid v-bind('themeColor');
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
// mini样式
|
||||
&.list-mini {
|
||||
height: $centerMiniHeight;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="go-content-layers-list-item" :class="{ hover, select, 'list-mini': selectText }">
|
||||
<div class="go-flex-center item-content">
|
||||
<n-image
|
||||
class="list-img"
|
||||
object-fit="contain"
|
||||
preview-disabled
|
||||
:src="imageInfo"
|
||||
:fallback-src="requireErrorImg()"
|
||||
></n-image>
|
||||
<n-ellipsis style="margin-right: auto">
|
||||
<span class="list-text">
|
||||
{{ props.componentData.chartConfig.title }}
|
||||
</span>
|
||||
</n-ellipsis>
|
||||
<layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
|
||||
</div>
|
||||
<div :class="{ 'select-modal': select }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, PropType, ref } from 'vue'
|
||||
import { requireErrorImg } from '@/utils'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { fetchImages } from '@/packages'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { LayersStatus } from '../LayersStatus/index'
|
||||
|
||||
const props = defineProps({
|
||||
componentData: {
|
||||
type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
|
||||
required: true
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
layerMode: {
|
||||
type: String as PropType<LayerModeEnum>,
|
||||
default: LayerModeEnum.THUMBNAIL
|
||||
}
|
||||
})
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
const imageInfo = ref('')
|
||||
|
||||
// 获取图片
|
||||
const fetchImageUrl = async () => {
|
||||
imageInfo.value = await fetchImages(props.componentData.chartConfig)
|
||||
}
|
||||
fetchImageUrl()
|
||||
|
||||
// 颜色
|
||||
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>
|
||||
$centerHeight: 52px;
|
||||
$centerMiniHeight: 28px;
|
||||
$textSize: 10px;
|
||||
|
||||
@include go(content-layers-list-item) {
|
||||
position: relative;
|
||||
height: $centerHeight;
|
||||
width: 90%;
|
||||
margin: 5px 5%;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
@extend .go-transition-quick;
|
||||
&.hover,
|
||||
&:hover {
|
||||
@include fetch-bg-color('background-color4');
|
||||
}
|
||||
&:hover {
|
||||
@include deep() {
|
||||
.icon-item {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-modal,
|
||||
.item-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.item-content {
|
||||
z-index: 1;
|
||||
padding: 6px 5px;
|
||||
justify-content: start !important;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.select-modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
background-color: v-bind('themeColor');
|
||||
}
|
||||
|
||||
.list-img {
|
||||
flex-shrink: 0;
|
||||
height: $centerHeight;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
border: none !important;
|
||||
padding: 2px;
|
||||
@include hover-border-color('hover-border-color');
|
||||
}
|
||||
|
||||
.list-text {
|
||||
padding-left: 6px;
|
||||
font-size: $textSize;
|
||||
}
|
||||
|
||||
/* 选中样式 */
|
||||
&.select {
|
||||
border: 1px solid v-bind('themeColor');
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
// mini样式
|
||||
&.list-mini {
|
||||
height: $centerMiniHeight;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -132,6 +132,11 @@ export const useSync = () => {
|
||||
) => {
|
||||
// 补充 class 上的方法
|
||||
let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
|
||||
if (_componentInstance.chartConfig.redirectComponent) {
|
||||
_componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
|
||||
newComponent.chartConfig.title = _componentInstance.chartConfig.title
|
||||
newComponent.chartConfig.chartFrame = _componentInstance.chartConfig.chartFrame
|
||||
}
|
||||
if (callBack) {
|
||||
if (changeId) {
|
||||
callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
|
||||
@@ -156,7 +161,7 @@ export const useSync = () => {
|
||||
// 组件
|
||||
if (key === ChartEditStoreEnum.COMPONENT_LIST) {
|
||||
let loadIndex = 0
|
||||
const listLength = projectData[key].length;
|
||||
const listLength = projectData[key].length
|
||||
for (const comItem of projectData[key]) {
|
||||
// 设置加载数量
|
||||
let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
|
||||
|
||||
Reference in New Issue
Block a user