diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts
index 9c6618d0..31a17036 100644
--- a/src/plugins/naive.ts
+++ b/src/plugins/naive.ts
@@ -9,6 +9,7 @@ import {
NH4,
NText,
NTime,
+ NEllipsis,
NConfigProvider,
NMessageProvider,
NDialogProvider,
@@ -91,6 +92,7 @@ const naive = create({
NH4,
NText,
NTime,
+ NEllipsis,
NMessageProvider,
NDialogProvider,
NConfigProvider,
diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss
index cfa7aaec..a93904db 100644
--- a/src/styles/common/style.scss
+++ b/src/styles/common/style.scss
@@ -5,7 +5,7 @@
// extends
// 过度
.go-transition {
- transition: all 0.2s;
+ transition: all 0.4s;
}
.go-flex-center {
@@ -15,6 +15,10 @@
text-align: center;
}
+.go-flex-no-wrap {
+ flex-wrap: nowrap!important;
+}
+
.go-absolute-center {
position: absolute;
top: 50%;
diff --git a/src/views/chart/components/ContentBox/index.vue b/src/views/chart/components/ContentBox/index.vue
index 0de8a5ea..ea232572 100644
--- a/src/views/chart/components/ContentBox/index.vue
+++ b/src/views/chart/components/ContentBox/index.vue
@@ -1,10 +1,22 @@
<template>
<div class="go-content-box" :class="[`bg-depth${depth}`, flex && 'flex']">
- <div v-if="showTop" class="top go-mt-0">
- <n-text> {{ title }} </n-text>
+ <div v-if="showTop" class="top go-mt-0 go-flex-no-wrap">
+ <n-space class="go-flex-no-wrap">
+ <n-ellipsis>
+ <n-text>{{ title }}</n-text>
+ </n-ellipsis>
+ <div class="mt-1">
+ <slot name="icon"></slot>
+ </div>
+ </n-space>
<n-space>
<slot name="top-right"></slot>
- <n-icon size="20" class="go-cursor-pointer">
+ <n-icon
+ v-show="backIcon"
+ size="20"
+ class="go-cursor-pointer"
+ @click="backHandle"
+ >
<ChevronBackOutlineIcon />
</n-icon>
</n-space>
@@ -25,6 +37,7 @@
<script setup lang="ts">
import { icon } from '@/plugins'
const { ChevronBackOutlineIcon } = icon.ionicons5
+const emit = defineEmits(['back'])
defineProps({
title: String,
@@ -40,12 +53,21 @@ defineProps({
type: Boolean,
default: false
},
+ // back
+ backIcon: {
+ type: Boolean,
+ default: true
+ },
// 背景深度
depth: {
type: Number,
default: 1
}
})
+
+const backHandle = () => {
+ emit('back')
+}
</script>
<style lang="scss" scoped>
@@ -89,9 +111,13 @@ $topHeight: 36px;
.bottom {
display: flex;
justify-content: space-between;
+ flex-wrap: nowrap;
align-items: center;
height: 36px;
padding: 0 10px;
+ .mt-1 {
+ margin-top: 2px;
+ }
}
.content {
height: calc(100vh - #{$--header-height} - #{$topHeight});
diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue
index efcfb596..a7b88023 100644
--- a/src/views/chart/components/ContentCharts/index.vue
+++ b/src/views/chart/components/ContentCharts/index.vue
@@ -1,20 +1,36 @@
<template>
- <ContentBox class="go-content-charts" title="图表" :depth="2">
- <n-scrollbar></n-scrollbar>
+ <ContentBox
+ class="go-content-charts"
+ :class="{ scoped: !getCharts }"
+ title="图表"
+ :depth="2"
+ :backIcon="getCharts"
+ >
+ <template #icon>
+ <n-icon size="14" :depth="2">
+ <component :is="BarChartIcon" />
+ </n-icon>
+ </template>
</ContentBox>
</template>
<script setup lang="ts">
-import { reactive } from 'vue'
-import { renderIcon } from '@/utils'
+import { toRefs } from 'vue'
import { icon } from '@/plugins'
-const {} = icon.ionicons5
+const { BarChartIcon } = icon.ionicons5
import { ContentBox } from '../ContentBox/index'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+const { getCharts } = toRefs(useChartLayoutStore())
</script>
<style lang="scss" scoped>
-$wight: 200px;
+$wight: 300px;
+$wightScoped: 80px;
@include go(content-charts) {
width: $wight;
+ @extend .go-transition;
+ &.scoped {
+ width: $wightScoped;
+ }
}
</style>
diff --git a/src/views/chart/components/ContentDetails/components/Behind/index.ts b/src/views/chart/components/ContentDetails/components/Behind/index.ts
new file mode 100644
index 00000000..45dcf4d8
--- /dev/null
+++ b/src/views/chart/components/ContentDetails/components/Behind/index.ts
@@ -0,0 +1,3 @@
+import Behind from './index.vue'
+
+export { Behind }
diff --git a/src/views/chart/components/ContentDetails/components/Behind/index.vue b/src/views/chart/components/ContentDetails/components/Behind/index.vue
new file mode 100644
index 00000000..294e8810
--- /dev/null
+++ b/src/views/chart/components/ContentDetails/components/Behind/index.vue
@@ -0,0 +1,13 @@
+<template>
+ <div>
+ 后端数据
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/chart/components/ContentDetails/components/Setting/index.ts b/src/views/chart/components/ContentDetails/components/Setting/index.ts
new file mode 100644
index 00000000..b4667c58
--- /dev/null
+++ b/src/views/chart/components/ContentDetails/components/Setting/index.ts
@@ -0,0 +1,3 @@
+import Setting from './index.vue'
+
+export { Setting }
diff --git a/src/views/chart/components/ContentDetails/components/Setting/index.vue b/src/views/chart/components/ContentDetails/components/Setting/index.vue
new file mode 100644
index 00000000..93348d95
--- /dev/null
+++ b/src/views/chart/components/ContentDetails/components/Setting/index.vue
@@ -0,0 +1,13 @@
+<template>
+ <div>
+ 设置
+ </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/chart/components/ContentDetails/index.vue b/src/views/chart/components/ContentDetails/index.vue
index 9eb182e8..127d7c95 100644
--- a/src/views/chart/components/ContentDetails/index.vue
+++ b/src/views/chart/components/ContentDetails/index.vue
@@ -1,27 +1,25 @@
<template>
- <ContentBox class="go-content-layers go-boderbox" :showTop="false">
- <n-tabs size="small" type="segment">
- <n-tab-pane name="chap1" display-directive="show:lazy">
+ <ContentBox
+ class="go-content-layers go-boderbox"
+ :class="{ scoped: !chartLayoutStore.getDetails }"
+ :showTop="false"
+ >
+ <n-tabs class="tabs-box" size="small" type="segment">
+ <n-tab-pane
+ v-for="item in tabList"
+ :key="item.key"
+ :name="item.key"
+ display-directive="show:lazy"
+ >
<template #tab>
<n-space>
- <span>配置项</span>
+ <span>{{ item.title }}</span>
<n-icon size="16" class="icon-position">
- <CubeIcon />
+ <component :is="item.icon"></component>
</n-icon>
</n-space>
</template>
- 1
- </n-tab-pane>
- <n-tab-pane name="chap2" display-directive="show:lazy">
- <template #tab>
- <n-space>
- <span>后端数据</span>
- <n-icon size="16" class="icon-position">
- <FlashIcon />
- </n-icon>
- </n-space>
- </template>
- 2
+ <component :is="item.render"></component>
</n-tab-pane>
</n-tabs>
</ContentBox>
@@ -32,8 +30,28 @@ import { reactive } from 'vue'
import { renderIcon } from '@/utils'
import { icon } from '@/plugins'
import { ContentBox } from '../ContentBox/index'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { Setting } from './components/Setting/index'
+import { Behind } from './components/Behind/index'
+
+const chartLayoutStore = useChartLayoutStore()
const { CubeIcon, FlashIcon } = icon.ionicons5
+
+const tabList = reactive([
+ {
+ key: 'setting',
+ title: '配置项',
+ icon: renderIcon(CubeIcon),
+ render: Setting
+ },
+ {
+ key: 'behind',
+ title: '后端数据',
+ icon: renderIcon(FlashIcon),
+ render: Behind
+ }
+])
</script>
<style lang="scss" scoped>
@@ -41,8 +59,18 @@ $wight: 400px;
@include go(content-layers) {
width: $wight;
padding: 10px;
+ overflow: hidden;
+ @extend .go-transition;
.icon-position {
padding-top: 2px;
}
+ &.scoped {
+ width: 0;
+ padding: 0;
+ }
+ .tabs-box {
+ /* padding 值 */
+ width: $wight - 2 * 10;
+ }
}
</style>
diff --git a/src/views/chart/components/ContentLayers/index.vue b/src/views/chart/components/ContentLayers/index.vue
index 1cf62ef9..71b745f2 100644
--- a/src/views/chart/components/ContentLayers/index.vue
+++ b/src/views/chart/components/ContentLayers/index.vue
@@ -1,18 +1,38 @@
<template>
- <ContentBox class="go-content-layers" title="图层"> </ContentBox>
+ <ContentBox
+ class="go-content-layers"
+ :class="{ scoped: !chartLayoutStore.getLayers }"
+ title="图层"
+ @back="backHandle"
+ >
+ <template #icon>
+ <n-icon size="16" :depth="2">
+ <component :is="LayersIcon" />
+ </n-icon>
+ </template>
+ </ContentBox>
</template>
<script setup lang="ts">
-import { reactive } from 'vue'
-import { renderIcon } from '@/utils'
-import { icon } from '@/plugins'
-const {} = icon.ionicons5
import { ContentBox } from '../ContentBox/index'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { icon } from '@/plugins'
+const { LayersIcon } = icon.ionicons5
+const chartLayoutStore = useChartLayoutStore()
+
+const backHandle = () => {
+ chartLayoutStore.setItem('layers', false)
+}
</script>
<style lang="scss" scoped>
$wight: 200px;
@include go(content-layers) {
width: $wight;
+ overflow: hidden;
+ @extend .go-transition;
+ &.scoped {
+ width: 0;
+ }
}
</style>