From 659941018fd2027191e6d5d9365c6f2effe65bb4 Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2698393+2betop@users.noreply.github.com> Date: Mon, 13 May 2024 10:44:45 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E6=A0=B7=E5=BC=8F=E8=A7=A3=E5=86=B3=E7=82=B9=E9=80=89?= =?UTF-8?q?=E8=A2=AB=E6=8C=A1=E4=BD=8F=E9=97=AE=E9=A2=98=20(#10221)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- amis.code-workspace | 35 +++- examples/components/App.tsx | 21 ++- packages/amis-editor-core/scss/_bcn.scss | 14 +- packages/amis-editor-core/scss/editor.scss | 149 ++++++++++-------- .../src/component/Preview.tsx | 112 +++++++------ packages/amis-editor-core/src/store/node.ts | 10 +- packages/amis-editor/src/plugin/Dialog.tsx | 7 + packages/amis-editor/src/plugin/Drawer.tsx | 7 + 8 files changed, 216 insertions(+), 139 deletions(-) diff --git a/amis.code-workspace b/amis.code-workspace index 71f13097f..434775751 100644 --- a/amis.code-workspace +++ b/amis.code-workspace @@ -28,5 +28,38 @@ { "path": "./packages/amis-theme-editor-helper" } - ] + ], + "settings": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.tabSize": 2, + "typescript.tsdk": "node_modules/typescript/lib", + "files.exclude": { + "**/lib": true, + "**/esm": true, + "**/sdk": true, + "**/tsconfig.tsbuildinfo": true, + "**/schema.json": true, + "**/lerna-debug.log": true, + "**/package-lock.json": true, + "**/.rollup.cache": true, + "public/**": true + }, + "search.exclude": { + "**/lib": true, + "**/esm": true, + "**/sdk": true, + "**/tsconfig.tsbuildinfo": true, + "**/schema.json": true, + "**/lerna-debug.log": true, + "**/package-lock.json": true, + "**/.rollup.cache": true, + "public/**": true, + "examples/docs.json": true, + "examples/components/EChartsEditor/option-parts/**/*": true + }, + "[xml]": { + "editor.defaultFormatter": "redhat.vscode-xml" + } + } } diff --git a/examples/components/App.tsx b/examples/components/App.tsx index 0621ad556..62ef6a8dd 100644 --- a/examples/components/App.tsx +++ b/examples/components/App.tsx @@ -295,12 +295,21 @@ export class App extends React.PureComponent<{ > 示例 - - 编辑器 - + {process.env.NODE_ENV === 'development' ? ( + <> + UI控件 + 编辑器 + + ) : ( + <> + + 编辑器 + + + )} {/* 爱速搭 */} diff --git a/packages/amis-editor-core/scss/_bcn.scss b/packages/amis-editor-core/scss/_bcn.scss index 6a01b0936..d35734eb1 100644 --- a/packages/amis-editor-core/scss/_bcn.scss +++ b/packages/amis-editor-core/scss/_bcn.scss @@ -1,22 +1,19 @@ .ae-Breadcrumb { - flex: 0 0 42px; - position: relative; + flex: 0 0 22px; padding: 0; background: #fff; box-sizing: border-box; border-bottom: 1px solid $editor-border-color; - z-index: 1000; .ae-Breadcrumb-content { - position: relative; left: 0; height: 100%; width: max-content; padding: 0 16px; white-space: nowrap; - height: 42px; - line-height: 42px; + height: 22px; + line-height: 22px; background: #fff; letter-spacing: 0; font-family: PingFangSC-Regular; @@ -26,7 +23,6 @@ user-select: none; box-sizing: border-box; - z-index: 10000; transition: left ease-out 0.15s; > ul { @@ -47,7 +43,7 @@ > span { display: inline-block; padding-right: 8px; - line-height: 42px !important; // 避免被覆盖 + line-height: 22px !important; // 避免被覆盖 cursor: pointer; &:hover { @@ -57,7 +53,7 @@ // 同级元素选择弹层 > ul { position: absolute; - top: 46px; + top: 26px; left: 0; min-width: 100px; max-height: 320px; diff --git a/packages/amis-editor-core/scss/editor.scss b/packages/amis-editor-core/scss/editor.scss index a6b7b10a6..08e334cdb 100644 --- a/packages/amis-editor-core/scss/editor.scss +++ b/packages/amis-editor-core/scss/editor.scss @@ -135,6 +135,10 @@ flex-direction: column; z-index: 0; + overflow: hidden; + transform: scale(1); // 此后内部元素的fixed会相对此dom定位 + transform-origin: center top; + .ant-back-top { bottom: 96px; right: 39px; @@ -155,10 +159,8 @@ .ae-Preview { position: relative; flex-grow: 1; + min-height: 0; background-color: $default-bg-color; - overflow: hidden; - transform: scale(1); // 此后内部元素的fixed会相对此dom定位 - transform-origin: center top; .ae-Preview-body { position: relative; @@ -175,7 +177,7 @@ &:before { content: ''; display: block; - height: 24px; + height: 16px; } @include minScrollBar(); @@ -256,15 +258,15 @@ &.is-mobile { position: relative; - border-width: 24px 22px 36px; - border-color: #ddd; + border-width: 10px; + border-color: #222; border-style: solid; - border-radius: 40px; - width: 419px; - height: 798px; + border-radius: 30px; + width: 375px; + height: 96%; + max-height: 812px; flex-grow: unset; min-height: unset; - margin: 40px auto; min-width: unset; padding: 0; overflow: visible; @@ -275,6 +277,14 @@ } > .ae-Preview-inner { + border-radius: 20px; + + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + background: transparent; overflow-x: hidden; overflow-y: auto; @@ -288,71 +298,74 @@ display: none; } - &::before { - content: ''; - height: 40px; - position: sticky; - top: 0; - width: 100%; - background: #ddd; - flex-shrink: 0; - display: block; - } + // &::before { + // content: ''; + // height: 40px; + // position: sticky; + // top: 0; + // width: 100%; + // background: #ddd; + // flex-shrink: 0; + // display: block; + // } } - // 移动端预览设备装饰 - .mobile-sound, - .mobile-receiver, - .mobile-left-btn, - .mobile-right-btn, - .mobile-open-btn { - position: absolute; - background: #cdcdcd; - border-radius: 3px; - z-index: 100; - } - // 音响 - .mobile-sound { - top: 5px; - left: 142px; // 164px - 22px; - width: 58px; - height: 6px; - } - // 听筒 - .mobile-receiver { - top: 3px; - left: 224px; // 246px - 22px; - width: 10px; - height: 10px; - border-radius: 5px; - } - // 左侧按钮 - .mobile-left-btn { - top: 162px; // 226px - 64px; - left: -27px; // -5px - 22px; - width: 6px; - height: 50px; - } - // 右侧按钮（长条） - .mobile-right-btn { - top: 61px; // 125px - 64px; - right: -27px; - width: 6px; - height: 100px; - } - // 开机键 - .mobile-open-btn { - top: 211px; // 275px - 64px; - right: -27px; - width: 6px; - height: 50px; - } + // // 移动端预览设备装饰 + // .mobile-sound, + // .mobile-receiver, + // .mobile-left-btn, + // .mobile-right-btn, + // .mobile-open-btn { + // position: absolute; + // background: #cdcdcd; + // border-radius: 3px; + // z-index: 100; + // } + // // 音响 + // .mobile-sound { + // top: 5px; + // left: 142px; // 164px - 22px; + // width: 58px; + // height: 6px; + // } + // // 听筒 + // .mobile-receiver { + // top: 3px; + // left: 224px; // 246px - 22px; + // width: 10px; + // height: 10px; + // border-radius: 5px; + // } + // // 左侧按钮 + // .mobile-left-btn { + // top: 162px; // 226px - 64px; + // left: -27px; // -5px - 22px; + // width: 6px; + // height: 50px; + // } + // // 右侧按钮（长条） + // .mobile-right-btn { + // top: 61px; // 125px - 64px; + // right: -27px; + // width: 6px; + // height: 100px; + // } + // // 开机键 + // .mobile-open-btn { + // top: 211px; // 275px - 64px; + // right: -27px; + // width: 6px; + // height: 50px; + // } } } // 移动端需要上下滚动，避免设备背景被遮挡 &.is-mobile-body { - overflow-x: hidden; + overflow: visible !important; + display: flex; + align-items: center; + justify-content: center; &::-webkit-scrollbar { background-color: $default-bg-color; diff --git a/packages/amis-editor-core/src/component/Preview.tsx b/packages/amis-editor-core/src/component/Preview.tsx index 95de6a860..ee4e5ee6e 100644 --- a/packages/amis-editor-core/src/component/Preview.tsx +++ b/packages/amis-editor-core/src/component/Preview.tsx @@ -104,12 +104,19 @@ export default class Preview extends Component { @autobind contentsRef(ref: HTMLDivElement | null) { if (ref) { - this.scrollLayer = ref as HTMLDivElement; - this.scrollLayer.addEventListener('scroll', this.handlePanelChange); - this.layer = ref!.querySelector('.ae-Preview-widgets') as HTMLDivElement; - this.props.store.setLayer(this.layer); + this.layer = ref.parentElement!.querySelector( + '.ae-Preview-widgets' + ) as HTMLDivElement; this.unSensor = resizeSensor(ref, this.handlePanelChange); + if (this.props.isMobile) { + ref = ref.firstChild as HTMLDivElement; + } + + this.scrollLayer = ref as HTMLDivElement; + this.scrollLayer.removeEventListener('scroll', this.handlePanelChange); + this.scrollLayer.addEventListener('scroll', this.handlePanelChange); + this.props.store.setLayer(this.layer); } else { delete this.scrollLayer; delete this.layer; @@ -123,9 +130,9 @@ export default class Preview extends Component { () => [this.getHighlightNodes(), this.props.store.activeId], ([ids]: [Array], oldValue: [Array]) => { const store = this.props.store; - setTimeout(() => { + requestAnimationFrame(() => { this.calculateHighlightBox(ids); - }, 50); + }); let oldIds = oldValue?.[0]; if (Array.isArray(oldIds)) { @@ -137,8 +144,17 @@ export default class Preview extends Component { @autobind handlePanelChange() { - // 视图同步也需要时间啊 - setTimeout(() => this.calculateHighlightBox(this.getHighlightNodes()), 50); + if (this.layer && this.scrollLayer) { + requestAnimationFrame(() => { + this.layer!.style.cssText += `transform: translate(0, -${ + this.scrollLayer!.scrollTop + }px);`; + }); + } + + requestAnimationFrame(() => + this.calculateHighlightBox(this.getHighlightNodes()) + ); } getHighlightNodes() { @@ -498,10 +514,15 @@ export default class Preview extends Component { 'ae-Preview', 'AMISCSSWrapper', className, - isMobile ? 'is-mobile-body hoverShowScrollBar' : 'is-pc-body' + isMobile ? 'is-mobile-body' : 'is-pc-body' )} >
{ )} ref={this.contentsRef} > - {isMobile && ( - -
-
-
-
-
- - )}
{isMobile ? ( { appLocale={appLocale} /> )} - -
- {store.highlightNodes.map(node => ( - - {node.childRegions.map(region => - !node.memberImmutable(region.region) && - store.isRegionActive(region.id, region.region) ? ( - - ) : null - )} - - ))} -
{this.currentDom && ( { )}
+ +
+ {store.highlightNodes.map(node => ( + + {node.childRegions.map(region => + !node.memberImmutable(region.region) && + store.isRegionActive(region.id, region.region) ? ( + + ) : null + )} + + ))} +
); } diff --git a/packages/amis-editor-core/src/store/node.ts b/packages/amis-editor-core/src/store/node.ts index bf541dc79..d4b681360 100644 --- a/packages/amis-editor-core/src/store/node.ts +++ b/packages/amis-editor-core/src/store/node.ts @@ -495,16 +495,16 @@ export const EditorNode = types const arr = targets.concat(); const first = arr.shift()!; const firstRect = first.getBoundingClientRect(); - const firstMarginTop = parseInt(window.getComputedStyle(first).marginTop); - const firstMarginBottom = parseInt( - window.getComputedStyle(first).marginBottom - ); + // const firstMarginTop = parseInt(window.getComputedStyle(first).marginTop); + // const firstMarginBottom = parseInt( + // window.getComputedStyle(first).marginBottom + // ); const rect = { left: firstRect.left, top: firstRect.top, width: firstRect.width, - height: firstRect.height + firstMarginTop + firstMarginBottom, + height: firstRect.height, // + firstMarginTop + firstMarginBottom, right: firstRect.right, bottom: firstRect.bottom }; diff --git a/packages/amis-editor/src/plugin/Dialog.tsx b/packages/amis-editor/src/plugin/Dialog.tsx index a1983d067..213db6ce0 100644 --- a/packages/amis-editor/src/plugin/Dialog.tsx +++ b/packages/amis-editor/src/plugin/Dialog.tsx @@ -571,6 +571,13 @@ export class DialogPlugin extends BasePlugin { buildSubRenderers() {} + /** + * dialog 高亮区域应该是里面的内容 + */ + wrapperResolve(dom: HTMLElement): HTMLElement | Array { + return dom.lastChild as HTMLElement; + } + async buildDataSchemas( node: EditorNodeType, region?: EditorNodeType, diff --git a/packages/amis-editor/src/plugin/Drawer.tsx b/packages/amis-editor/src/plugin/Drawer.tsx index b5062ca93..92199c1b7 100644 --- a/packages/amis-editor/src/plugin/Drawer.tsx +++ b/packages/amis-editor/src/plugin/Drawer.tsx @@ -378,6 +378,13 @@ export class DrawerPlugin extends BasePlugin { buildSubRenderers() {} + /** + * drawer 高亮区域应该是里面的内容 + */ + wrapperResolve(dom: HTMLElement): HTMLElement | Array { + return dom.lastChild as HTMLElement; + } + async buildDataSchemas( node: EditorNodeType, region?: EditorNodeType,