From 0c2da460a3f6bdd4f1fd43dc5cc51fa624a3917f Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Fri, 25 Feb 2022 21:26:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChartItemSetting/GlobalSetting.vue | 472 +++++++++--------- .../ChartItemSetting/PositionSetting.vue | 37 ++ .../ChartItemSetting/SettingItemBox.vue | 2 +- src/components/ChartItemSetting/index.ts | 4 +- src/packages/index.d.ts | 3 + src/packages/index.ts | 1 - src/settings/chartThemes/global.theme.json | 2 +- .../modules/chartEditStore/chartEditStore.ts | 6 +- .../components/ChartSetting/index.vue | 28 +- src/views/chart/ContentDetails/index.vue | 22 +- .../chart/ContentEdit/hooks/useStyle.hook.ts | 5 +- 11 files changed, 310 insertions(+), 272 deletions(-) create mode 100644 src/components/ChartItemSetting/PositionSetting.vue diff --git a/src/components/ChartItemSetting/GlobalSetting.vue b/src/components/ChartItemSetting/GlobalSetting.vue index 4aa10c68..5eced20e 100644 --- a/src/components/ChartItemSetting/GlobalSetting.vue +++ b/src/components/ChartItemSetting/GlobalSetting.vue @@ -1,238 +1,233 @@ - - diff --git a/src/components/ChartItemSetting/PositionSetting.vue b/src/components/ChartItemSetting/PositionSetting.vue new file mode 100644 index 00000000..8d03f6b7 --- /dev/null +++ b/src/components/ChartItemSetting/PositionSetting.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/components/ChartItemSetting/SettingItemBox.vue b/src/components/ChartItemSetting/SettingItemBox.vue index 88edc3d3..d0fd93b9 100644 --- a/src/components/ChartItemSetting/SettingItemBox.vue +++ b/src/components/ChartItemSetting/SettingItemBox.vue @@ -21,7 +21,7 @@ $leftWidth: 60px; @include go('config-item-box') { position: relative; display: flex; - margin-top: 10px; + margin: 20px 0; .item-left { width: $leftWidth; text-align: left; diff --git a/src/components/ChartItemSetting/index.ts b/src/components/ChartItemSetting/index.ts index 847867ae..c733beb2 100644 --- a/src/components/ChartItemSetting/index.ts +++ b/src/components/ChartItemSetting/index.ts @@ -5,5 +5,7 @@ import CollapseItem from './CollapseItem.vue' // 全局配置属性通用模板 import GlobalSetting from './GlobalSetting.vue' +// 方向通用模板 +import PositionSetting from './PositionSetting.vue' -export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting } +export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, PositionSetting } diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 8403bc8d..676f3391 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -25,6 +25,9 @@ export interface CreateComponentType extends PublicConfigType { option: GlobalThemeJsonType } +// 获取组件实例类中某个key对应value类型的方法 +export type PickCreateComponentType = Pick[T] + // 包分类枚举 export enum PackagesCategoryEnum { CHARTS = 'Charts', diff --git a/src/packages/index.ts b/src/packages/index.ts index 4fb919de..0944c272 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -32,7 +32,6 @@ const packagesInstall = (app: App): void => { * @param dropData */ const createComponent = async (dropData: ConfigType) => { - console.log(dropData) const { category } = dropData const key = dropData.key.substring(1) const chart = await import(`./components/${dropData.package}/${category}/${key}/config.ts`) diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json index ef3f19ec..410700c7 100644 --- a/src/settings/chartThemes/global.theme.json +++ b/src/settings/chartThemes/global.theme.json @@ -32,7 +32,7 @@ "length": 5 }, "splitLine": { - "show": true, + "show": false, "lineStyle": { "color": "#484753", "width": 1, diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 10a01835..010b53fd 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -130,6 +130,10 @@ export const useChartEditStoreStore = defineStore({ }, // * 找到目标 id 数据下标位置 fetchTargetIndex(): number { + if(!this.getTargetChart.selectId) { + loadingFinish() + return -1 + } const index = this.componentList.findIndex(e => e.id === this.getTargetChart.selectId) if (index === -1) { loadingError() @@ -183,7 +187,7 @@ export const useChartEditStoreStore = defineStore({ dom.style[key] = value } }, - // * 移动组件列表位置到两端 + // * 移动组件列表层级位置到两端 setBothEnds(isEnd = false, isHistory = true): void { try { loadingStart() diff --git a/src/views/chart/ContentDetails/components/ChartSetting/index.vue b/src/views/chart/ContentDetails/components/ChartSetting/index.vue index 77aeb70c..8dd163bc 100644 --- a/src/views/chart/ContentDetails/components/ChartSetting/index.vue +++ b/src/views/chart/ContentDetails/components/ChartSetting/index.vue @@ -1,17 +1,16 @@ @@ -20,7 +19,7 @@ import { computed, Ref } from 'vue' import { loadAsyncComponent } from '@/utils' import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore' -import { GlobalSetting } from '@/components/ChartItemSetting/index' +import { GlobalSetting, PositionSetting } from '@/components/ChartItemSetting/index' import { CreateComponentType } from '@/packages/index.d' import { SettingItemBox } from '@/components/ChartItemSetting/index' @@ -38,8 +37,5 @@ const targetData: Ref = computed(() => { diff --git a/src/views/chart/ContentDetails/index.vue b/src/views/chart/ContentDetails/index.vue index c3870d9b..d7f4fb7b 100644 --- a/src/views/chart/ContentDetails/index.vue +++ b/src/views/chart/ContentDetails/index.vue @@ -19,7 +19,7 @@ :showTop="false" :depth="2" > - + import('../ContentEdit/index.vue')) -const CanvasPage = loadAsyncComponent(() =>import('./components/CanvasPage/index.vue')) -const ChartSetting = loadAsyncComponent(() =>import('./components/ChartSetting/index.vue')) -const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue')) +const CanvasPage = loadAsyncComponent(() => + import('./components/CanvasPage/index.vue') +) +const ChartSetting = loadAsyncComponent(() => + import('./components/ChartSetting/index.vue') +) +const ChartData = loadAsyncComponent(() => + import('./components/ChartData/index.vue') +) const collapsed = ref(getDetails.value) @@ -151,10 +157,12 @@ const canvasTabList = [ diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts index f4ef530c..85cc970d 100644 --- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts @@ -1,7 +1,6 @@ -import { PublicConfigType } from '@/packages/index.d' +import { PickCreateComponentType } from '@/packages/index.d' -type PickPublicConfigType = Pick[T] -type AttrType = PickPublicConfigType<'attr'> +type AttrType = PickCreateComponentType<'attr'> export const useComponentStyle = (attr: AttrType, index: number) => { const componentStyle = {