From 3d1ed95bedb9bdc928a9f40d29d0b6977a2efa18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Wed, 4 May 2022 01:46:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- package.json | 2 +- pnpm-lock.yaml | 8 +- src/enums/pluginEnum.ts | 8 +- src/enums/styleEnum.ts | 18 +- src/hooks/usePreviewScale.hook.ts | 185 ++++++++++++++++-- src/i18n/index.ts | 8 +- src/plugins/icon.ts | 11 +- src/settings/designSetting.ts | 7 +- .../chartEditStore/chartEditStore.d.ts | 4 + .../modules/chartEditStore/chartEditStore.ts | 7 +- .../chartLayoutStore/chartLayoutStore.d.ts | 2 - src/store/modules/designStore/designStore.ts | 4 +- src/utils/plugin.ts | 12 +- .../components/CanvasPage/index.vue | 79 ++++++-- .../components/EditRange/index.vue | 2 +- .../components/PreviewRenderList/index.vue | 2 - src/views/preview/hooks/useScale.hook.ts | 89 +++++++-- src/views/preview/index.vue | 86 ++++++-- .../ProjectItemsList/hooks/useData.hook.ts | 2 +- 20 files changed, 439 insertions(+), 99 deletions(-) diff --git a/index.html b/index.html index bf639925..344d19d9 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@
-

请使用 Web 端进行查看呢 ψ(｀∇´)ψ

+

请使用 Web 端进行查看

diff --git a/package.json b/package.json index 16bdbc47..b25402f8 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@types/node": "^16.11.26", "@typescript-eslint/eslint-plugin": "^5.18.0", "@typescript-eslint/parser": "^5.18.0", - "@vicons/carbon": "^0.11.0", + "@vicons/carbon": "^0.12.0", "@vicons/ionicons5": "~0.11.0", "@vitejs/plugin-vue": "^1.10.2", "@vitejs/plugin-vue-jsx": "^1.3.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 81604ad3..a0419022 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,7 +7,7 @@ specifiers: '@types/node': ^16.11.26 '@typescript-eslint/eslint-plugin': ^5.18.0 '@typescript-eslint/parser': ^5.18.0 - '@vicons/carbon': ^0.11.0 + '@vicons/carbon': ^0.12.0 '@vicons/ionicons5': ~0.11.0 '@vitejs/plugin-vue': ^1.10.2 '@vitejs/plugin-vue-jsx': ^1.3.9 @@ -78,7 +78,7 @@ devDependencies: '@types/node': 16.11.26 '@typescript-eslint/eslint-plugin': 5.18.0_a07dca3bdfc4bfa60f4dda0c1f9e3287 '@typescript-eslint/parser': 5.18.0_eslint@8.12.0+typescript@4.6.3 - '@vicons/carbon': 0.11.0 + '@vicons/carbon': 0.12.0 '@vicons/ionicons5': 0.11.0 '@vitejs/plugin-vue': 1.10.2_vite@2.9.5 '@vitejs/plugin-vue-jsx': 1.3.9 @@ -830,8 +830,8 @@ packages: eslint-visitor-keys: 3.3.0 dev: true - /@vicons/carbon/0.11.0: - resolution: {integrity: sha512-+Wkl8wOP1GR7jS+OKcsJ58NnZr4i+BZhbpLRtgpZQui1zFpYjoWinwvYKLjGKJ/oiR10Q237cBDjGwmMSzXqTg==} + /@vicons/carbon/0.12.0: + resolution: {integrity: sha512-kCOgr/ZOhZzoiFLJ8pwxMa2TMxrkCUOA22qExPabus35F4+USqzcsxaPoYtqRd9ROOYiHrSqwapak/ywF0D9bg==} dev: true /@vicons/ionicons5/0.11.0: diff --git a/src/enums/pluginEnum.ts b/src/enums/pluginEnum.ts index 67f5141a..08d8e3a1 100644 --- a/src/enums/pluginEnum.ts +++ b/src/enums/pluginEnum.ts @@ -1,6 +1,6 @@ export enum DialogEnum { - delete = 'delete', - warning = 'warning', - error = 'error', - success = 'success' + DELETE = 'delete', + WARNING = 'warning', + ERROR = 'error', + SUCCESS = 'success' } diff --git a/src/enums/styleEnum.ts b/src/enums/styleEnum.ts index e7eff2ec..54a8fd48 100644 --- a/src/enums/styleEnum.ts +++ b/src/enums/styleEnum.ts @@ -1,9 +1,19 @@ +// 主题 export enum ThemeEnum { - dark = 'dark', - light = 'light' + DARK = 'dark', + LIGHT = 'light' } +// 语言 export enum LangEnum { - zh = 'zh', - en = 'en' + ZH = 'ZH', + EN = 'EN' } + +// 预览展示 +export enum PreviewScaleEnum { + FIT = 'fit', + SCROLL_Y = 'scrollY', + SCROLL_X = 'scrollX', + FULL = 'full' +} \ No newline at end of file diff --git a/src/hooks/usePreviewScale.hook.ts b/src/hooks/usePreviewScale.hook.ts index d03e475b..066f6b66 100644 --- a/src/hooks/usePreviewScale.hook.ts +++ b/src/hooks/usePreviewScale.hook.ts @@ -1,44 +1,47 @@ -import { ref } from 'vue' import throttle from 'lodash/throttle' -// * 屏幕缩放适配 -export const usePreviewScale = ( +// 拆出来是为了更好的分离单独复用 + +// * 屏幕缩放适配（两边留白） +export const usePreviewFitScale = ( width: number, height: number, - scaleDom: HTMLElement | null + scaleDom: HTMLElement | null, + callback?: (scale: { + width: number; + height: number; + }) => void ) => { - // * 指向最外层容器（没生效不知道为啥） - const appRef = ref() - - // * 屏幕尺寸（px） + // * 画布尺寸（px） const baseWidth = width const baseHeight = height // * 默认缩放值 const scale = { - width: '1', - height: '1', + width: 1, + height: 1, } // * 需保持的比例 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) const calcRate = () => { - // 当前宽高比 + // 当前屏幕宽高比 const currentRate = parseFloat( (window.innerWidth / window.innerHeight).toFixed(5) ) if (scaleDom) { if (currentRate > baseProportion) { // 表示更宽 - scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) - scale.height = (window.innerHeight / baseHeight).toFixed(5) + scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5)) + scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5)) scaleDom.style.transform = `scale(${scale.width}, ${scale.height})` } else { // 表示更高 - scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5) - scale.width = (window.innerWidth / baseWidth).toFixed(5) + scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5)) + scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5)) scaleDom.style.transform = `scale(${scale.width}, ${scale.height})` } + if (callback) callback(scale) } } @@ -57,9 +60,159 @@ export const usePreviewScale = ( } return { - appRef, calcRate, windowResize, unWindowResize, } } + +// * X轴撑满，Y轴滚动条 +export const usePreviewScrollYScale = ( + width: number, + height: number, + scaleDom: HTMLElement | null, + callback?: (scale: { + width: number; + height: number; + }) => void +) => { + // * 画布尺寸（px） + const baseWidth = width + const baseHeight = height + + // * 默认缩放值 + const scale = { + width: 1, + height: 1, + } + + // * 需保持的比例 + const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) + const calcRate = () => { + if (scaleDom) { + scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5)) + scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5)) + scaleDom.style.transform = `scale(${scale.width}, ${scale.height})` + if (callback) callback(scale) + } + } + + const resize = throttle(() => { + calcRate() + }, 200) + + // * 改变窗口大小重新绘制 + const windowResize = () => { + window.addEventListener('resize', resize) + } + + // * 改变窗口大小重新绘制 + const unWindowResize = () => { + window.removeEventListener('resize', resize) + } + + return { + calcRate, + windowResize, + unWindowResize, + } +} + +// * Y轴撑满，X轴滚动条 +export const usePreviewScrollXScale = ( + width: number, + height: number, + scaleDom: HTMLElement | null, + callback?: (scale: { + width: number; + height: number; + }) => void +) => { + // * 画布尺寸（px） + const baseWidth = width + const baseHeight = height + + // * 默认缩放值 + const scale = { + height: 1, + width: 1, + } + + // * 需保持的比例 + const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) + const calcRate = () => { + if (scaleDom) { + scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5)) + scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5)) + scaleDom.style.transform = `scale(${scale.width}, ${scale.height})` + if (callback) callback(scale) + } + } + + const resize = throttle(() => { + calcRate() + }, 200) + + // * 改变窗口大小重新绘制 + const windowResize = () => { + window.addEventListener('resize', resize) + } + + // * 改变窗口大小重新绘制 + const unWindowResize = () => { + window.removeEventListener('resize', resize) + } + + return { + calcRate, + windowResize, + unWindowResize, + } +} + +// * 变形内容，宽高铺满 +export const usePreviewFullScale = ( + width: number, + height: number, + scaleDom: HTMLElement | null, + callback?: (scale: { + width: number; + height: number; + }) => void +) => { + + // * 默认缩放值 + const scale = { + width: 1, + height: 1, + } + + const calcRate = () => { + if (scaleDom) { + scale.width = parseFloat((window.innerWidth / width).toFixed(5)) + scale.height = parseFloat((window.innerHeight / height).toFixed(5)) + scaleDom.style.transform = `scale(${scale.width}, ${scale.height})` + if (callback) callback(scale) + } + } + + const resize = throttle(() => { + calcRate() + }, 200) + + // * 改变窗口大小重新绘制 + const windowResize = () => { + window.addEventListener('resize', resize) + } + + // * 改变窗口大小重新绘制 + const unWindowResize = () => { + window.removeEventListener('resize', resize) + } + + return { + calcRate, + windowResize, + unWindowResize, + } +} \ No newline at end of file diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 78187575..06576c37 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -14,11 +14,11 @@ const langStorage: LangStateType = getLocalStorage(StorageEnum.GO_LANG_STORE) export const langList = [ { label: '中文', - key: LangEnum.zh + key: LangEnum.ZH }, { label: 'English', - key: LangEnum.en + key: LangEnum.EN } ] @@ -26,8 +26,8 @@ const i18n = createI18n({ locale: langStorage?.lang || lang, fallbackLocale: langStorage?.lang || lang, messages: { - [LangEnum.zh]: zh, - [LangEnum.en]: en + [LangEnum.ZH]: zh, + [LangEnum.EN]: en } }) diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 03bdfa43..7a9b3adf 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -77,6 +77,10 @@ import { AlignVerticalBottom as AlignVerticalBottomIcon, DocumentAdd as DocumentAddIcon, DocumentDownload as DocumentDownloadIcon, + Scale as ScaleIcon, + FitToScreen as FitToScreenIcon, + FitToHeight as FitToHeightIcon, + FitToWidth as FitToWidthIcon } from '@vicons/carbon' const ionicons5 = { @@ -225,7 +229,12 @@ const carbon = { // 添加文件 DocumentAddIcon, // 下载文件 - DocumentDownloadIcon + DocumentDownloadIcon, + // 预览展示方式 + ScaleIcon, + FitToScreenIcon, + FitToHeightIcon, + FitToWidthIcon } // https://www.xicons.org/#/ 还有很多 diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 139df7cc..fe10d8ff 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -1,8 +1,8 @@ -import { LangEnum } from '@/enums/styleEnum' +import { LangEnum, PreviewScaleEnum } from '@/enums/styleEnum' import designColor from './designColor.json' // 默认语言 -export const lang = LangEnum.zh +export const lang = LangEnum.ZH // 水印文字 export const watermarkText = "GoView 低代码平台" @@ -45,6 +45,9 @@ export const carouselInterval = 4000 // 工作台大屏背景图片大小限制（5M） export const backgroundImageSize = 5 +// 预览展示方式 +export const previewScaleType = PreviewScaleEnum.FIT + // 数据请求间隔 export const requestInterval = 30 diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 3fd9bd5c..da66f285 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -1,6 +1,7 @@ import { CreateComponentType, FilterEnum} from '@/packages/index.d' import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum' +import { PreviewScaleEnum } from '@/enums/styleEnum' import type { ChartColorsNameType, GlobalThemeJsonType, @@ -46,6 +47,7 @@ export enum EditCanvasConfigEnum { BACKGROUND = 'background', BACKGROUND_IAMGE = 'backgroundImage', SELECT_COLOR = 'selectColor', + PREVIEW_SCALE_TYPE = 'previewScaleType', } export interface EditCanvasConfigType { @@ -72,6 +74,8 @@ export interface EditCanvasConfigType { [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType // 图表主题颜色 [EditCanvasConfigEnum.SELECT_COLOR]: boolean + // 预览展示方式 + [EditCanvasConfigEnum.PREVIEW_SCALE_TYPE]: PreviewScaleEnum } // 坐标轴信息 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index a237119a..22e44544 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -4,13 +4,14 @@ import { CreateComponentType } from '@/packages/index.d' import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index' -import { requestInterval } from '@/settings/designSetting' +import { requestInterval, previewScaleType } from '@/settings/designSetting' // 记录记录 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' // 全局设置 import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' import { MenuEnum } from '@/enums/editPageEnum' +import { PreviewScaleEnum } from '@/enums/styleEnum' import { ChartEditStoreEnum, ChartEditStorage, @@ -89,7 +90,9 @@ export const useChartEditStore = defineStore({ // chart 主题色 chartThemeColor: defaultTheme || 'dark', // 全局配置 - chartThemeSetting: globalThemeJson + chartThemeSetting: globalThemeJson, + // 预览方式 + previewScaleType: previewScaleType }, // 数据请求处理（需存储给后端） requestGlobalConfig: { diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts index 1445d8b3..fecae02b 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts @@ -1,5 +1,3 @@ -import { ThemeEnum } from '@/enums/styleEnum' - export enum ChartLayoutStoreEnum { LAYERS = 'layers', CHARTS = 'charts', diff --git a/src/store/modules/designStore/designStore.ts b/src/store/modules/designStore/designStore.ts index 88128bb0..d6a54bf1 100644 --- a/src/store/modules/designStore/designStore.ts +++ b/src/store/modules/designStore/designStore.ts @@ -18,7 +18,7 @@ export const useDesignStore = defineStore({ // 是否暗黑 darkTheme, // 主题名称 - themeName: (darkTheme && ThemeEnum.dark) || ThemeEnum.light, + themeName: (darkTheme && ThemeEnum.DARK) || ThemeEnum.LIGHT, // 颜色色号 appTheme, appThemeDetail, @@ -38,7 +38,7 @@ export const useDesignStore = defineStore({ // 切换主题 changeTheme(): void { this.darkTheme = !this.darkTheme - this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light + this.themeName = this.darkTheme ? ThemeEnum.DARK : ThemeEnum.LIGHT setLocalStorage(GO_DESIGN_STORE, this.$state) }, // 设置颜色 diff --git a/src/utils/plugin.ts b/src/utils/plugin.ts index bd8b9aa8..5b4e7e09 100644 --- a/src/utils/plugin.ts +++ b/src/utils/plugin.ts @@ -82,31 +82,31 @@ export const goDialog = ( const typeObj = { // 自定义 - [DialogEnum.delete]: { + [DialogEnum.DELETE]: { fn: dialogFn || window['$dialog'].warning, message: message || '是否删除此数据?' }, // 原有 - [DialogEnum.warning]: { + [DialogEnum.WARNING]: { fn: window['$dialog'].warning, message: message || '是否执行此操作?' }, - [DialogEnum.error]: { + [DialogEnum.ERROR]: { fn: window['$dialog'].error, message: message || '是否执行此操作?' }, - [DialogEnum.success]: { + [DialogEnum.SUCCESS]: { fn: window['$dialog'].success, message: message || '是否执行此操作?' } } - const dialog: DialogReactive = typeObj[type || DialogEnum.warning]['fn']({ + const dialog: DialogReactive = typeObj[type || DialogEnum.WARNING]['fn']({ // 导入其余 NaiveUI 支持参数 ...params, title: title || '提示', icon: renderIcon(InformationCircleIcon, { size: dialogIconSize }), - content: typeObj[type || DialogEnum.warning]['message'], + content: typeObj[type || DialogEnum.WARNING]['message'], positiveText: positiveText || '确定', negativeText: negativeText || '取消', // 是否通过遮罩关闭 diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index a6d0f2d0..db53971d 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -6,6 +6,7 @@ @@ -14,6 +15,7 @@ @@ -55,7 +57,7 @@ > - 使用颜色 + 颜色应用 - 背景 + 背景控制 清除背景图 清除颜色 + + 预览方式 + + + + + {{ item.desc }} + + + + @@ -108,13 +131,15 @@ import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditSt import { StylesSetting } from '@/components/Pages/ChartItemSetting' import { UploadCustomRequestOptions } from 'naive-ui' import { fileToUrl, loadAsyncComponent } from '@/utils' +import { PreviewScaleEnum } from '@/enums/styleEnum' import { icon } from '@/plugins' const { ColorPaletteIcon } = icon.ionicons5 -const { ZAxisIcon } = icon.carbon +const { ZAxisIcon, ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon const chartEditStore = useChartEditStore() const canvasConfig = chartEditStore.getEditCanvasConfig +const editCanvas = chartEditStore.getEditCanvas const uploadFileListRef = ref() const switchSelectColorLoading = ref(false) @@ -153,10 +178,42 @@ const globalTabList = [ } ] -// 规则 +const previewTypeList = [ + { + key: PreviewScaleEnum.FIT, + title: '自适应', + icon: ScaleIcon, + desc: '自适应比例展示，页面会有留白' + }, + { + key: PreviewScaleEnum.SCROLL_Y, + title: 'Y轴滚动', + icon: FitToWidthIcon, + desc: 'X轴铺满，Y轴自适应滚动' + }, + { + key: PreviewScaleEnum.SCROLL_X, + title: 'X轴滚动', + icon: FitToHeightIcon, + desc: 'Y轴铺满，X轴自适应滚动' + }, + { + key: PreviewScaleEnum.FULL, + title: '铺满', + icon: FitToScreenIcon, + desc: '强行拉伸画面，填充所有视图' + }, +] + +// 画布尺寸规则 const validator = (x: number) => x > 50 -// 前置处理 +// 修改尺寸 +const changeSizeHandle = () => { + chartEditStore.computedScale() +} + +// 上传图片前置处理 //@ts-ignore const beforeUploadHandle = async ({ file }) => { uploadFileListRef.value = [] @@ -176,12 +233,6 @@ const beforeUploadHandle = async ({ file }) => { return true } -// 修改尺寸 -const changeSizeHandle = () => { - chartEditStore.computedScale - chartEditStore.setPageSize -} - // 清除背景 const clearImage = () => { chartEditStore.setEditCanvasConfig( @@ -219,7 +270,6 @@ const switchSelectColorHandle = () => { // 自定义上传操作 const customRequest = (options: UploadCustomRequestOptions) => { const { file } = options - nextTick(() => { if (file.file) { const ImageUrl = fileToUrl(file.file) @@ -236,6 +286,11 @@ const customRequest = (options: UploadCustomRequestOptions) => { } }) } + +// 选择预览方式 +const selectPreviewType = (key: PreviewScaleEnum) => { + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key) +} diff --git a/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts b/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts index 3ce496e3..44f9580c 100644 --- a/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts +++ b/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts @@ -40,7 +40,7 @@ export const useDataListInit = () => { // 删除 const deleteHandle = (cardData: object, index: number) => { goDialog({ - type: DialogEnum.delete, + type: DialogEnum.DELETE, promise: true, onPositiveCallback: () => new Promise(res => setTimeout(() => res(1), 1000)),