fix: 新增 chart 顶部按钮

This commit is contained in:
MTrun
2022-01-05 18:04:41 +08:00
parent cc5d6ae5d7
commit 1031d3e248
10 changed files with 111 additions and 14 deletions
+11 -6
View File
@@ -1,11 +1,16 @@
<template>
<div class="go-chart">
<n-layout>
<HeaderPro />
<HeaderPro>
<template #left>
<HeaderLeftBtn />
</template>
<template #ri-left>
<HeaderRightBtn />
</template>
</HeaderPro>
<n-layout-content>
<TransitionMain>
<router-view />
</TransitionMain>
</n-layout-content>
</n-layout>
</div>
@@ -13,8 +18,8 @@
<script setup lang="ts">
import { HeaderPro } from '@/layout/components/HeaderPro'
import { requireFallbackImg } from '@/utils'
import { TransitionMain } from '@/layout/components/TransitionMain/index'
import { HeaderLeftBtn } from './layout/components/HeaderLeftBtn/index'
import { HeaderRightBtn } from './layout/components/HeaderRightBtn/index'
</script>
<style lang="scss" scoped>
@@ -0,0 +1,3 @@
import HeaderLeftBtn from './index.vue'
export { HeaderLeftBtn }
@@ -0,0 +1,39 @@
<template>
<n-space>
<n-tooltip
v-for="item in btnList"
:key="item.title"
placement="bottom"
trigger="hover"
>
<template #trigger>
<n-button type="info" size="small" ghost>
<component :is="item.icon"></component>
</n-button>
</template>
<span>
{{ item.title }}
</span>
</n-tooltip>
</n-space>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { icon } from '@/plugins'
const { AlbumsIcon, BarChartIcon } = icon.ionicons5
import { renderIcon } from '@/utils'
const btnList = reactive([
{
select: true,
title: '图层控制',
icon: renderIcon(AlbumsIcon)
},
{
select: true,
title: '图表组件',
icon: renderIcon(BarChartIcon)
}
])
</script>
@@ -0,0 +1,3 @@
import HeaderRightBtn from './index.vue'
export { HeaderRightBtn }
@@ -0,0 +1,37 @@
<template>
<n-space class="go-mt-0">
<n-button v-for="item in btnList" :key="item.title" ghost>
<template #icon>
<component :is="item.icon"></component>
</template>
<span>
{{ item.title }}
</span>
</n-button>
</n-space>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { renderIcon } from '@/utils'
import { icon } from '@/plugins'
const { DesktopOutlineIcon, SendIcon } = icon.ionicons5
const btnList = reactive([
{
select: true,
title: '预览',
icon: renderIcon(DesktopOutlineIcon)
},
{
select: true,
title: '发布',
icon: renderIcon(SendIcon)
}
])
</script>
<style lang="scss" scoped>
.align-center {
margin-top: -4px;
}
</style>
-1
View File
@@ -25,7 +25,6 @@
<script setup lang="ts">
import { Sider } from './layout/components/Sider'
// import { Header } from './layout/components/Header/index'
import { HeaderPro } from '@/layout/components/HeaderPro'
import { TransitionMain } from '@/layout/components/TransitionMain/index'
</script>
@@ -95,7 +95,7 @@ const {
CopyIcon,
TrashIcon,
PencilIcon,
ApertureSharpIcon,
DesktopOutlineIcon,
DownloadIcon,
HammerIcon,
SendIcon
@@ -126,7 +126,7 @@ const selectOptions = reactive([
{
label: t('global.r_preview'),
key: 'preview',
icon: renderIcon(ApertureSharpIcon)
icon: renderIcon(DesktopOutlineIcon)
},
{
label: t('global.r_copy'),