fix: 修改文件建构

This commit is contained in:
奔跑的面条
2022-04-14 10:05:57 +08:00
parent 9e9410533c
commit 3c85322450
76 changed files with 76 additions and 117 deletions
@@ -0,0 +1,36 @@
<template>
<n-divider style="margin: 10px 0;"></n-divider>
<n-collapse arrow-placement="right" :default-expanded-names="expanded ? name : null" accordion>
<!-- 右侧 -->
<template #header-extra>
<div @click="click">
<slot name="header"></slot>
</div>
</template>
<n-collapse-item :title="name" :name="name">
<slot></slot>
</n-collapse-item>
</n-collapse>
</template>
<script setup lang="ts">
defineProps({
name: {
type: String,
required: true
},
expanded: {
type: Boolean,
required: false,
default: false
}
})
// const name = new Date().getTime()
const click = (e:MouseEvent) => {
e.preventDefault()
e.stopPropagation()
}
</script>
@@ -0,0 +1,319 @@
<template>
<collapse-item v-if="title" name="标题">
<template #header>
<n-switch
v-show="inChart"
v-model:value="title.show"
size="small"
></n-switch>
</template>
<setting-item-box name="标题">
<setting-item name="颜色">
<n-color-picker
v-model:value="title.textStyle.color"
size="small"
></n-color-picker>
</setting-item>
<setting-item name="大小">
<n-input-number
v-model:value="title.textStyle.fontSize"
:min="1"
size="small"
></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="副标题">
<setting-item name="颜色">
<n-color-picker
size="small"
v-model:value="title.subtextStyle.color"
></n-color-picker>
</setting-item>
<setting-item name="大小">
<n-input-number
v-model:value="title.subtextStyle.fontSize"
:min="1"
size="small"
></n-input-number>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item v-if="xAxis" name="X轴">
<template #header>
<n-switch
v-show="inChart"
v-model:value="xAxis.show"
size="small"
></n-switch>
</template>
<setting-item-box name="名称">
<setting-item name="颜色">
<n-color-picker
size="small"
v-model:value="xAxis.nameTextStyle.color"
></n-color-picker>
</setting-item>
</setting-item-box>
<setting-item-box name="标签">
<setting-item v-show="inChart" name="展示">
<n-space>
<n-switch
v-model:value="xAxis.axisLabel.show"
size="small"
></n-switch>
</n-space>
</setting-item>
<setting-item name="颜色">
<n-color-picker
size="small"
v-model:value="xAxis.axisLabel.color"
></n-color-picker>
</setting-item>
</setting-item-box>
<setting-item-box name="轴线">
<setting-item name="颜色">
<n-color-picker
v-model:value="xAxis.axisLine.lineStyle.color"
size="small"
></n-color-picker>
</setting-item>
<setting-item name="粗细">
<n-input-number
v-model:value="xAxis.axisLine.lineStyle.width"
:min="1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="对齐零">
<n-space>
<n-switch
v-model:value="xAxis.axisLine.onZero"
size="small"
></n-switch>
</n-space>
</setting-item>
</setting-item-box>
<setting-item-box name="刻度">
<setting-item v-show="inChart" name="展示">
<n-space>
<n-switch v-model:value="xAxis.axisTick.show" size="small"></n-switch>
</n-space>
</setting-item>
<setting-item name="长度">
<n-input-number
v-model:value="xAxis.axisTick.length"
:min="1"
size="small"
></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="分割线">
<setting-item v-show="inChart" name="展示">
<n-space>
<n-switch
v-model:value="xAxis.splitLine.show"
size="small"
></n-switch>
</n-space>
</setting-item>
<setting-item name="颜色">
<n-color-picker
v-model:value="xAxis.splitLine.lineStyle.color"
size="small"
></n-color-picker>
</setting-item>
<setting-item name="粗细">
<n-input-number
v-model:value="xAxis.splitLine.lineStyle.width"
:min="1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="类型">
<n-select
v-model:value="xAxis.splitLine.lineStyle.type"
size="small"
:options="axisConfig.splitLint.lineStyle.type"
></n-select>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="xAxis.position"
size="small"
:options="axisConfig.xposition"
></n-select>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item v-if="yAxis" name="Y轴">
<template #header>
<n-switch
v-show="inChart"
v-model:value="yAxis.show"
size="small"
></n-switch>
</template>
<setting-item-box name="名称">
<setting-item name="颜色">
<n-color-picker
size="small"
v-model:value="yAxis.nameTextStyle.color"
></n-color-picker>
</setting-item>
</setting-item-box>
<setting-item-box name="标签">
<setting-item v-show="inChart" name="展示">
<n-space>
<n-switch
v-model:value="yAxis.axisLabel.show"
size="small"
></n-switch>
</n-space>
</setting-item>
<setting-item name="颜色">
<n-color-picker
size="small"
v-model:value="yAxis.axisLabel.color"
></n-color-picker>
</setting-item>
</setting-item-box>
<setting-item-box name="轴线">
<setting-item v-show="inChart" name="展示">
<n-space>
<n-switch v-model:value="yAxis.axisLine.show" size="small"></n-switch>
</n-space>
</setting-item>
<setting-item name="颜色">
<n-color-picker
v-model:value="yAxis.axisLine.lineStyle.color"
size="small"
></n-color-picker>
</setting-item>
<setting-item name="粗细">
<n-input-number
v-model:value="yAxis.axisLine.lineStyle.width"
:min="1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="对齐零">
<n-space>
<n-switch
v-model:value="yAxis.axisLine.onZero"
size="small"
></n-switch>
</n-space>
</setting-item>
</setting-item-box>
<setting-item-box name="刻度">
<setting-item v-show="inChart" name="展示">
<n-space>
<n-switch v-model:value="yAxis.axisTick.show" size="small"></n-switch>
</n-space>
</setting-item>
<setting-item name="长度">
<n-input-number
v-model:value="yAxis.axisTick.length"
:min="1"
size="small"
></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="分割线">
<setting-item v-show="inChart" name="展示">
<n-space>
<n-switch
v-model:value="yAxis.splitLine.show"
size="small"
></n-switch>
</n-space>
</setting-item>
<setting-item name="颜色">
<n-color-picker
v-model:value="yAxis.splitLine.lineStyle.color"
size="small"
></n-color-picker>
</setting-item>
<setting-item name="粗细">
<n-input-number
v-model:value="yAxis.splitLine.lineStyle.width"
:min="1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="类型">
<n-select
v-model:value="yAxis.splitLine.lineStyle.type"
size="small"
:options="axisConfig.splitLint.lineStyle.type"
></n-select>
</setting-item>
<setting-item name="位置">
<n-select
v-model:value="yAxis.position"
size="small"
:options="axisConfig.yposition"
></n-select>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item v-if="legend" name="图例">
<template #header>
<n-switch
v-show="inChart"
v-model:value="legend.show"
size="small"
></n-switch>
</template>
<setting-item-box name="图例文字">
<setting-item>
<n-color-picker
size="small"
v-model:value="legend.textStyle.color"
></n-color-picker>
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
import {
CollapseItem,
SettingItemBox,
SettingItem
} from '@/components/Pages/ChartItemSetting'
const props = defineProps({
optionData: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
},
inChart: {
type: Boolean,
required: false,
default: false
}
})
const title = computed(() => {
return props.optionData.title
})
const xAxis = computed(() => {
return props.optionData.xAxis
})
const yAxis = computed(() => {
return props.optionData.yAxis
})
const legend = computed(() => {
return props.optionData.legend
})
</script>
@@ -0,0 +1,42 @@
<template>
<setting-item-box name="名称" :alone="true">
<n-input
type="text"
maxlength="12"
minlength="1"
placeholder="请输入图表名称"
size="small"
clearable
show-count
v-model:value="chartConfig.title"
@focus="handleFocus"
@blur="handleBlur"
></n-input>
</setting-item-box>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { ConfigType } from '@/packages/index.d'
const props = defineProps({
chartConfig: {
type: Object as PropType<ConfigType>,
required: true
},
})
let valueCatch = ''
const handleFocus = () => {
valueCatch = props.chartConfig.title
}
const handleBlur = () => {
if(!props.chartConfig.title.length) {
window['$message'].warning('请输入至少一个字符!')
props.chartConfig.title = valueCatch
}
}
</script>
@@ -0,0 +1,128 @@
<template>
<n-divider style="margin: 10px 0;" ></n-divider>
<n-space :size="8" justify="space-between" style="margin-top: 10px;">
<n-button
secondary
v-for="item in positionList"
:key="item.key"
@click="positonHandle(item.key)"
>
<template #icon>
<component :is="item.icon" ></component>
</template>
</n-button>
</n-space>
<setting-item-box name="边距">
<n-input-number
v-model:value="chartAttr.y"
:min="0"
size="small"
placeholder="px"
>
<template #prefix>
<n-text depth="3">上边</n-text>
</template>
</n-input-number>
<n-input-number
v-model:value="chartAttr.x"
:min="0"
size="small"
placeholder="px"
>
<template #prefix>
<n-text depth="3"></n-text>
</template>
</n-input-number>
</setting-item-box>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { PickCreateComponentType } from '@/packages/index.d'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { renderIcon } from '@/utils'
import { icon } from '@/plugins/index'
import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
const {
AlignHorizontalLeftIcon,
AlignVerticalCenterIcon,
AlignVerticalTopIcon,
AlignHorizontalCenterIcon,
AlignHorizontalRightIcon,
AlignVerticalBottomIcon
} = icon.carbon
const positionList = [
{
key: 'AlignHorizontalLeftIcon',
lable: '局左',
icon: renderIcon(AlignHorizontalLeftIcon)
},
{
key: 'AlignVerticalCenterIcon',
lable: 'X轴居中',
icon: renderIcon(AlignVerticalCenterIcon)
},
{
key: 'AlignHorizontalRightIcon',
lable: '局右',
icon: renderIcon(AlignHorizontalRightIcon)
},
{
key: 'AlignVerticalTopIcon',
lable: '顶部',
icon: renderIcon(AlignVerticalTopIcon)
},
{
key: 'AlignHorizontalCenterIcon',
lable: 'Y轴居中',
icon: renderIcon(AlignHorizontalCenterIcon)
},
{
key: 'AlignVerticalBottomIcon',
lable: '底部',
icon: renderIcon(AlignVerticalBottomIcon)
}
]
const props = defineProps({
canvasConfig: {
type: Object as PropType<EditCanvasConfigType>,
required: true
},
chartAttr: {
type: Object as PropType<PickCreateComponentType<'attr'>>,
required: true
}
})
const positonHandle = (key: string) => {
switch (key) {
// 局左
case positionList[0]['key']:
props.chartAttr.x = 0
break
// X轴居中
case positionList[1]['key']:
props.chartAttr.y = (props.canvasConfig.height - props.chartAttr.h) / 2
break
// 局右
case positionList[2]['key']:
props.chartAttr.x = props.canvasConfig.width - props.chartAttr.w
break
// 顶部
case positionList[3]['key']:
props.chartAttr.y = 0
break
// Y轴居中
case positionList[4]['key']:
props.chartAttr.x = (props.canvasConfig.width - props.chartAttr.w) / 2
break
// 底部
case positionList[5]['key']:
props.chartAttr.y = props.canvasConfig.height - props.chartAttr.h
break
}
}
</script>
@@ -0,0 +1,32 @@
<template>
<div class="go-setting-item" :style="{ width: width + 'px' }">
<slot ></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>
@@ -0,0 +1,55 @@
<template>
<div class="go-config-item-box">
<n-text class="item-left" depth="2">
{{ name }}
<n-space :size="5">
<slot name="name"></slot>
</n-space>
</n-text>
<div
class="item-right"
justify="space-between"
:style="{
gridTemplateColumns: alone ? '1fr' : '1fr 1fr'
}"
>
<slot></slot>
</div>
</div>
</template>
<script setup lang="ts">
defineProps({
name: {
type: String,
required: false
},
alone: {
type: Boolean,
default: false,
required: false
}
})
</script>
<style lang="scss" scoped>
$leftWidth: 60px;
@include go('config-item-box') {
position: relative;
display: flex;
margin: 20px 0;
.item-left {
width: $leftWidth;
text-align: left;
margin-top: 4px;
margin-left: 10px;
font-size: 12px;
}
.item-right {
display: grid;
grid-column-gap: 10px;
grid-template-columns: 1fr 1fr;
width: calc(100% - #{$leftWidth});
}
}
</style>
@@ -0,0 +1,37 @@
<template>
<setting-item-box name="尺寸">
<n-input-number
v-model:value="chartAttr.w"
:min="50"
size="small"
placeholder="px"
>
<template #prefix>
<n-text depth="3">宽度</n-text>
</template>
</n-input-number>
<n-input-number
v-model:value="chartAttr.h"
:min="50"
size="small"
placeholder="px"
>
<template #prefix>
<n-text depth="3">高度</n-text>
</template>
</n-input-number>
</setting-item-box>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { PickCreateComponentType } from '@/packages/index.d'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
const props = defineProps({
chartAttr: {
type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>>,
required: true
}
})
</script>
@@ -0,0 +1,31 @@
<template>
<collapse-item name="通用">
<setting-item-box name="透明度" :alone="true">
<!-- 透明度 -->
<n-slider
v-model:value="chartStyles.opacity"
:step="0.1"
:min="0"
:max="1"
></n-slider>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { PickCreateComponentType } from '@/packages/index.d'
import {
SettingItemBox,
CollapseItem
} from '@/components/Pages/ChartItemSetting'
const props = defineProps({
chartStyles: {
type: Object as PropType<PickCreateComponentType<'styles'>>,
required: true
}
})
</script>
<style lang="scss" scoped></style>
@@ -0,0 +1,17 @@
// 设置项布局
import SettingItem from './SettingItem.vue'
import SettingItemBox from './SettingItemBox.vue'
import CollapseItem from './CollapseItem.vue'
// 全局配置属性
import GlobalSetting from './GlobalSetting.vue'
// 名称
import NameSetting from './NameSetting.vue'
// 方向
import PositionSetting from './PositionSetting.vue'
// 尺寸
import SizeSetting from './SizeSetting.vue'
// 样式
import StylesSetting from './StylesSetting.vue'
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting }