github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-04-23 00:00:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增全局测试

Browse Source
This commit is contained in:
MTrun
2022-02-23 14:11:33 +08:00
parent c071cb5a49
commit 40a129aafd
13 changed files with 258 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChartItemSetting/CollapseItem.vue
+22
View File
@@ -0,0 +1,22 @@
<template>
<n-divider style="margin: 10px 0" />
<n-collapse arrow-placement="right" default-expanded-names="1">
<!-- 右侧 -->
<template #header-extra>
<slot name="header" />
</template>
<n-collapse-item :title="name" name="1">
<slot />
</n-collapse-item>
</n-collapse>
</template>
<script setup lang="ts">
defineProps({
name: {
type: String,
required: true
}
})
</script>
src/components/ChartItemSetting/GlobalSetting.vue
+150
View File
@@ -0,0 +1,150 @@
<template>
<div class="go-global-setting">
<CollapseItem name="标题">
<SettingItemBox name="标题">
<SettingItem width="200">
<n-color-picker v-model:value="title.textStyle.color" size="small" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="副标题">
<SettingItem width="200">
<n-color-picker
size="small"
v-model:value="title.subtextStyle.color"
/>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="X轴">
<SettingItemBox name="文本">
<SettingItem name="颜色">
<n-color-picker
size="small"
v-model:value="xAxis.nameTextStyle.color"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="轴线">
<SettingItem name="颜色">
<n-color-picker
v-model:value="xAxis.axisLine.lineStyle.color"
size="small"
/>
</SettingItem>
<SettingItem name="粗细">
<n-input-number
v-model:value="xAxis.axisLine.lineStyle.width"
:min="1"
size="small"
/>
</SettingItem>
<SettingItem name="对齐零">
<n-space>
<n-switch v-model:value="xAxis.axisLine.onZero" size="small" />
</n-space>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="分割线">
<SettingItem name="颜色">
<n-color-picker
v-model:value="xAxis.splitLine.lineStyle.color"
size="small"
/>
</SettingItem>
<SettingItem name="粗细">
<n-input-number
v-model:value="xAxis.splitLine.lineStyle.width"
:min="1"
size="small"
/>
</SettingItem>
<SettingItem name="类型">
<n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="Y轴">
<SettingItemBox name="文本">
<SettingItem name="颜色">
<n-color-picker
size="small"
v-model:value="yAxis.nameTextStyle.color"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="轴线">
<SettingItem name="颜色">
<n-color-picker
v-model:value="yAxis.axisLine.lineStyle.color"
size="small"
/>
</SettingItem>
<SettingItem name="粗细">
<n-input-number
v-model:value="yAxis.axisLine.lineStyle.width"
:min="1"
size="small"
/>
</SettingItem>
<SettingItem name="对齐零">
<n-space>
<n-switch v-model:value="yAxis.axisLine.onZero" size="small" />
</n-space>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="分割线">
<SettingItem name="颜色">
<n-color-picker
v-model:value="yAxis.splitLine.lineStyle.color"
size="small"
/>
</SettingItem>
<SettingItem name="粗细">
<n-input-number
v-model:value="yAxis.splitLine.lineStyle.width"
:min="1"
size="small"
/>
</SettingItem>
<SettingItem name="类型">
<n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="图例">
<SettingItemBox name="图例文字">
<SettingItem>
<n-color-picker size="small" v-model:value="legend.textStyle.color" />
</SettingItem>
</SettingItemBox>
</CollapseItem>
</div>
</template>
<script setup lang="ts">
import { toRefs, PropType } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { axisConf } from '@/packages/chartConfiguration/echarts/index'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/ChartItemSetting/index'
const props = defineProps({
data: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
}
})
const { title, xAxis, yAxis, legend } = toRefs(props.data)
</script>
<style lang="scss" scoped>
@include go(global-setting) {
}
</style>
src/components/ChartItemSetting/SettingItem.vue
+32
View File
@@ -0,0 +1,32 @@
<template>
<div class="go-setting-item" :style="{ width: width + 'px' }">
<slot />
<n-text class="name" depth="3">{{ name }}</n-text>
</div>
</template>
<script setup lang="ts">
defineProps({
name: {
type: String,
required: false
},
width: {
type: Number,
required: false
}
})
</script>
<style lang="scss" scoped>
@include go(setting-item) {
display: flex;
flex-direction: column;
min-width: 110px;
text-align: start;
margin-bottom: 5px;
.name {
margin-top: 2px;
}
}
</style>
src/components/ChartItemSetting/SettingItemBox.vue
+38
View File
@@ -0,0 +1,38 @@
<template>
<div class="go-config-item-box">
<n-text class="item-left" depth="2">{{ name }}</n-text>
<div class="item-right" justify="space-between">
<slot />
</div>
</div>
</template>
<script setup lang="ts">
defineProps({
name: {
type: String,
required: true
}
})
</script>
<style lang="scss" scoped>
$leftWidth: 80px;
@include go('config-item-box') {
position: relative;
display: flex;
margin-top: 10px;
.item-left {
width: $leftWidth;
text-align: left;
margin-left: 10px;
font-size: 12px;
}
.item-right {
display: grid;
grid-column-gap: 10px;
grid-template-columns: 1fr 1fr;
width: calc(100% - #{$leftWidth});
}
}
</style>
src/components/ChartItemSetting/index.ts
+9
View File
@@ -0,0 +1,9 @@
// 设置项布局
import SettingItem from './SettingItem.vue'
import SettingItemBox from './SettingItemBox.vue'
import CollapseItem from './CollapseItem.vue'
// 全局配置属性通用模板
import GlobalSetting from './GlobalSetting.vue'
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting }