diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cfda7007..73ad9aab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,7 +49,6 @@ dependencies: axios: rg.cnpmjs.org/axios/0.23.0 crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2 highlight.js: registry.npmjs.org/highlight.js/11.5.0 - mockjs: registry.npmjs.org/mockjs/1.1.0 naive-ui: registry.npmjs.org/naive-ui/2.25.2_vue@3.2.24 pinia: rg.cnpmjs.org/pinia/2.0.6_typescript@4.5.2+vue@3.2.24 screenfull: rg.cnpmjs.org/screenfull/6.0.0 @@ -77,6 +76,7 @@ devDependencies: eslint-plugin-prettier: rg.cnpmjs.org/eslint-plugin-prettier/4.0.0_90bd2ba582f6d1348d73031482d782e2 eslint-plugin-vue: rg.cnpmjs.org/eslint-plugin-vue/8.2.0_eslint@8.4.1 lodash: rg.cnpmjs.org/lodash/4.17.21 + mockjs: registry.npmjs.org/mockjs/1.1.0 plop: r2.cnpmjs.org/plop/3.0.5 prettier: rg.cnpmjs.org/prettier/2.5.1 sass: rg.cnpmjs.org/sass/1.44.0 @@ -1875,7 +1875,7 @@ packages: name: commander version: 9.1.0 engines: {node: ^12.20.0 || >=14} - dev: false + dev: true registry.npmjs.org/css-render/0.15.8: resolution: {integrity: sha512-k1gp1MgYDPrFZhzheQkSwm6dmP6nPe2XE6WYpJBPwEc3GbMANPJZfxl7ofZlTl8/+tpMRiGTTgUkTlXaVbLxog==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/css-render/-/css-render-0.15.8.tgz} @@ -2199,7 +2199,7 @@ packages: hasBin: true dependencies: commander: registry.npmjs.org/commander/9.1.0 - dev: false + dev: true registry.npmjs.org/ms/2.0.0: resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/ms/-/ms-2.0.0.tgz} diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 37dbe176..cd97251f 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,3 +1,5 @@ export * from '@/hooks/useTheme.hook' export * from '@/hooks/usePreviewScale.hook' -export * from '@/hooks/useCode.hook' \ No newline at end of file +export * from '@/hooks/useCode.hook' +export * from '@/hooks/useChartDataFetch.hook' +export * from '@/hooks/useChartTheme.hook' \ No newline at end of file diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 71ebafed..a45d240c 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -6,11 +6,13 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview } from '@/utils' +type ChartEditStoreType = typeof useChartEditStore + /** * 图表的 setdata 数据监听与更改 * @param chartConfig */ -export const useChartDataFetch = (chartConfig: CreateComponentType) => { +export const useChartDataFetch = (chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType) => { const vChartRef = ref(null) let fetchInterval: any = 0 diff --git a/src/hooks/useChartTheme.hook.ts b/src/hooks/useChartTheme.hook.ts new file mode 100644 index 00000000..c2c95a9a --- /dev/null +++ b/src/hooks/useChartTheme.hook.ts @@ -0,0 +1,34 @@ +import { onMounted, ref, watch } from 'vue' +import cloneDeep from 'lodash/cloneDeep' +import merge from 'lodash/merge' + +/** + * border-hook + * @param props + * @param _defaultColor 默认颜色 + * @param afterResizeFun resize容器之后执行函数 + */ +export const useBorderBox = (props: any, _defaultColor: string[]) => { + const mergedColor = ref([]) + const defaultColor = ref(_defaultColor) + + function mergeColor() { + mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || []) + } + + watch( + () => [props.color, props.reverse], + () => { + mergeColor() + } + ) + onMounted(() => { + mergeColor() + }) + + return { + defaultColor, + mergeColor, + mergedColor + } +} diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue index b191344f..f6f9482c 100644 --- a/src/packages/components/Charts/Bars/BarCommon/index.vue +++ b/src/packages/components/Charts/Bars/BarCommon/index.vue @@ -10,8 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers' import { BarChart } from 'echarts/charts' import { includes } from './config' import { mergeTheme } from '@/packages/public/chart' -import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook' +import { useChartDataFetch } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' import { DatasetComponent, @@ -48,5 +49,5 @@ const option = computed(() => { return mergeTheme(props.chartConfig.option, props.themeSetting, includes) }) -const { vChartRef } = useChartDataFetch(props.chartConfig) +const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue index 833d5a61..165a697a 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue +++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue @@ -10,7 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers' import { BarChart } from 'echarts/charts' import { mergeTheme } from '@/packages/public/chart' import config, { includes } from './config' -import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook' +import { useChartDataFetch } from '@/hooks' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' import { DatasetComponent, @@ -47,5 +48,5 @@ const option = computed(() => { return mergeTheme(props.chartConfig.option, props.themeSetting, includes) }) -const { vChartRef } = useChartDataFetch(props.chartConfig) +const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue index 1e820adc..9a6950d1 100644 --- a/src/packages/components/Charts/Lines/LineCommon/index.vue +++ b/src/packages/components/Charts/Lines/LineCommon/index.vue @@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' -import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook' +import { useChartDataFetch } from '@/hooks' import { isPreview } from '@/utils' const props = defineProps({ @@ -67,5 +67,5 @@ watch(() => props.chartConfig.option.dataset, () => { deep: true }) -const { vChartRef } = useChartDataFetch(props.chartConfig) +const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) \ No newline at end of file diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue index 32f37d9d..f85cac0b 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue @@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' -import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook' +import { useChartDataFetch } from '@/hooks' import { isPreview } from '@/utils' const props = defineProps({ @@ -74,5 +74,5 @@ watch(() => props.chartConfig.option.dataset, () => { deep: true }) -const { vChartRef } = useChartDataFetch(props.chartConfig) +const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue index 28d40a10..28f4c238 100644 --- a/src/packages/components/Charts/Lines/LineGradients/index.vue +++ b/src/packages/components/Charts/Lines/LineGradients/index.vue @@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' -import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook' +import { useChartDataFetch } from '@/hooks' import { isPreview } from '@/utils' const props = defineProps({ @@ -73,5 +73,5 @@ watch(() => props.chartConfig.option.dataset, () => { deep: true }) -const { vChartRef } = useChartDataFetch(props.chartConfig) +const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue index b5f38378..49903a6c 100644 --- a/src/packages/components/Charts/Pies/PieCommon/index.vue +++ b/src/packages/components/Charts/Pies/PieCommon/index.vue @@ -10,7 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers' import { PieChart } from 'echarts/charts' import { mergeTheme } from '@/packages/public/chart' import config, { includes } from './config' -import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook' +import { useChartDataFetch } from '@/hooks' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' import { DatasetComponent, @@ -48,5 +49,5 @@ const option = computed(() => { return mergeTheme(props.chartConfig.option, props.themeSetting, includes) }) -const { vChartRef } = useChartDataFetch(props.chartConfig) +const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Decorates/Borders/borderCommon/index.vue b/src/packages/components/Decorates/Borders/borderCommon/index.vue index 2e34ca4b..52439925 100644 --- a/src/packages/components/Decorates/Borders/borderCommon/index.vue +++ b/src/packages/components/Decorates/Borders/borderCommon/index.vue @@ -1,13 +1,70 @@ - \ No newline at end of file +