fix: 修改左侧的渲染样式
This commit is contained in:
parent
5030cfe099
commit
3a87f0dd30
@ -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
|
||||
|
@ -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/#/ 还有很多
|
||||
|
@ -0,0 +1,3 @@
|
||||
import DecorateCommon from './index.vue'
|
||||
|
||||
export { DecorateCommon }
|
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
我是装饰咯
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="Ts"></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user