index.vue
2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<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'
// THINGS_KIT 重写ChartsOptionContent组件路径
import { ChartsOptionContent } from './external/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>