fix: 修改左侧的渲染样式

This commit is contained in:
MTrun 2022-01-12 10:41:26 +08:00
parent 5030cfe099
commit 3a87f0dd30
6 changed files with 76 additions and 17 deletions

View File

@ -22,11 +22,11 @@ export const getThemeOverridesHook = () => {
}
const dartObject = {
common: {
primaryColor: designStore.appTheme,
primaryColor: designStore.getAppTheme,
...commonObj.common
},
LoadingBar: {
colorLoading: designStore.appTheme
colorLoading: designStore.getAppTheme
}
}
return designStore.getDarkTheme ? dartObject : lightObject

View File

@ -44,7 +44,8 @@ import {
import {
TableSplit as TableSplitIcon,
Roadmap as RoadmapIcon,
SpellCheck as SpellCheckIcon
SpellCheck as SpellCheckIcon,
GraphicalDataFlow as GraphicalDataFlowIcon
} from '@vicons/carbon'
const ionicons5 = {
@ -131,12 +132,14 @@ const ionicons5 = {
}
const carbon = {
// 信息
SpellCheckIcon,
// 图表
RoadmapIcon,
// 信息
SpellCheckIcon,
// 表格
TableSplitIcon
TableSplitIcon,
// 装饰
GraphicalDataFlowIcon
}
// https://www.xicons.org/#/ 还有很多

View File

@ -0,0 +1,3 @@
import DecorateCommon from './index.vue'
export { DecorateCommon }

View File

@ -0,0 +1,9 @@
<template>
<div>
我是装饰咯
</div>
</template>
<script setup lang="Ts"></script>
<style lang="scss" scoped></style>

View File

@ -2,13 +2,13 @@
<ContentBox
class="go-content-charts"
:class="{ scoped: !getCharts }"
title="全部组件"
title="组件"
:depth="1"
:backIcon="false"
>
<template #icon>
<n-icon size="14" :depth="2">
<!-- <BarChartIcon /> -->
<BarChartIcon />
</n-icon>
</template>
<!-- 图表 -->
@ -38,19 +38,27 @@ import { icon } from '@/plugins'
import { renderLang, renderIcon } from '@/utils'
import { ContentBox } from '../ContentBox/index'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { ChartCommon } from './components/ChartCommon'
import { TableCommon } from './components/TableCommon'
import { TextCommon } from './components/TextCommon'
import { DecorateCommon } from './components/DecorateCommon'
//
const { BarChartIcon } = icon.ionicons5
const { TableSplitIcon, RoadmapIcon, SpellCheckIcon } = icon.carbon
const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
//
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
//
const { setItem } = useChartLayoutStore()
const { getCharts } = toRefs(useChartLayoutStore())
//
const collapsed = ref(false)
const menuOptions = reactive([
{
key: 'ChartCommon',
@ -69,13 +77,19 @@ const menuOptions = reactive([
icon: renderIcon(TableSplitIcon),
label: renderLang('表格'),
node: TextCommon
},
{
key: 'DecorateCommon',
icon: renderIcon(GraphicalDataFlowIcon),
label: renderLang('装饰'),
node: DecorateCommon
}
])
//
let beforeSelect: string = menuOptions[0]['key']
const selectValue = ref<string>(menuOptions[0]['key'])
//
const selectNode = ref(menuOptions[0]['node'])
// item
@ -90,13 +104,17 @@ const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
}
beforeSelect = key
}
</script>
<style lang="scss" scoped>
/* 整体宽度 */
$width: 300px;
$widthScoped: 80px;
/* 列表的宽度 */
$widthScoped: 65px;
/* 此高度与 ContentBox 组件关联*/
$topHeight: 36px;
@include go(content-charts) {
width: $width;
@extend .go-transition;
@ -116,11 +134,33 @@ $topHeight: 36px;
}
}
@include deep() {
.n-menu-item-content {
padding: 0 12px !important;
}
.n-menu-item-content__icon {
margin-right: 0 !important;
.n-menu-item {
/* position: relative; */
height: auto !important;
&.n-menu-item--selected {
&::after {
content: '';
position: absolute;
left: 2px;
top: 0;
height: 100%;
width: 3px;
background-color: v-bind('themeColor');
/* background-color: rgb(62, 202, 172); */
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: 12px !important;
}
.n-menu-item-content__icon {
font-size: 18px !important;
margin-right: 0 !important;
}
}
}
}

View File

@ -1,4 +1,5 @@
<template>
<div class="go-bg-point"></div>
<div class="go-chart">
<n-layout>
<HeaderPro>
@ -35,6 +36,9 @@ import { ContentDetails } from './components/ContentDetails/index'
<style lang="scss" scoped>
$height: 100vh;
@include go('bg-point') {
}
@include go('chart') {
height: $height;
overflow: hidden;