From 8f8697370013e00c0fa2548a654440021c00297e Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Sat, 12 Oct 2024 21:48:48 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=85=A8=E5=B1=80=E5=85=A8=E5=B1=8F=E6=89=93?= =?UTF-8?q?=E5=BC=80=E5=B7=A5=E5=85=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 + .../fullscreen-header/fullscreen-header.scss | 17 ++++ .../fullscreen-header/fullscreen-header.tsx | 29 +++++++ src/common/index.ts | 2 + src/mob-app/main.ts | 2 + src/util/fullscreen/fullscreen-util.ts | 82 +++++++++++++++++++ src/util/index.ts | 1 + 7 files changed, 137 insertions(+) create mode 100644 src/common/fullscreen-header/fullscreen-header.scss create mode 100644 src/common/fullscreen-header/fullscreen-header.tsx create mode 100644 src/util/fullscreen/fullscreen-util.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 94634b5e6c..007556d745 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ ## [Unreleased] +### Added + +- 新增移动端全局全屏打开工具 + ### Fixed - 修复门户控件界面行为组未绘制的问题 diff --git a/src/common/fullscreen-header/fullscreen-header.scss b/src/common/fullscreen-header/fullscreen-header.scss new file mode 100644 index 0000000000..aee3fdae11 --- /dev/null +++ b/src/common/fullscreen-header/fullscreen-header.scss @@ -0,0 +1,17 @@ +@include b('fullscreen-header'){ + height: getCssVar(spacing,extra,loose); + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + @include e('close'){ + position: absolute; + right: getCssVar(spacing,extra,tight); + font-size: getCssVar(font-size,header-3); + height: 100%; + display: flex; + align-items: center; + } + +} \ No newline at end of file diff --git a/src/common/fullscreen-header/fullscreen-header.tsx b/src/common/fullscreen-header/fullscreen-header.tsx new file mode 100644 index 0000000000..c139c18deb --- /dev/null +++ b/src/common/fullscreen-header/fullscreen-header.tsx @@ -0,0 +1,29 @@ +import { useNamespace } from '@ibiz-template/vue3-util'; +import { defineComponent } from 'vue'; +import './fullscreen-header.scss'; + +export const IBizFullscreenHeader = defineComponent({ + name: 'IBizFullscreenHeader', + props: { + title: { + type: String, + }, + }, + setup() { + const ns = useNamespace('fullscreen-header'); + const onClose = () => { + ibiz.fullscreenUtil.closeElementFullscreen(); + }; + return { ns, onClose }; + }, + render() { + return ( +
+ {this.title} + + + +
+ ); + }, +}); diff --git a/src/common/index.ts b/src/common/index.ts index e18c23fa96..e4d2448e10 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -16,6 +16,7 @@ import { IBizRawItem } from './rawitem/rawitem'; import { IBizRow } from './row/row'; import { IBizPresetViewBack } from './preset-view-back/preset-view-back'; import { IBizPresetViewHeader } from './preset-view-header/preset-view-header'; +import { IBizFullscreenHeader } from './fullscreen-header/fullscreen-header'; export * from './col/col'; export * from './row/row'; @@ -38,6 +39,7 @@ export const IBizCommonComponents = { v.component(IBizPresetViewBack.name, IBizPresetViewBack); v.component(IBizPresetViewHeader.name, IBizPresetViewHeader); v.component(IBizCodeList.name, IBizCodeList); + v.component(IBizFullscreenHeader.name, IBizFullscreenHeader); }, }; diff --git a/src/mob-app/main.ts b/src/mob-app/main.ts index e47765f194..1cffdfafdc 100644 --- a/src/mob-app/main.ts +++ b/src/mob-app/main.ts @@ -24,6 +24,7 @@ import { NotificationUtil, OpenViewUtil, OverlayController, + FullscreenUtil, } from '../util'; export async function runApp(plugins?: Plugin[]): Promise { @@ -83,6 +84,7 @@ export async function runApp(plugins?: Plugin[]): Promise { ibiz.loading = new LoadingUtil(); ibiz.overlay = new OverlayController(); ibiz.platform = getPlatformProvider(); + ibiz.fullscreenUtil = new FullscreenUtil(); await ibiz.i18n.init(); diff --git a/src/util/fullscreen/fullscreen-util.ts b/src/util/fullscreen/fullscreen-util.ts new file mode 100644 index 0000000000..437c03d76d --- /dev/null +++ b/src/util/fullscreen/fullscreen-util.ts @@ -0,0 +1,82 @@ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ +/* eslint-disable @typescript-eslint/no-explicit-any */ + +import { VNode, createApp, h } from 'vue'; +// import { defaultNamespace } from '@ibiz-template/core/out/utils/namespace/namespace'; +import { IBizFullscreenHeader } from '../../common/fullscreen-header/fullscreen-header'; +// import { defaultNamespace } from '@ibiz-template/core/out/utils/namespace/namespace'; + +/** + * 全屏全局工具类 + * + * @export + * @class FullscreenUtil + */ +export class FullscreenUtil { + /** + * Creates an instance of FullscreenUtil. + * @memberof FullscreenUtil + */ + constructor() {} + + /** + *是否全屏状态 + * + * @readonly + * @memberof FullscreenUtil + */ + get isFullScreen() { + return !!document.fullscreenElement; + } + + /** + * 全屏样式 + * @author fzh + * @date 2024-07-15 19:39:40 + */ + public FullscreenClass: string = 'full-screen-class'; + + /** + * 指定元素全屏 + * @author fzh + * @date 2024-07-09 19:39:40 + */ + public openElementFullscreen(div: HTMLDivElement, data?: IParams): void { + if (data?.class) { + this.FullscreenClass = data.class; + } + if (!document.fullscreenElement && div) { + if (this.FullscreenClass) { + div.classList.add(this.FullscreenClass); + } + + // 通过传递参数决定是否绘制标题和关闭按钮 + if (data?.showClose || data?.srftitle) { + const content = document.createElement('div'); + content.id = 'fullscreen'; + const app = createApp(IBizFullscreenHeader, { + title: data?.srftitle, + }); + app.mount(content); + //直接操作传进来的元素 + div.insertBefore(content, div.children[0]); + } + div.requestFullscreen(); + } + } + + /** + * 页面退出全屏 + * @author fzh + * @date 2024-07-09 19:39:40 + */ + public closeElementFullscreen(): void { + // 退出前移除全屏元素的全屏样式 + document.fullscreenElement?.classList.remove(this.FullscreenClass); + const close = document.fullscreenElement?.querySelector('#fullscreen'); + if (close) { + close.remove(); + } + document.exitFullscreen(); + } +} diff --git a/src/util/index.ts b/src/util/index.ts index c813241e40..5b6160309d 100644 --- a/src/util/index.ts +++ b/src/util/index.ts @@ -8,4 +8,5 @@ export { loadingDirective } from './directive/loading'; export { ConfirmUtil } from './confirm-util/confirm-util'; export { AppUtil } from './app-util/app-util'; export { usePagination } from './pagination/use-pagination'; +export { FullscreenUtil } from './fullscreen/fullscreen-util'; export * from './store'; -- Gitee From bb6a371e96bd3c4b1423ea7d4acdbab0e1b14dd7 Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Sat, 12 Oct 2024 21:49:43 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E5=AE=BD=E9=AB=98=E5=8F=98=E5=8C=96=E6=97=B6=E6=9C=AA=E8=87=AA?= =?UTF-8?q?=E9=80=82=E5=BA=94=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 3 ++- src/control/chart/chart.tsx | 22 +++++++++++++++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 007556d745..dfd0fedd14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,8 @@ - 新增移动端全局全屏打开工具 ### Fixed - + +- 修复图表宽高变化时未自适应的问题 - 修复门户控件界面行为组未绘制的问题 - 修复登录页标签标题异常 diff --git a/src/control/chart/chart.tsx b/src/control/chart/chart.tsx index 7f0181b88a..8fcdf985f4 100644 --- a/src/control/chart/chart.tsx +++ b/src/control/chart/chart.tsx @@ -1,5 +1,11 @@ import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; -import { defineComponent, onMounted, PropType, ref } from 'vue'; +import { + defineComponent, + onBeforeUnmount, + onMounted, + PropType, + ref, +} from 'vue'; import { IDEChart } from '@ibiz/model-core'; import { init } from 'echarts'; import './chart.scss'; @@ -20,9 +26,23 @@ const ChartControl = defineComponent({ const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); const chartRef = ref(); + // 容器大小变化监听器 + let resizeObserver: ResizeObserver; + onMounted(() => { const chart = init(chartRef.value); c.initChart(chart); + + if (chartRef.value && ResizeObserver) { + resizeObserver = new ResizeObserver(() => { + c.resizeChart(); + }); + resizeObserver.observe(chartRef.value); + } + }); + + onBeforeUnmount(() => { + resizeObserver?.disconnect(); }); return { -- Gitee