Skip to content

Commit

Permalink
chore: 调整 amis-editor 样式 (#11472)
Browse files Browse the repository at this point in the history
  • Loading branch information
@2betop
2betop authored Jan 9, 2025
1 parent 7811d19 commit 3c08638
Show file tree
Hide file tree
Showing 21 changed files with 315 additions and 194 deletions.
3 changes: 2 additions & 1 deletion packages/amis-core/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,13 +259,14 @@ export {

export function render(
schema: Schema,
props: RootRenderProps = {},
{key, ...props}: RootRenderProps = {},
options: RenderOptions = {},
pathPrefix: string = ''
): JSX.Element {
return (
<AMISRenderer
{...props}
key={key}
schema={schema}
pathPrefix={pathPrefix}
options={options}
Expand Down
256 changes: 128 additions & 128 deletions packages/amis-editor-core/scss/_rightPanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,11 @@ $tooltip-bottom: '[data-tooltip][data-position=' bottom ']:hover:after';

@include panel-sm-content();

.ae-Settings-content {
padding: var(--gap-base);
#{$tooltip-bottom} {
margin-left: -10px;
animation-name: none;
}

.ae-Combo-item > div:first-child > #{$tooltip-bottom} {
margin-left: 15px;
}
}

// 宽度可拖拽时不增加过渡，避免卡顿
&.width-draggable {
transition: none;
}

// 用于避免右侧配置面板被超长的valueLabel撑开，导致样式异常
.#{$ns}SubForm-valueLabel {
word-break: break-all;
Expand Down Expand Up @@ -239,7 +227,7 @@ $tooltip-bottom: '[data-tooltip][data-position=' bottom ']:hover:after';
}

// 属性配置表单面板
.config-form-content {
.ae-Settings-content {
position: relative;
height: 100%;
padding: 10px 12px;
Expand Down Expand Up @@ -271,120 +259,6 @@ $tooltip-bottom: '[data-tooltip][data-position=' bottom ']:hover:after';
}
}

// 内层tabs
.editor-prop-config-tabs {
display: block;
position: relative;
height: 100%;
padding: 0;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
margin: calc(0rem - (var(--gap-base)));

.old-action-tooltip-warpper {
position: absolute;
left: 12px;
top: px2rem(15px);
width: 91%;
z-index: 9999;
// 老动作入口
.old-action-btn {
width: 100%;
}
}

// tab导航
ul[role='tablist'],
&-links {
margin: 0;
flex: 0;
border-bottom: 1px solid #d4d6d9;
display: flex;
justify-content: space-between;
z-index: 1; // 防止被panel body中的部分组件覆盖border

> li {
flex: 1;
display: flex;
height: $category-1-height;
justify-content: center;
border: 0 !important;
padding: 0 !important;
max-width: none;
align-items: stretch;
padding: 0 !important;

> a {
display: inline-block;
height: 100%;
width: 100%;
text-align: center;
padding: 2px 0 0 0 !important;
font-family: PingFangSC-Regular;
color: #84868c;
width: 100%;
--Tabs--line-active-fontSize: 14px;
--Tabs--line-fontSize: 14px;
--Tabs--line-hover-fontSize: 14px;
--Tabs--line-disabled-fontSize: 14px;
letter-spacing: 0;
font-weight: 400;
text-decoration: none;
border: none !important;
border-bottom: 2px solid #fff !important;
box-sizing: border-box;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}

&.is-active > a {
color: $Editor-theme-color !important;
border-bottom: 2px solid $editor-active-color !important;
}

&:not(:last-child):after {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 1px;
height: 12px;
background-color: #d8d8d8;
}

&:not(:last-child):after {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 1px;
height: 12px;
background-color: #d8d8d8;
}
}
}

// tab内容
&-cont {
height: calc(100% - 45px);
position: absolute;
width: 100%;
padding: 0;
overflow-y: overlay !important;
@include minScrollBar();
margin-top: -1px;
}

div.ae-switch-more-flex {
display: flex;
line-height: 25px;
}
}

// 右侧面板收起箭头
.right-panel-arrow {
position: absolute;
Expand Down Expand Up @@ -507,3 +381,129 @@ $tooltip-bottom: '[data-tooltip][data-position=' bottom ']:hover:after';
}
}
}

.ae-Settings-content {
padding: var(--gap-base);
#{$tooltip-bottom} {
margin-left: -10px;
animation-name: none;
}

.ae-Combo-item > div:first-child > #{$tooltip-bottom} {
margin-left: 15px;
}

