mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
fix: 修改文件建构
This commit is contained in:
奔跑的面条
@@ -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 }
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="content-left">
|
||||
<div
|
||||
class="content-left-item go-transition-quick go-mb-0"
|
||||
span="12 1000:6 1400:4 1800:4 2200:2"
|
||||
v-for="(item, index) in designColorRecommend"
|
||||
:key="index"
|
||||
@click="colorSelectHandle(item)"
|
||||
>
|
||||
<n-space>
|
||||
<div class="content-left-item-color" :style="{ backgroundColor: item.hex }"></div>
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<span :style="{ color: item.hex }">{{ item.name }}</span>
|
||||
<span class="Pinyin-upper">{{ item.pinyin.toUpperCase() }}</span>
|
||||
</n-space>
|
||||
<n-text>
|
||||
{{ item.hex }}
|
||||
<n-divider vertical></n-divider>
|
||||
{{
|
||||
`rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
|
||||
}}
|
||||
</n-text>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
<n-divider></n-divider>
|
||||
<div
|
||||
class="content-left-item go-transition-quick"
|
||||
span="12 1000:6 1400:4 1800:4 2200:2"
|
||||
v-for="(item, index) in designColor"
|
||||
:key="index"
|
||||
@click="colorSelectHandle(item)"
|
||||
>
|
||||
<n-space>
|
||||
<div class="content-left-item-color" :style="{ backgroundColor: item.hex }"></div>
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<span :style="{ color: item.hex }">{{ item.name }}</span>
|
||||
<span class="Pinyin-upper">{{ item.pinyin.toUpperCase() }}</span>
|
||||
</n-space>
|
||||
<n-text>
|
||||
{{ item.hex }}
|
||||
<n-divider vertical></n-divider>
|
||||
{{
|
||||
`rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
|
||||
}}
|
||||
</n-text>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue'
|
||||
import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
|
||||
import designColorRecommend from '@/settings/designColorRecommend.json'
|
||||
|
||||
const emits = defineEmits(['colorSelectHandle'])
|
||||
defineProps({
|
||||
designColor: {
|
||||
type: Object as PropType<AppThemeColorType[]>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const colorSelectHandle = (color: AppThemeColorType) => {
|
||||
emits('colorSelectHandle', color)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 200px;
|
||||
.content-left-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 10px 20px;
|
||||
min-width: 300px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
&:hover {
|
||||
@include hover-border-color("background-color5");
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
@extend .go-background-filter-shallow;
|
||||
}
|
||||
&-color {
|
||||
width: 8px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.Pinyin-upper {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
import ThemeColorSelect from './index.vue';
|
||||
|
||||
export { ThemeColorSelect };
|
||||
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<n-button quaternary @click="modelShow = true" title="颜色">
|
||||
<n-icon size="20" :depth="1">
|
||||
<color-wand-icon></color-wand-icon>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
<n-modal v-model:show="modelShow">
|
||||
<div class="go-system-color-setting">
|
||||
<n-space justify="space-between">
|
||||
<n-h3 class="title">主题颜色选择</n-h3>
|
||||
<n-icon size="20" class="go-cursor-pointer" @click="modelShow = false">
|
||||
<close-icon></close-icon>
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<n-divider></n-divider>
|
||||
<div class="model-content" ref="contentLeftRef">
|
||||
<div class="content-left" v-if="modelShow">
|
||||
<color-list :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle"></color-list>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="color-name-detail">
|
||||
<n-text v-if="appThemeDetail" class="color-name">{{ appThemeDetail.name }}</n-text>
|
||||
<n-text v-else="appThemeDetail" class="color-name">中国色</n-text>
|
||||
<n-text
|
||||
v-if="appThemeDetail"
|
||||
class="color-name-Pinyin"
|
||||
>{{ appThemeDetail.pinyin.toUpperCase() }}</n-text>
|
||||
<div
|
||||
v-if="appThemeDetail"
|
||||
class="select-color"
|
||||
:style="{ backgroundColor: designStore.appTheme }"
|
||||
></div>
|
||||
</div>
|
||||
<img :src="themeColorLogo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-footer">
|
||||
中国色列表来自于：
|
||||
<n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, toRefs } from 'vue'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
|
||||
import { icon } from '@/plugins'
|
||||
import themeColorLogo from '@/assets/images/exception/theme-color.png'
|
||||
import { loadAsyncComponent } from '@/utils'
|
||||
import { useScroll } from '@vueuse/core'
|
||||
import designColor from '@/settings/designColor.json'
|
||||
|
||||
const ColorList = loadAsyncComponent(() =>
|
||||
import('./components/ColorList.vue')
|
||||
)
|
||||
const { ColorWandIcon, CloseIcon } = icon.ionicons5
|
||||
|
||||
let splitNumber = 50
|
||||
|
||||
const designStore = useDesignStore()
|
||||
const modelShow = ref(false)
|
||||
const contentLeftRef = ref<HTMLElement | null>(null)
|
||||
const designColorSplit = ref(designColor.slice(0, splitNumber))
|
||||
|
||||
const { arrivedState } = useScroll(contentLeftRef, {
|
||||
offset: { bottom: 200 },
|
||||
})
|
||||
const { bottom } = toRefs(arrivedState)
|
||||
|
||||
const appThemeDetail = computed(() => {
|
||||
return designStore.getAppThemeDetail
|
||||
})
|
||||
|
||||
const colorSelectHandle = (color: AppThemeColorType) => {
|
||||
designStore.setAppColor(color)
|
||||
}
|
||||
|
||||
watch(() => bottom.value, (newData: boolean) => {
|
||||
if (newData) {
|
||||
splitNumber = splitNumber + 50
|
||||
designColorSplit.value = designColor.slice(0, splitNumber)
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => modelShow.value, (modelShow: boolean) => {
|
||||
if (!modelShow) {
|
||||
splitNumber = 50
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: 85vh;
|
||||
@include go("system-color-setting") {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
min-width: 1000px;
|
||||
padding: 20px 25px;
|
||||
height: $height;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
@extend .go-background-filter;
|
||||
@include hover-border-color("background-color5");
|
||||
.title {
|
||||
margin: 0;
|
||||
}
|
||||
.model-content {
|
||||
flex: 1;
|
||||
height: calc(#{$height} - 40px - 48px - 36px);
|
||||
overflow: auto;
|
||||
/* 右侧 */
|
||||
.content-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
right: 50px;
|
||||
top: 0px;
|
||||
.color-name-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 40px;
|
||||
.go-flex-items-center {
|
||||
flex-direction: column;
|
||||
}
|
||||
.select-color {
|
||||
margin-top: 20px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
background-image: url("@/assets/images/exception/texture.png");
|
||||
}
|
||||
.color-name {
|
||||
font-family: serif;
|
||||
font-size: 80px;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.color-name-Pinyin {
|
||||
text-align: center;
|
||||
font-family: Georgia;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.model-footer {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user