From b3d723d3232aab9844586d6f4820887eb15d7eda Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Sat, 29 Jan 2022 11:44:51 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E5=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Makefile | 4 ++ .../Charts/Bars/BarCommon/config.ts | 12 ++-- .../components/Charts/Bars/BarCommon/index.ts | 2 - src/packages/index.d.ts | 6 -- .../chartEditStore/chartEditStore.d.ts | 9 ++- .../modules/chartEditStore/chartEditStore.ts | 3 + .../chartHistoryStore/chartHistoryStore.d.ts | 10 +++ .../chartHistoryStore/chartHistoryStore}.ts | 11 ++++ src/styles/common/_dark.scss | 2 +- src/styles/common/_light.scss | 2 +- src/styles/common/style.scss | 4 ++ .../chart/ContentEdit/hooks/useDrop.hook.ts | 3 +- .../components/ListItem/index.vue | 62 ++++++++++++++++--- src/views/chart/ContentLayers/index.vue | 6 +- 14 files changed, 108 insertions(+), 28 deletions(-) create mode 100644 src/store/modules/chartHistoryStore/chartHistoryStore.d.ts create mode 100644 src/store/modules/chartHistoryStore/chartHistoryStore}.ts diff --git a/Makefile b/Makefile index 6507c2df..3d7918d2 100644 --- a/Makefile +++ b/Makefile @@ -9,8 +9,12 @@ build: lint: npm run lint +new: + npm run new + help: @echo " make dev 开发模式" @echo " make build 编译模式" + @echo " make new 通过自动化流程创建代码" @echo " make lint 格式校验" \ No newline at end of file diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts index 4c6cd93e..1e454d42 100644 --- a/src/packages/components/Charts/Bars/BarCommon/config.ts +++ b/src/packages/components/Charts/Bars/BarCommon/config.ts @@ -1,15 +1,15 @@ import { getUUID } from '@/utils' import { BarCommonConfig } from './index' - -export const chartSize = { - w: 500, - h: 300 -} +import { ConfigType } from '@/packages/index.d' +import omit from 'lodash/omit' export default class Config { private id: string = getUUID() private key: string = BarCommonConfig.key - public attr = { x: 0, y: 0, ...chartSize } + + chartData: Exclude = omit(BarCommonConfig, ['node']) + + public attr = { x: 0, y: 0, w: 500, h: 300 } // 图表配置项 public config = { diff --git a/src/packages/components/Charts/Bars/BarCommon/index.ts b/src/packages/components/Charts/Bars/BarCommon/index.ts index bbfc197c..13f6b12e 100644 --- a/src/packages/components/Charts/Bars/BarCommon/index.ts +++ b/src/packages/components/Charts/Bars/BarCommon/index.ts @@ -2,7 +2,6 @@ import BarCommon from './index.vue' import image from '@/assets/images/chart/charts/bar_x.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' -import { chartSize } from './config' export const BarCommonConfig: ConfigType = { key: 'VBarCommon', @@ -12,5 +11,4 @@ export const BarCommonConfig: ConfigType = { package: PackagesCategoryEnum.CHARTS, node: BarCommon, image: image, - chartData: { chartSize } } diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index f3ef7542..a4e24360 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -7,12 +7,6 @@ export type ConfigType = { category: string categoryName: string package: string - chartData: { - chartSize: { - w: number - h: number - } - } node: Component image: string | (() => Promise) [T: string]: unknown diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 52e1a658..725b4215 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -42,15 +42,22 @@ export type MousePositionType = { [EditCanvasTypeEnum.Y]: number } +// 操作目标 +export type TargetChartType = { + index: number +} + // Store 类型 export enum chartEditStoreEnum { EDITCANVAS = 'editCanvas', MOUSEPOSITION = 'mousePosition', - COMPONENT_LIST = 'componentList' + COMPONENT_LIST = 'componentList', + TARGET_CHART = 'targetChart' } export interface chartEditStoreType { [chartEditStoreEnum.EDITCANVAS]: EditCanvasType [chartEditStoreEnum.MOUSEPOSITION]: MousePositionType + [chartEditStoreEnum.TARGET_CHART]: TargetChartType [chartEditStoreEnum.COMPONENT_LIST]: any[] } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index a95b01dc..ff6ca6c2 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -34,6 +34,9 @@ export const useChartEditStoreStore = defineStore({ x: 0, y: 0 }, + targetChart: { + index: 0 + }, componentList: [] }), getters: { diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts new file mode 100644 index 00000000..83268af6 --- /dev/null +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts @@ -0,0 +1,10 @@ +export interface HistoryStackType { + +} + +export interface chartHistoryStoreType { + // 后退栈 + backStack: [], + // 前进栈 + forwardStack: [] +} \ No newline at end of file diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore}.ts b/src/store/modules/chartHistoryStore/chartHistoryStore}.ts new file mode 100644 index 00000000..37c37490 --- /dev/null +++ b/src/store/modules/chartHistoryStore/chartHistoryStore}.ts @@ -0,0 +1,11 @@ +import { defineStore } from 'pinia' +import { chartHistoryStoreType } from './chartHistoryStore.d' +import { setLocalStorage, getLocalStorage } from '@/utils' +import { StorageEnum } from '@/enums/storageEnum' + +export const useChartHistoryStoreStore = defineStore({ + id: 'useChartHistoryStore', + state: (): chartHistoryStoreType => ({}), + getters: {}, + actions: {} +}) \ No newline at end of file diff --git a/src/styles/common/_dark.scss b/src/styles/common/_dark.scss index 554c165b..630609b6 100644 --- a/src/styles/common/_dark.scss +++ b/src/styles/common/_dark.scss @@ -24,7 +24,7 @@ $dark: ( linear-gradient(90deg, transparent 14px, $--color-text-2 0) ), // hover 边框颜色 - hover-border-color: #55606e, + hover-border-color: $--color-dark-bg-5, // 阴影 box-shadow: 0 8px 20px #5252521f diff --git a/src/styles/common/_light.scss b/src/styles/common/_light.scss index c769b50b..3bc2c5a7 100644 --- a/src/styles/common/_light.scss +++ b/src/styles/common/_light.scss @@ -26,7 +26,7 @@ $light: ( linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0) ), // hover 边框颜色 - hover-border-color: $--color-light-bg-1, + hover-border-color: $--color-light-bg-4, // 阴影 box-shadow: 0 8px 20px #0000001a ); diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss index 7e8065bb..a1fbfc9c 100644 --- a/src/styles/common/style.scss +++ b/src/styles/common/style.scss @@ -7,6 +7,10 @@ transition: all 0.4s; } +.go-transition-quick { + transition: all 0.2s; +} + .go-flex-center { display: flex; justify-content: center; diff --git a/src/views/chart/ContentEdit/hooks/useDrop.hook.ts b/src/views/chart/ContentEdit/hooks/useDrop.hook.ts index e7204480..2143ef5a 100644 --- a/src/views/chart/ContentEdit/hooks/useDrop.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrop.hook.ts @@ -23,8 +23,7 @@ export const handleDrop = async (e: DragEvent) => { // 创建新图表组件 let newComponent = await createComponent(dropData) - const { w, h } = dropData.chartData.chartSize - newComponent.setPosition(e.offsetX - w / 2, e.offsetY - h / 2) + newComponent.setPosition(e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2) chartEditStore.addComponentList(newComponent) loadingFinish() diff --git a/src/views/chart/ContentLayers/components/ListItem/index.vue b/src/views/chart/ContentLayers/components/ListItem/index.vue index ecf83486..0eea9707 100644 --- a/src/views/chart/ContentLayers/components/ListItem/index.vue +++ b/src/views/chart/ContentLayers/components/ListItem/index.vue @@ -1,17 +1,63 @@ - + diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue index 88ed37da..3ec8c412 100644 --- a/src/views/chart/ContentLayers/index.vue +++ b/src/views/chart/ContentLayers/index.vue @@ -13,7 +13,11 @@ - +