优化

qkiroc · Sep 6, 2023 · 4b8f6a8 · 4b8f6a8
1 parent a95ae13
commit 4b8f6a8
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 63 deletions.
diff --git a/packages/amis-core/src/components/CustomStyle.tsx b/packages/amis-core/src/components/CustomStyle.tsx
@@ -1,7 +1,7 @@
-import {useEffect, useState} from 'react';
+import {useEffect, useRef} from 'react';
 import type {RendererEnv} from '../env';
-import type {CustomStyleClassName} from '../utils/style-helper';
-import {insertCustomStyle, insertEditCustomStyle} from '../utils/style-helper';
+import type {InsertCustomStyle} from '../utils/style-helper';
+import {StyleDom} from '../utils/style-helper';
 
 interface CustomStyleProps {
   config: {
@@ -11,71 +11,13 @@ interface CustomStyleProps {
   env: RendererEnv;
 }
 
-interface InsertCustomStyle {
-  themeCss?: any;
-  classNames?: CustomStyleClassName[];
-  id?: string;
-  defaultData?: any;
-  customStyleClassPrefix?: string;
-}
-
-class StyleDom {
-  id: string;
-  constructor(id: string) {
-    this.id = id;
-  }
-  /**
-   * 插入自定义样式
-   *
-   * @param {InsertCustomStyle} params - 插入自定义样式的参数
-   * @param {string} params.themeCss - 主题样式
-   * @param {string} params.classNames - 自定义样式类名
-   * @param {string} params.defaultData - 默认数据
-   * @param {string} params.customStyleClassPrefix - 自定义样式类名前缀
-   */
-  insertCustomStyle({
-    themeCss,
-    classNames,
-    defaultData,
-    customStyleClassPrefix
-  }: InsertCustomStyle) {
-    insertCustomStyle(
-      themeCss,
-      classNames,
-      this.id,
-      defaultData,
-      customStyleClassPrefix
-    );
-  }
-
-  /**
-   * 插入外层自定义样式
-   *
-   * @param wrapperCustomStyle 自定义样式
-   */
-  insertEditCustomStyle(wrapperCustomStyle: any) {
-    insertEditCustomStyle(wrapperCustomStyle, this.id);
-  }
-  /**
-   * 移除自定义样式
-   */
-  removeCustomStyle(type?: string) {
-    const style = document.getElementById(
-      (type ? type + '-' : '') + this.id.replace('u:', '')
-    );
-    if (style) {
-      style.remove();
-    }
-  }
-}
-
 export default function (props: CustomStyleProps) {
   const {themeCss, classNames, id, defaultData, wrapperCustomStyle} =
     props.config;
   if (!themeCss && !wrapperCustomStyle) {
     return null;
   }
-  const [styleDom] = useState(new StyleDom(id || ''));
+  const styleDom = useRef(new StyleDom(id || '')).current;
 
   useEffect(() => {
     styleDom.insertCustomStyle({

diff --git a/packages/amis-core/src/utils/style-helper.ts b/packages/amis-core/src/utils/style-helper.ts
@@ -361,3 +361,61 @@ export function insertEditCustomStyle(customStyle: any, id?: string) {
     'wrapperCustomStyle-' + (id?.replace('u:', '') || uuid())
   );
 }
+
+export interface InsertCustomStyle {
+  themeCss?: any;
+  classNames?: CustomStyleClassName[];
+  id?: string;
+  defaultData?: any;
+  customStyleClassPrefix?: string;
+}
+
+export class StyleDom {
+  id: string;
+  constructor(id: string) {
+    this.id = id;
+  }
+  /**
+   * 插入自定义样式
+   *
+   * @param {InsertCustomStyle} params - 插入自定义样式的参数
+   * @param {string} params.themeCss - 主题样式
+   * @param {string} params.classNames - 自定义样式类名
+   * @param {string} params.defaultData - 默认数据
+   * @param {string} params.customStyleClassPrefix - 自定义样式类名前缀
+   */
+  insertCustomStyle({
+    themeCss,
+    classNames,
+    defaultData,
+    customStyleClassPrefix
+  }: InsertCustomStyle) {
+    insertCustomStyle(
+      themeCss,
+      classNames,
+      this.id,
+      defaultData,
+      customStyleClassPrefix
+    );
+  }
+
+  /**
+   * 插入外层自定义样式
+   *
+   * @param wrapperCustomStyle 自定义样式
+   */
+  insertEditCustomStyle(wrapperCustomStyle: any) {
+    insertEditCustomStyle(wrapperCustomStyle, this.id);
+  }
+  /**
+   * 移除自定义样式
+   */
+  removeCustomStyle(type?: string) {
+    const style = document.getElementById(
+      (type ? type + '-' : '') + this.id.replace('u:', '')
+    );
+    if (style) {
+      style.remove();
+    }
+  }
+}
diff --git a/packages/amis-ui/scss/components/_page.scss b/packages/amis-ui/scss/components/_page.scss
@@ -17,7 +17,6 @@
   &-content {
     padding: var(--Page-content-paddingY) var(--Page-content-paddingX);
     position: relative;
-    height: 100%;
     width: 100%;
   }