diff --git a/docs/zh-CN/start/faq.md b/docs/zh-CN/start/faq.md index a26ae15e4..ff25f60cc 100644 --- a/docs/zh-CN/start/faq.md +++ b/docs/zh-CN/start/faq.md @@ -8,7 +8,7 @@ title: 常见问题 ## CRUD 顶部有重叠遮挡 -在初始化 amis 渲染器的时候设置 `affixOffsetTop`，或者通过 `"affixHeader": false` 关闭固定顶部功能。 +在初始化 amis 渲染器的时候设置 `--affix-offset-top` css 变量设置成合适的值，或者通过 `"affixHeader": false` 关闭固定顶部功能。 ## 如何换行 diff --git a/docs/zh-CN/start/getting-started.md b/docs/zh-CN/start/getting-started.md index 08c0565a1..6d5d21414 100644 --- a/docs/zh-CN/start/getting-started.md +++ b/docs/zh-CN/start/getting-started.md @@ -722,10 +722,14 @@ render 有三个参数，后面会详细说明这三个参数内的属性 固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。 +> 3.5.0 及以上版本请直接通过外层设置 `--affix-offset-top` css 变量。 + #### affixOffsetBottom: number 固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。 +> 3.5.0 及以上版本请直接通过外层设置 `--affix-offset-bottom` css 变量。 + #### richTextToken: string 内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者用免费的 Tinymce，不设置 token 默认就是 Tinymce。 diff --git a/examples/components/Form/Table.jsx b/examples/components/Form/Table.jsx index 6c75a8401..234ce1ac7 100644 --- a/examples/components/Form/Table.jsx +++ b/examples/components/Form/Table.jsx @@ -17,7 +17,6 @@ export default { name: 'tableAffixHeader', label: '头部固定', affixHeader: true, - affixOffsetTop: 50, columns: [ { name: 'aa', diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx index 98e2b4af7..9667437a8 100644 --- a/examples/components/SchemaRender.jsx +++ b/examples/components/SchemaRender.jsx @@ -179,7 +179,6 @@ export default function (schema, schemaProps, showCode, envOverrides) { tracker(eventTrack) { console.debug('eventTrack', eventTrack); }, - affixOffsetTop: 50, loadTinymcePlugin: async tinymce => { // 参考：https://www.tiny.cloud/docs/advanced/creating-a-plugin/ /* diff --git a/examples/embed.tsx b/examples/embed.tsx index cbb09c1e7..a42cc9157 100644 --- a/examples/embed.tsx +++ b/examples/embed.tsx @@ -32,11 +32,6 @@ export function embed( ) { const __ = makeTranslator(env?.locale || props?.locale); - // app 模式自动加 affixOffsetTop - if (!('affixOffsetTop' in props) && schema.type === 'app') { - props.affixOffsetTop = 50; - } - if (typeof container === 'string') { container = document.querySelector(container) as HTMLElement; } diff --git a/packages/amis-core/src/RootRenderer.tsx b/packages/amis-core/src/RootRenderer.tsx index e4ea0e5c5..86e3295d1 100644 --- a/packages/amis-core/src/RootRenderer.tsx +++ b/packages/amis-core/src/RootRenderer.tsx @@ -11,6 +11,7 @@ import pick from 'lodash/pick'; import mapValues from 'lodash/mapValues'; import {saveAs} from 'file-saver'; import {normalizeApi} from './utils/api'; +import {findDOMNode} from 'react-dom'; export interface RootRendererProps extends RootProps { location?: any; @@ -52,6 +53,22 @@ export class RootRenderer extends React.Component { 'visibilitychange', this.handlePageVisibilityChange ); + + // 兼容 affixOffsetTop 和 affixOffsetBottom + if ( + typeof this.props.env.affixOffsetTop !== 'undefined' || + typeof this.props.env.affixOffsetBottom !== 'undefined' + ) { + // top: var(--affix-offset-top); + const dom = findDOMNode(this); + if (dom?.parentElement) { + dom.parentElement.style.cssText += `--affix-offset-top: ${ + this.props.env.affixOffsetTop || 0 + }px; --affix-offset-bottom: ${ + this.props.env.affixOffsetBottom || 0 + }px;`; + } + } } componentDidUpdate(prevProps: RootRendererProps) { diff --git a/packages/amis-core/src/env.tsx b/packages/amis-core/src/env.tsx index 0f7a24521..e63b9c289 100644 --- a/packages/amis-core/src/env.tsx +++ b/packages/amis-core/src/env.tsx @@ -73,8 +73,19 @@ export interface RendererEnv { copy?: (contents: string, format?: any) => void; getModalContainer?: () => HTMLElement; theme: ThemeInstance; - affixOffsetTop: number; - affixOffsetBottom: number; + + /** + * @deprecated + * 请通过外层设置 `--affix-offset-top` css 变量设置 + */ + affixOffsetTop?: number; + + /** + * @deprecated + * 请通过外层设置 `--affix-offset-bottom` css 变量设置 + */ + affixOffsetBottom?: number; + richTextToken: string; loadRenderer: ( schema: Schema, diff --git a/packages/amis-core/src/factory.tsx b/packages/amis-core/src/factory.tsx index fcb4124ce..3d5aa09bb 100644 --- a/packages/amis-core/src/factory.tsx +++ b/packages/amis-core/src/factory.tsx @@ -224,8 +224,6 @@ export function loadRenderer(schema: Schema, path: string) { export const defaultOptions: RenderOptions = { session: 'global', - affixOffsetTop: 0, - affixOffsetBottom: 0, richTextToken: '', useMobileUI: true, // 是否启用移动端原生 UI enableAMISDebug: diff --git a/packages/amis-editor-core/scss/editor.scss b/packages/amis-editor-core/scss/editor.scss index 0c7bbc8ef..677cb712b 100644 --- a/packages/amis-editor-core/scss/editor.scss +++ b/packages/amis-editor-core/scss/editor.scss @@ -228,6 +228,10 @@ position: static; z-index: 0; } + + > .cxd-Page > .cxd-Page-content { + height: auto; + } } } diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 26fb351d2..64707a816 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -7,6 +7,9 @@ $Table-strip-bg: transparent; :root, .AMISCSSWrapper { + --affix-offset-top: 0px; + --affix-offset-bottom: 0px; + --white: var(--colors-neutral-text-11); --primary: var(--colors-brand-5); --primary-onHover: var(--colors-brand-6); diff --git a/packages/amis-ui/scss/components/_cards.scss b/packages/amis-ui/scss/components/_cards.scss index 8093ca268..e040e04f3 100644 --- a/packages/amis-ui/scss/components/_cards.scss +++ b/packages/amis-ui/scss/components/_cards.scss @@ -33,6 +33,7 @@ &-fixedTop { position: sticky; background: var(--white); + top: var(--affix-offset-top); // box-shadow: var(--Cards-fixedTop-boxShadow); padding: var(--gap-sm); z-index: $zindex-sticky; diff --git a/packages/amis-ui/scss/components/_list.scss b/packages/amis-ui/scss/components/_list.scss index 3fdaf0dc7..340728314 100644 --- a/packages/amis-ui/scss/components/_list.scss +++ b/packages/amis-ui/scss/components/_list.scss @@ -45,6 +45,7 @@ position: sticky; background: var(--white); z-index: $zindex-sticky; + top: var(--affix-offset-top); // box-shadow: var(--List-fixedTop-boxShadow); // padding: var(--gap-sm); diff --git a/packages/amis-ui/scss/components/_page.scss b/packages/amis-ui/scss/components/_page.scss index 97c466e21..d6bc69cbc 100644 --- a/packages/amis-ui/scss/components/_page.scss +++ b/packages/amis-ui/scss/components/_page.scss @@ -122,6 +122,7 @@ border: inherit; } + flex-shrink: 0; width: var(--Page-aside-width); border-right: var(--borderWidth) solid var(--borderColor); @@ -142,4 +143,16 @@ flex-grow: 1; } } + + .#{$ns}Page--asideSticky { + > .#{$ns}Page-aside { + position: sticky; + top: var(--affix-offset-top); + max-height: calc( + 100vh - var(--affix-offset-top) - var(--affix-offset-bottom) + ); + overflow-x: hidden; + overflow-y: auto; + } + } } diff --git a/packages/amis-ui/scss/components/_panel.scss b/packages/amis-ui/scss/components/_panel.scss index 4245fa317..2deb36ce4 100644 --- a/packages/amis-ui/scss/components/_panel.scss +++ b/packages/amis-ui/scss/components/_panel.scss @@ -12,20 +12,10 @@ box-shadow: var(--Panel-boxShadow); &-fixedBottom { - position: absolute; + position: sticky; background: var(--white); - z-index: -1; - opacity: 0; - bottom: 999999px; - box-shadow: var(--Panel-fixedBottom-boxShadow); - border-top: var(--Panel-fixedBottom-borderTop); - - &.in { - position: fixed; - bottom: 0; - z-index: $zindex-affix; - opacity: 1; - } + bottom: var(--affix-offset-bottom); + z-index: $zindex-sticky; } /* 主题 */ diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss index 4092d5e6c..b0976d487 100644 --- a/packages/amis-ui/scss/components/_table.scss +++ b/packages/amis-ui/scss/components/_table.scss @@ -10,6 +10,7 @@ &-fixedTop { position: sticky; + top: var(--affix-offset-top); background: var(--Table-bg); display: block; opacity: 1; diff --git a/packages/amis-ui/scss/layout/_layout.scss b/packages/amis-ui/scss/layout/_layout.scss index caa42790c..1f54b56bf 100644 --- a/packages/amis-ui/scss/layout/_layout.scss +++ b/packages/amis-ui/scss/layout/_layout.scss @@ -46,6 +46,8 @@ body { width: 100%; z-index: $zindex-fixed; } + + --affix-offset-top: var(--Layout-header-height); } &-brandBar { diff --git a/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap b/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap index f6464e69b..a6248cb13 100644 --- a/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap +++ b/packages/amis/__tests__/event-action/__snapshots__/disabled.test.tsx.snap @@ -65,7 +65,6 @@ exports[`EventAction:disabled 1`] = `
- diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap index 2334848bb..92e7c7509 100644 --- a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap +++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap @@ -32,7 +32,6 @@ exports[`doAction:crud reload 1`] = ` >
-
- diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap index bb72c0bb1..75b86caa9 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/array.test.tsx.snap @@ -4,7 +4,6 @@ exports[`Renderer:array 1`] = `
-