// 内层tabs
.editor-prop-config-tabs {
display: block;
position: relative;
height: 100%;
padding: 0;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
margin: calc(0rem - (var(--gap-base)));

.old-action-tooltip-warpper {
position: absolute;
left: 12px;
top: px2rem(15px);
width: 91%;
z-index: 9999;
// 老动作入口
.old-action-btn {
width: 100%;
}
}

// tab导航
ul[role='tablist'],
&-links {
margin: 0;
flex: 0;
border-bottom: 1px solid #d4d6d9;
display: flex;
justify-content: space-between;
z-index: 1; // 防止被panel body中的部分组件覆盖border

> li {
flex: 1;
display: flex;
height: $category-1-height;
justify-content: center;
border: 0 !important;
padding: 0 !important;
max-width: none;
align-items: stretch;
padding: 0 !important;

> a {
display: inline-block;
height: 100%;
width: 100%;
text-align: center;
padding: 2px 0 0 0 !important;
font-family: PingFangSC-Regular;
color: #84868c;
width: 100%;
--Tabs--line-active-fontSize: 14px;
--Tabs--line-fontSize: 14px;
--Tabs--line-hover-fontSize: 14px;
--Tabs--line-disabled-fontSize: 14px;
letter-spacing: 0;
font-weight: 400;
text-decoration: none;
border: none !important;
border-bottom: 2px solid #fff !important;
box-sizing: border-box;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}

&.is-active > a {
color: $Editor-theme-color !important;
border-bottom: 2px solid $editor-active-color !important;
}

&:not(:last-child):after {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 1px;
height: 12px;
background-color: #d8d8d8;
}

&:not(:last-child):after {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 1px;
height: 12px;
background-color: #d8d8d8;
}
}
}

// tab内容
&-cont {
height: calc(100% - 45px);
position: absolute;
width: 100%;
padding: 0;
overflow-y: overlay !important;
@include minScrollBar();
margin-top: -1px;
}

div.ae-switch-more-flex {
display: flex;
line-height: 25px;
}
}
}
7 changes: 4 additions & 3 deletions packages/amis-editor-core/scss/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@
.ae-Preview-inner {
position: relative;
// display: flex;
min-height: calc(100% - 40px);
min-height: calc(100% - 16px);
background: #fff;
box-shadow: 0 2px 6px 0 rgba(211, 211, 211, 0.5);
border-radius: 4px;
Expand Down Expand Up @@ -418,9 +418,10 @@
.ae-PreviewIFrame {
pointer-events: all !important;
border: 0 !important;
min-height: 100%;
// min-height: 100%;
width: 100%;
height: auto !important;
// height: auto !important;
min-height: calc(100% - 46px);
}

.ae-IFramePreview {
Expand Down
24 changes: 20 additions & 4 deletions packages/amis-editor-core/src/component/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import type {SchemaObject} from 'amis';
import type {VariableGroup, VariableOptions} from '../variable';
import type {EditorNodeType} from '../store/node';
import {MobileDevTool} from 'amis-ui';
import {LeftPanelsProps} from './Panel/LeftPanels';
import {RightPanelsProps} from './Panel/RightPanels';

export interface EditorProps extends PluginEventListener {
value: SchemaObject;
Expand Down Expand Up @@ -149,6 +151,14 @@ export interface EditorProps extends PluginEventListener {
onEditorUnmount?: (manager: EditorManager) => void;

children?: React.ReactNode | ((manager: EditorManager) => React.ReactNode);

LeftPanelsComponent?: React.ComponentType<LeftPanelsProps>;
RightPanelsComponent?: React.ComponentType<RightPanelsProps>;

/**
* 富文本编辑器配置, 用于内联编辑
*/
richTextOptions?: any;
}

export default class Editor extends Component<EditorProps> {
Expand Down Expand Up @@ -616,8 +626,12 @@ export default class Editor extends Component<EditorProps> {
isSubEditor,
amisEnv,
readonly,
children
children,
LeftPanelsComponent,
RightPanelsComponent
} = this.props;
const FinalLeftPanels = LeftPanelsComponent ?? LeftPanels;
const FinalRightPanels = RightPanelsComponent ?? RightPanels;

return (
<div
Expand All @@ -638,7 +652,7 @@ export default class Editor extends Component<EditorProps> {
onContextMenu={this.handleContextMenu}
>
{!preview && !readonly && (
<LeftPanels
<FinalLeftPanels
store={this.store}
manager={this.manager}
theme={theme}
Expand All @@ -658,7 +672,9 @@ export default class Editor extends Component<EditorProps> {
{isMobile && (
<MobileDevTool
container={this.mainPreviewRef.current}
previewBody={this.mainPreviewBodyRef.current?.currentDom}
previewBody={
this.mainPreviewBodyRef.current?.currentDom?.current
}
onChangeScale={scale => {
if (scale >= 0) {
this.store.setScale(scale / 100);
Expand All @@ -684,7 +700,7 @@ export default class Editor extends Component<EditorProps> {
</div>

{!preview && (
<RightPanels
<FinalRightPanels
store={this.store}
manager={this.manager}
theme={theme}
Expand Down
Loading

0 comments on commit 3c08638

Please sign in to comment.