chore: 调整编辑器样式解决点选被挡住问题 (#10221)

This commit is contained in:
liaoxuezhi 2024-05-13 10:44:45 +08:00 committed by GitHub
parent e6385a86c4
commit 659941018f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 216 additions and 139 deletions

View File

@ -28,5 +28,38 @@
{ {
"path": "./packages/amis-theme-editor-helper" "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"
}
}
} }

View File

@ -295,12 +295,21 @@ export class App extends React.PureComponent<{
> >
</NavLink> </NavLink>
{process.env.NODE_ENV === 'development' ? (
<>
<a href={`/packages/amis-ui/#/basic/button`}>UI控件</a>
<a href={`/packages/amis-editor/`}></a>
</>
) : (
<>
<a <a
href="https://github.com/fex-team/amis-editor-demo" href="https://github.com/fex-team/amis-editor-demo"
target="_blank" target="_blank"
> >
</a> </a>
</>
)}
{/* <a href="https://suda.bce.baidu.com" target="_blank"> {/* <a href="https://suda.bce.baidu.com" target="_blank">
</a> */} </a> */}

View File

@ -1,22 +1,19 @@
.ae-Breadcrumb { .ae-Breadcrumb {
flex: 0 0 42px; flex: 0 0 22px;
position: relative;
padding: 0; padding: 0;
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid $editor-border-color; border-bottom: 1px solid $editor-border-color;
z-index: 1000;
.ae-Breadcrumb-content { .ae-Breadcrumb-content {
position: relative;
left: 0; left: 0;
height: 100%; height: 100%;
width: max-content; width: max-content;
padding: 0 16px; padding: 0 16px;
white-space: nowrap; white-space: nowrap;
height: 42px; height: 22px;
line-height: 42px; line-height: 22px;
background: #fff; background: #fff;
letter-spacing: 0; letter-spacing: 0;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
@ -26,7 +23,6 @@
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
z-index: 10000;
transition: left ease-out 0.15s; transition: left ease-out 0.15s;
> ul { > ul {
@ -47,7 +43,7 @@
> span { > span {
display: inline-block; display: inline-block;
padding-right: 8px; padding-right: 8px;
line-height: 42px !important; // 避免被覆盖 line-height: 22px !important; // 避免被覆盖
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -57,7 +53,7 @@
// 同级元素选择弹层 // 同级元素选择弹层
> ul { > ul {
position: absolute; position: absolute;
top: 46px; top: 26px;
left: 0; left: 0;
min-width: 100px; min-width: 100px;
max-height: 320px; max-height: 320px;

View File

@ -135,6 +135,10 @@
flex-direction: column; flex-direction: column;
z-index: 0; z-index: 0;
overflow: hidden;
transform: scale(1); // 此后内部元素的fixed会相对此dom定位
transform-origin: center top;
.ant-back-top { .ant-back-top {
bottom: 96px; bottom: 96px;
right: 39px; right: 39px;
@ -155,10 +159,8 @@
.ae-Preview { .ae-Preview {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
min-height: 0;
background-color: $default-bg-color; background-color: $default-bg-color;
overflow: hidden;
transform: scale(1); // 此后内部元素的fixed会相对此dom定位
transform-origin: center top;
.ae-Preview-body { .ae-Preview-body {
position: relative; position: relative;
@ -175,7 +177,7 @@
&:before { &:before {
content: ''; content: '';
display: block; display: block;
height: 24px; height: 16px;
} }
@include minScrollBar(); @include minScrollBar();
@ -256,15 +258,15 @@
&.is-mobile { &.is-mobile {
position: relative; position: relative;
border-width: 24px 22px 36px; border-width: 10px;
border-color: #ddd; border-color: #222;
border-style: solid; border-style: solid;
border-radius: 40px; border-radius: 30px;
width: 419px; width: 375px;
height: 798px; height: 96%;
max-height: 812px;
flex-grow: unset; flex-grow: unset;
min-height: unset; min-height: unset;
margin: 40px auto;
min-width: unset; min-width: unset;
padding: 0; padding: 0;
overflow: visible; overflow: visible;
@ -275,6 +277,14 @@
} }
> .ae-Preview-inner { > .ae-Preview-inner {
border-radius: 20px;
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
background: transparent; background: transparent;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -288,71 +298,74 @@
display: none; display: none;
} }
&::before { // &::before {
content: ''; // content: '';
height: 40px; // height: 40px;
position: sticky; // position: sticky;
top: 0; // top: 0;
width: 100%; // width: 100%;
background: #ddd; // background: #ddd;
flex-shrink: 0; // flex-shrink: 0;
display: block; // display: block;
} // }
} }
// 移动端预览设备装饰 // // 移动端预览设备装饰
.mobile-sound, // .mobile-sound,
.mobile-receiver, // .mobile-receiver,
.mobile-left-btn, // .mobile-left-btn,
.mobile-right-btn, // .mobile-right-btn,
.mobile-open-btn { // .mobile-open-btn {
position: absolute; // position: absolute;
background: #cdcdcd; // background: #cdcdcd;
border-radius: 3px; // border-radius: 3px;
z-index: 100; // z-index: 100;
} // }
// 音响 // // 音响
.mobile-sound { // .mobile-sound {
top: 5px; // top: 5px;
left: 142px; // 164px - 22px; // left: 142px; // 164px - 22px;
width: 58px; // width: 58px;
height: 6px; // height: 6px;
} // }
// 听筒 // // 听筒
.mobile-receiver { // .mobile-receiver {
top: 3px; // top: 3px;
left: 224px; // 246px - 22px; // left: 224px; // 246px - 22px;
width: 10px; // width: 10px;
height: 10px; // height: 10px;
border-radius: 5px; // border-radius: 5px;
} // }
// 左侧按钮 // // 左侧按钮
.mobile-left-btn { // .mobile-left-btn {
top: 162px; // 226px - 64px; // top: 162px; // 226px - 64px;
left: -27px; // -5px - 22px; // left: -27px; // -5px - 22px;
width: 6px; // width: 6px;
height: 50px; // height: 50px;
} // }
// 右侧按钮长条 // // 右侧按钮长条
.mobile-right-btn { // .mobile-right-btn {
top: 61px; // 125px - 64px; // top: 61px; // 125px - 64px;
right: -27px; // right: -27px;
width: 6px; // width: 6px;
height: 100px; // height: 100px;
} // }
// 开机键 // // 开机键
.mobile-open-btn { // .mobile-open-btn {
top: 211px; // 275px - 64px; // top: 211px; // 275px - 64px;
right: -27px; // right: -27px;
width: 6px; // width: 6px;
height: 50px; // height: 50px;
} // }
} }
} }
// 移动端需要上下滚动避免设备背景被遮挡 // 移动端需要上下滚动避免设备背景被遮挡
&.is-mobile-body { &.is-mobile-body {
overflow-x: hidden; overflow: visible !important;
display: flex;
align-items: center;
justify-content: center;
&::-webkit-scrollbar { &::-webkit-scrollbar {
background-color: $default-bg-color; background-color: $default-bg-color;

View File

@ -104,12 +104,19 @@ export default class Preview extends Component<PreviewProps> {
@autobind @autobind
contentsRef(ref: HTMLDivElement | null) { contentsRef(ref: HTMLDivElement | null) {
if (ref) { if (ref) {
this.scrollLayer = ref as HTMLDivElement; this.layer = ref.parentElement!.querySelector(
this.scrollLayer.addEventListener('scroll', this.handlePanelChange); '.ae-Preview-widgets'
this.layer = ref!.querySelector('.ae-Preview-widgets') as HTMLDivElement; ) as HTMLDivElement;
this.props.store.setLayer(this.layer);
this.unSensor = resizeSensor(ref, this.handlePanelChange); 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 { } else {
delete this.scrollLayer; delete this.scrollLayer;
delete this.layer; delete this.layer;
@ -123,9 +130,9 @@ export default class Preview extends Component<PreviewProps> {
() => [this.getHighlightNodes(), this.props.store.activeId], () => [this.getHighlightNodes(), this.props.store.activeId],
([ids]: [Array<string>], oldValue: [Array<string>]) => { ([ids]: [Array<string>], oldValue: [Array<string>]) => {
const store = this.props.store; const store = this.props.store;
setTimeout(() => { requestAnimationFrame(() => {
this.calculateHighlightBox(ids); this.calculateHighlightBox(ids);
}, 50); });
let oldIds = oldValue?.[0]; let oldIds = oldValue?.[0];
if (Array.isArray(oldIds)) { if (Array.isArray(oldIds)) {
@ -137,8 +144,17 @@ export default class Preview extends Component<PreviewProps> {
@autobind @autobind
handlePanelChange() { handlePanelChange() {
// 视图同步也需要时间啊 if (this.layer && this.scrollLayer) {
setTimeout(() => this.calculateHighlightBox(this.getHighlightNodes()), 50); requestAnimationFrame(() => {
this.layer!.style.cssText += `transform: translate(0, -${
this.scrollLayer!.scrollTop
}px);`;
});
}
requestAnimationFrame(() =>
this.calculateHighlightBox(this.getHighlightNodes())
);
} }
getHighlightNodes() { getHighlightNodes() {
@ -498,10 +514,15 @@ export default class Preview extends Component<PreviewProps> {
'ae-Preview', 'ae-Preview',
'AMISCSSWrapper', 'AMISCSSWrapper',
className, className,
isMobile ? 'is-mobile-body hoverShowScrollBar' : 'is-pc-body' isMobile ? 'is-mobile-body' : 'is-pc-body'
)} )}
> >
<div <div
key={
/* contentsLayer 逻辑不一样需要更新一下 */ isMobile
? 'mobile-body'
: 'pc-body'
}
className={cx( className={cx(
'ae-Preview-body', 'ae-Preview-body',
className, className,
@ -510,15 +531,6 @@ export default class Preview extends Component<PreviewProps> {
)} )}
ref={this.contentsRef} ref={this.contentsRef}
> >
{isMobile && (
<React.Fragment>
<div className="mobile-sound"></div>
<div className="mobile-receiver"></div>
<div className="mobile-left-btn"></div>
<div className="mobile-right-btn"></div>
<div className="mobile-open-btn"></div>
</React.Fragment>
)}
<div className="ae-Preview-inner"> <div className="ae-Preview-inner">
{isMobile ? ( {isMobile ? (
<IFramePreview <IFramePreview
@ -543,6 +555,20 @@ export default class Preview extends Component<PreviewProps> {
appLocale={appLocale} appLocale={appLocale}
/> />
)} )}
</div>
{this.currentDom && (
<BackTop
key={isMobile ? 'mobile-back-up' : 'pc-back-up'}
className="ae-editor-action-btn"
target={this.getCurrentTarget.bind(this)}
onClick={(e: any) => {
console.log(e);
}}
>
<Icon icon="back-up" className="back-top-icon" />
</BackTop>
)}
</div>
<div className="ae-Preview-widgets" id="aePreviewHighlightBox"> <div className="ae-Preview-widgets" id="aePreviewHighlightBox">
{store.highlightNodes.map(node => ( {store.highlightNodes.map(node => (
@ -576,20 +602,6 @@ export default class Preview extends Component<PreviewProps> {
))} ))}
</div> </div>
</div> </div>
{this.currentDom && (
<BackTop
key={isMobile ? 'mobile-back-up' : 'pc-back-up'}
className="ae-editor-action-btn"
target={this.getCurrentTarget.bind(this)}
onClick={(e: any) => {
console.log(e);
}}
>
<Icon icon="back-up" className="back-top-icon" />
</BackTop>
)}
</div>
</div>
); );
} }
} }

View File

@ -495,16 +495,16 @@ export const EditorNode = types
const arr = targets.concat(); const arr = targets.concat();
const first = arr.shift()!; const first = arr.shift()!;
const firstRect = first.getBoundingClientRect(); const firstRect = first.getBoundingClientRect();
const firstMarginTop = parseInt(window.getComputedStyle(first).marginTop); // const firstMarginTop = parseInt(window.getComputedStyle(first).marginTop);
const firstMarginBottom = parseInt( // const firstMarginBottom = parseInt(
window.getComputedStyle(first).marginBottom // window.getComputedStyle(first).marginBottom
); // );
const rect = { const rect = {
left: firstRect.left, left: firstRect.left,
top: firstRect.top, top: firstRect.top,
width: firstRect.width, width: firstRect.width,
height: firstRect.height + firstMarginTop + firstMarginBottom, height: firstRect.height, // + firstMarginTop + firstMarginBottom,
right: firstRect.right, right: firstRect.right,
bottom: firstRect.bottom bottom: firstRect.bottom
}; };

View File

@ -571,6 +571,13 @@ export class DialogPlugin extends BasePlugin {
buildSubRenderers() {} buildSubRenderers() {}
/**
* dialog
*/
wrapperResolve(dom: HTMLElement): HTMLElement | Array<HTMLElement> {
return dom.lastChild as HTMLElement;
}
async buildDataSchemas( async buildDataSchemas(
node: EditorNodeType, node: EditorNodeType,
region?: EditorNodeType, region?: EditorNodeType,

View File

@ -378,6 +378,13 @@ export class DrawerPlugin extends BasePlugin {
buildSubRenderers() {} buildSubRenderers() {}
/**
* drawer
*/
wrapperResolve(dom: HTMLElement): HTMLElement | Array<HTMLElement> {
return dom.lastChild as HTMLElement;
}
async buildDataSchemas( async buildDataSchemas(
node: EditorNodeType, node: EditorNodeType,
region?: EditorNodeType, region?: EditorNodeType,