ele-admin-plus 1.3.1-beta.1 → 1.4.0-beta.1

package/es/ele-pro-form-builder/style/index.scss

@@ -15,6 +15,33 @@
     overflow: hidden;
   }
 
+  & > .ele-split-panel-wrap > .ele-split-panel-side {
+    display: flex;
+    flex-direction: column;
+
+    & > .ele-tab-bar {
+      flex-shrink: 0;
+      padding: 0 16px;
+
+      .ele-tab-item + .ele-tab-item {
+        margin-left: 22px;
+      }
+    }
+
+    & > .ele-pro-form-builder-tab-body {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      position: relative;
+    }
+  }
+
+  &.is-responsive > .ele-split-panel-wrap > div.ele-split-panel-side {
+    background: none;
+  }
+
   & > .ele-split-collapse-button {
     z-index: 99;
   }
@@ -40,23 +67,6 @@
   }
 }
 
-/* 侧栏 */
-.ele-pro-form-builder-left-wrapper,
-.ele-pro-form-builder-right-wrapper {
-  height: 100%;
-
-  & > .el-tabs__header {
-    & > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav {
-      padding-left: 12px;
-      user-select: none;
-    }
-  }
-
-  & > .el-tabs__content > .el-tab-pane {
-    position: relative;
-  }
-}
-
 /* 主体 */
 .ele-pro-form-builder-body-wrapper {
   height: 100%;
@@ -64,49 +74,66 @@
   flex-direction: column;
 }
 
-.ele-pro-form-builder-header {
-  flex-shrink: 0;
-  height: 40px;
-  border-bottom: 1px solid elVar('border-color', 'light');
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  overflow: auto;
-}
-
 .ele-pro-form-builder-body {
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 18px;
+  padding: 12px;
+  max-width: 100%;
   box-sizing: border-box;
   position: relative;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.ele-pro-form-builder-body.is-pad > .ele-pro-form-builder-body-form,
-.ele-pro-form-builder-body.is-phone > .ele-pro-form-builder-body-form,
-.ele-pro-form-builder-preview-form.is-pad,
-.ele-pro-form-builder-preview-form.is-phone {
-  border-radius: 6px;
-  border: 1px solid transparent;
+.ele-pro-form-builder-preview.ele-modal-body {
+  padding: 12px;
+  max-width: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  height: calc(100vh - 120px);
+  height: calc(100dvh - 120px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.ele-pro-form-builder-body.is-pad,
+.ele-pro-form-builder-body.is-phone,
+.ele-pro-form-builder-preview.is-pad,
+.ele-pro-form-builder-preview.is-phone {
+  width: 796px;
+  padding: 2px;
   outline: 6px solid #3c3c3c;
-  max-width: 768px;
+  outline-offset: -12px;
+  border: 12px solid transparent;
+  border-radius: 18px;
   margin: 0 auto;
 }
 
-.ele-pro-form-builder-body.is-phone > .ele-pro-form-builder-body-form,
-.ele-pro-form-builder-preview-form.is-phone {
-  max-width: 390px;
+.ele-pro-form-builder-body.is-phone,
+.ele-pro-form-builder-preview.is-phone {
+  width: 418px;
+}
+
+/* 顶栏 */
+.ele-pro-form-builder-header {
+  flex-shrink: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid elVar('border-color', 'light');
+  box-sizing: border-box;
+  overflow: auto;
 }
 
-/* 顶栏操作图标按钮 */
 .ele-pro-form-builder-header-tool {
+  flex-shrink: 0;
   width: 28px;
   height: 28px;
   font-size: 16px;
   border-radius: elVar('border-radius', 'small');
   transition: all $transition-base;
+  user-select: none;
   cursor: pointer;
 
   &:hover {
@@ -116,6 +143,7 @@
 
 /* 屏幕尺寸切换图标 */
 .ele-pro-form-builder-screen-radio {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   padding: 0 8px;
@@ -138,12 +166,6 @@
   transform: translateY(-50%);
 }
 
-@media screen and (max-width: 992px) {
-  .ele-pro-form-builder-header > .ele-pro-form-builder-screen-radio {
-    display: none;
-  }
-}
-
 .ele-modal-header > .ele-modal-title > .ele-pro-form-builder-screen-radio {
   margin-top: -6px;
   margin-bottom: -6px;
@@ -152,6 +174,7 @@
 
 /* 顶栏左侧操作按钮 */
 .ele-pro-form-builder-header-left {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   padding: 0 0 0 8px;
@@ -172,6 +195,7 @@
 
 /* 顶栏右侧操作按钮 */
 .ele-pro-form-builder-header-tools {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   margin: 0 0 0 auto;
@@ -179,12 +203,17 @@
   box-sizing: border-box;
 
   .el-button {
+    flex-shrink: 0;
     height: 28px;
     line-height: 28px;
     font-size: 13px;
     padding: 0 6px 0 7px;
     margin: 0 0 0 4px;
 
+    &:not(.is-text) {
+      padding: 0 8px 0 6px;
+    }
+
     & > .el-icon {
       font-size: 12px;
 
@@ -195,6 +224,25 @@
   }
 }
 
+@media screen and (max-width: 992px) {
+  .ele-pro-form-builder-header > .ele-pro-form-builder-screen-radio {
+    display: none;
+  }
+
+  .ele-pro-form-builder-header-tools .el-button {
+    padding: 0 4px 0 5px;
+    margin: 0 0 0 2px;
+
+    &:not(.is-text) {
+      padding: 0 6px 0 4px;
+    }
+
+    & > .el-icon + span {
+      margin-left: 2px;
+    }
+  }
+}
+
 /* 构建表单 */
 .ele-pro-form-builder-body-form {
   flex: auto;
@@ -202,7 +250,8 @@
   box-sizing: border-box;
   user-select: none;
 
-  & > .ele-pro-form-builder-container-wrapper {
+  & > .ele-pro-form-builder-container-wrapper,
+  & > .ele-pro-form-builder-grid-container-wrapper {
     min-height: 100%;
   }
 
@@ -211,7 +260,6 @@
     width: 20px;
     height: 20px;
     line-height: 20px;
-    border-radius: 4px;
     box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.6);
     padding: 0;
 
@@ -222,44 +270,63 @@
 
   /* 新拖进来的组件 */
   .ele-pro-form-builder-component-item {
-    height: 4px !important;
+    height: 0px !important;
     padding: 0 !important;
     border: none !important;
     border-radius: 0 !important;
-    background: var(--el-color-primary) !important;
+    overflow: visible !important;
     position: relative !important;
     z-index: 9 !important;
 
     * {
       display: none !important;
     }
+
+    &::before {
+      content: '';
+      display: block !important;
+      position: absolute;
+      top: -2px;
+      left: 0;
+      height: 5px;
+      width: 100%;
+      background: elVar('color-primary');
+    }
   }
-}
 
-/* 表格更多操作下拉菜单 */
-.ele-pro-form-builder-table-tool-dropdown.ele-dropdown.ele-popper.ele-popover {
-  min-width: 128px;
+  .el-row > .ele-pro-form-builder-component-item {
+    width: 0px !important;
+    height: auto !important;
+
+    &::before {
+      top: 0;
+      left: -2px;
+      height: 100%;
+      width: 7px;
+    }
+  }
 }
 
 /* 组件库列表 */
 .ele-pro-form-builder-component-wrapper {
+  flex: 1;
   height: 100%;
-  padding: 2px 0;
   box-sizing: border-box;
   overflow: auto;
 }
 
 .ele-pro-form-builder-component-group-label {
   font-size: 12px;
-  font-weight: 600;
+  font-weight: bold;
   color: elVar('color-primary');
-  background: elVar('bg-color');
-  padding: 8px 0 4px 20px;
+  background: eleVar('pro-form-builder', 'group-label-bg');
+  backdrop-filter: eleVar('pro-form-builder', 'group-label-backdrop-filter');
+  padding: 10px 0 4px 20px;
   box-sizing: border-box;
   user-select: none;
   cursor: pointer;
   position: sticky;
-  top: -2px;
+  top: 0;
   z-index: 9;
 
   &::after {
@@ -269,7 +336,7 @@
     top: 50%;
     width: 4px;
     height: 12px;
-    margin-top: -4px;
+    margin-top: -3px;
     background: elVar('color-primary');
     border-radius: 2px;
   }
@@ -279,14 +346,13 @@
   display: grid;
   gap: 8px;
   grid-template-columns: repeat(2, 1fr);
-  padding: 6px 10px 8px 10px;
+  padding: 6px 10px 10px 10px;
   box-sizing: border-box;
 }
 
 /* 组件卡片 */
 .ele-pro-form-builder-component-item {
   padding: 2px 6px;
-  background: elVar('bg-color');
   border: 1px solid elVar('border-color');
   border-radius: elVar('border-radius', 'base');
   outline: 2px solid transparent;
@@ -307,6 +373,15 @@
   * {
     pointer-events: none !important;
   }
+
+  &.sortable-fallback {
+    transition: none;
+  }
+
+  &.is-selected {
+    border-color: transparent;
+    outline-color: elVar('color-primary');
+  }
 }
 
 .ele-pro-form-builder-component-item-label {
@@ -328,8 +403,10 @@
 
 /* 模板卡片 */
 .ele-pro-form-builder-template-wrapper {
+  flex: 1;
   padding: 12px;
   box-sizing: border-box;
+  overflow: auto;
 }
 
 .ele-pro-form-builder-template-item {
@@ -356,8 +433,8 @@
 }
 
 .ele-pro-form-builder-template-item-label {
-  padding: 10px 10px 4px 10px;
   font-size: 13px;
+  padding: 10px 10px 4px 10px;
   box-sizing: border-box;
 }
 
@@ -375,22 +452,11 @@
 }
 
 /* 大纲列表 */
-.ele-pro-form-builder-outline-wrapper {
-  height: 100%;
-  padding: 6px 12px;
-  box-sizing: border-box;
-  user-select: none;
-  overflow: auto;
-
-  & > .ele-pro-form-builder-outline {
-    min-height: 100%;
-  }
-}
-
 .ele-pro-form-builder-outline {
   padding: 6px 0;
   box-sizing: border-box;
   position: relative;
+  user-select: none;
 }
 
 .ele-pro-form-builder-outline-item {
@@ -514,7 +580,7 @@
 }
 
 .ele-pro-form-builder-outline-item > .ele-pro-form-builder-outline {
-  padding-left: 12px;
+  padding-left: 10px;
   padding-right: 6px;
 
   &:empty {
@@ -629,7 +695,11 @@
   }
 }
 
-.ele-pro-form-builder-outline-wrapper {
+.ele-pro-form-builder-tab-body > .ele-pro-form-builder-outline {
+  flex: 1;
+  overflow: auto;
+  padding: 10px;
+
   &:has(.ele-pro-form-builder-outline-item.sortable-ghost) {
     cursor: move;
 
@@ -654,44 +724,12 @@
   }
 }
 
-.ele-pro-form-builder-outline-component-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column-reverse;
-  background: rgba(158, 158, 158, 0.2);
-  backdrop-filter: blur(2px);
-  transition: opacity $transition-base;
-  overflow: hidden;
-  cursor: pointer;
-  z-index: 9;
-
-  & > .ele-pro-form-builder-component-wrapper {
-    height: 88%;
-    background: elVar('bg-color');
-    transition: all $transition-base;
-  }
-}
-
-.ele-pro-form-builder-outline-component-anim-enter-active,
-.ele-pro-form-builder-outline-component-anim-leave-active {
-  opacity: 0;
-
-  & > .ele-pro-form-builder-component-wrapper {
-    transform: translateY(100%);
-  }
-}
-
 /* 属性设置表单 */
 .ele-pro-form-builder-props-form {
   flex: 1;
-  height: 100%;
-  padding: 8px 10px 8px 10px;
-  box-sizing: border-box;
   overflow: auto;
+  padding: 0 10px;
+  box-sizing: border-box;
 
   .el-form-item {
     margin-bottom: 12px;
@@ -705,10 +743,9 @@
 
 .ele-pro-form-builder-props-group-label.ele-text {
   font-size: 12px;
-  font-weight: 600;
+  font-weight: bold;
   color: elVar('color-primary');
-  margin: 0 0 4px 0;
-  padding: 2px 0 0 10px;
+  padding: 10px 0 6px 10px;
   box-sizing: border-box;
   position: relative;
   user-select: none;
@@ -720,7 +757,7 @@
     top: 50%;
     width: 4px;
     height: 12px;
-    margin-top: -5px;
+    margin-top: -4px;
     background: elVar('color-primary');
     border-radius: 2px;
   }
@@ -729,8 +766,8 @@
 .ele-pro-form-builder-props-options-check-card {
   width: 100%;
   display: grid;
-  gap: 6px 8px;
   grid-template-columns: repeat(3, 1fr);
+  gap: 6px 8px;
 
   .ele-check-card {
     font-size: 12px;
@@ -754,6 +791,27 @@
   }
 }
 
+.ele-pro-form-builder-props-fluid-btn.el-button {
+  width: 100%;
+  font-weight: normal;
+  border-style: dashed;
+
+  &.is-small-icon > .el-icon {
+    transform: scale(0.9);
+    transform-origin: 0 0;
+  }
+}
+
+.ele-pro-form-builder-type-select-btn > span {
+  width: 100%;
+  box-sizing: border-box;
+
+  & > span {
+    flex: 1;
+    text-align: left;
+  }
+}
+
 /* 空视图 */
 .ele-pro-form-builder-form-empty.el-empty {
   padding: 0;
@@ -774,6 +832,111 @@
   }
 }
 
+/* 添加子级时组件选择 */
+.ele-pro-form-builder-component-picker .ele-pro-form-builder-component-list {
+  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+}
+
+/* 生成代码弹窗 */
+.ele-pro-form-builder-code-preview .ele-modal-body {
+  padding: 6px;
+  max-height: 100%;
+  min-height: 100%;
+  height: calc(100vh - 120px);
+  height: calc(100dvh - 120px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ele-pro-form-builder-code-view {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border: 1px solid #000;
+  background: #1e1e1e;
+  border-radius: elVar('border-radius', 'base');
+
+  & > .ele-tab-bar {
+    flex-shrink: 0;
+    padding: 0 12px;
+    #{eleVarName('tab-bar', 'color')}: #e6edf3;
+    #{eleVarName('tab-bar', 'height')}: 32px;
+
+    .ele-tab-item {
+      font-weight: bold;
+      font-family: monospace;
+    }
+
+    &::before {
+      border-color: #000;
+    }
+  }
+}
+
+.ele-pro-form-builder-code-body {
+  flex: 1;
+  overflow: auto;
+  color: #e6edf3;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  #{eleVarName('scrollbar', 'color')}: #5e5e5e;
+  #{eleVarName('scrollbar', 'hover-color')}: #707070;
+}
+
+.ele-pro-form-builder-code-pre {
+  flex: 1;
+  margin: 0;
+  padding: 12px;
+  box-sizing: border-box;
+  font-family: monospace;
+}
+
+.ele-pro-form-builder-code-line-numbers {
+  flex-shrink: 0;
+  color: #8b949e;
+  font-family: monospace;
+  padding: 12px 0;
+  min-width: 38px;
+  background: #1e1e1e;
+  border-right: 1px solid #000;
+  box-sizing: border-box;
+  text-align: center;
+  user-select: none;
+  position: sticky;
+  left: 0;
+}
+
+.ele-pro-form-builder-code-icon-tool {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  color: #d6dde3;
+  background: #424242;
+  margin-left: 8px;
+  border-radius: elVar('border-radius', 'small');
+  box-sizing: border-box;
+  transition: background-color $transition-slow;
+  cursor: pointer;
+
+  &:hover {
+    background: #4f4f4f;
+  }
+
+  &.is-copied {
+    color: elVar('color-success');
+  }
+}
+
+/* 表格更多操作下拉菜单 */
+.ele-pro-form-builder-table-tool-dropdown.ele-dropdown.ele-popper.ele-popover {
+  min-width: 128px;
+}
+
 /* 子级编辑列表 */
 .ele-pro-form-builder-children-edit-list {
   width: 100%;
@@ -902,149 +1065,65 @@
   }
 }
 
-/* 预览表单 */
-.ele-pro-form-builder-preview-form {
-  min-height: 480px;
-  box-sizing: border-box;
-}
-
-/* 树形数据编辑表格 TODO */
-table.ele-table.ele-pro-form-builder-tree-table {
-  table-layout: fixed;
-
-  & > tbody > tr > td {
-    padding: 5px 8px;
-
-    &.is-tree-index {
-      padding: 8px 0;
-      vertical-align: top;
-      white-space: nowrap;
-      text-align: center;
-    }
-  }
-
-  & > thead > tr > th {
-    padding: 8px 10px;
-  }
-
-  &.is-border {
-    border: none;
-    --ele-table-radius: 0;
-
-    & > thead > tr > th {
-      border-top-width: 1px;
-    }
-
-    & > thead > tr > th,
-    & > tbody > tr > td {
-      border-right-width: 0;
-      border-left-width: 1px;
-
-      &:last-child {
-        border-right-width: 1px;
-      }
-    }
-  }
-
-  & > tbody > tr.is-empty-tr td {
-    background: none;
-    text-align: center;
-    padding: 9px 8px;
-  }
-}
-
-/* 选项数据编辑表格 */
-.ele-pro-form-builder-options-edit-wrapper {
-  position: relative;
+/* 数据编辑表格 */
+.ele-pro-form-builder-options-editer {
+  flex: 1;
+  margin-top: 8px;
 
-  &::before {
-    content: '';
-    border-left: 1px solid var(--el-border-color-light);
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
+  & > .ele-tree-table {
+    height: 100%;
   }
 
-  &::after {
-    content: '';
-    border-right: 1px solid var(--el-border-color-light);
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
+  .ele-tree-table-cells > .ele-tree-table-cell {
+    padding: 6px 8px;
   }
-}
-
-.ele-pro-form-builder-options-edit-table-wrapper {
-  font-size: 0;
-  max-height: calc(100vh - 268px);
-  box-sizing: border-box;
-  position: static;
-  overflow: auto;
 
-  &::before {
-    content: '';
-    border-top: 1px solid var(--el-border-color-light);
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
+  .ele-tree-table-cell.is-tree-index {
+    padding: 10px 0 0 0;
   }
 
-  &::after {
-    content: '';
-    border-bottom: 1px solid var(--el-border-color-light);
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
+  .ele-tree-table-header > .ele-tree-table-row > .ele-tree-table-cell {
+    padding-left: 0;
+    padding-right: 0;
+    white-space: nowrap;
+    word-break: break-all;
   }
-}
-
-.ele-pro-form-builder-options-edit-table {
-  display: inline-block;
-
-  & > .ele-pro-form-builder-tree-table {
-    width: 100%;
 
-    & > thead {
-      position: sticky;
-      top: 0;
-      z-index: 99;
-
-      & > tr > th .el-input__inner {
-        font-weight: bold;
-      }
-    }
-
-    & > thead > tr > th.is-action-col,
-    & > tbody > tr > td.is-action-col {
-      position: sticky;
-      right: 0;
-      z-index: 97;
-
-      &:hover {
-        z-index: 98;
-      }
+  &.is-table-data {
+    .ele-tree-table-header > .ele-tree-table-row > .ele-tree-table-cell {
+      padding-left: 6px;
+      padding-right: 6px;
+      overflow: visible;
     }
   }
 }
 
-.ele-pro-form-builder-options-edit-actions {
+.ele-pro-form-builder-options-edit-cell {
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  .ele-pro-form-builder-tool-button + .ele-pro-form-builder-tool-button {
-    margin-left: 6px;
+  .ele-pro-form-builder-tool-button {
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0;
+
+    & + .ele-pro-form-builder-tool-button {
+      margin-left: 6px;
+    }
   }
 }
 
-.ele-pro-form-builder-options-edit-th-cell {
+.ele-pro-form-builder-options-edit-th {
   position: relative;
 
   .ele-pro-form-builder-tool-button {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0;
     position: absolute;
     top: 50%;
     right: calc(100% - 10px);
@@ -1057,106 +1136,98 @@ table.ele-table.ele-pro-form-builder-tree-table {
     opacity: 0;
     visibility: hidden;
   }
-}
 
-/* 边框色辅助类 */
-.ele-icon-border-color-base {
-  border-color: elVar('border-color');
-}
-
-.ele-icon-border-color-light {
-  border-color: elVar('border-color', 'light');
-}
-
-.ele-icon-border-color-primary {
-  border-color: elVar('color-primary');
-}
-
-.ele-icon-border-color-primary5 {
-  border-color: elVar('color-primary', 'light-5');
-}
-
-.ele-icon-border-color-text {
-  border-color: elVar('text-color', 'primary');
-}
-
-.ele-icon-border-color-text-light {
-  border-color: elVar('text-color', 'placeholder');
-}
-
-/* 背景色辅助类 */
-.ele-icon-bg-primary {
-  background: elVar('color-primary');
-}
-
-.ele-icon-bg-primary7 {
-  background: elVar('color-primary', 'light-7');
-}
-
-.ele-icon-bg-primary9 {
-  background: elVar('color-primary', 'light-9');
-}
-
-.ele-icon-bg-base {
-  background: elVar('bg-color');
-}
-
-.ele-icon-bg-fill {
-  background: elVar('fill-color');
+  .el-input .el-input__wrapper .el-input__inner {
+    font-weight: bold;
+  }
 }
 
-.ele-icon-bg-fill-light {
-  background: elVar('border-color', 'light');
-}
+/* 数据代码编辑框 */
+.ele-pro-form-builder-options-tabs.ele-tab-bar {
+  flex-shrink: 0;
+  overflow: visible;
 
-.ele-icon-bg-fill-lighter {
-  background: elVar('fill-color', 'light');
-}
+  & > .ele-tab-nav {
+    overflow: visible;
+  }
 
-.ele-icon-bg-fill-dark {
-  background: elVar('border-color');
-}
+  .ele-pro-form-builder-code-edit-icon {
+    position: absolute;
+    right: -22px;
+    top: 50%;
+    margin: -7px 0 0 0;
+    font-size: 14px;
+    z-index: 9;
 
-.ele-icon-bg-white {
-  background: #fff;
+    .ele-pro-form-builder-code-edit-tip {
+      top: -8px;
+      left: -128px;
+    }
+  }
 }
 
-.ele-icon-bg-calendar {
-  background-image: radial-gradient(
-    elVar('border-color', 'light') 50%,
-    transparent 50%
-  );
+/* 事件代码编辑框 */
+.ele-pro-form-builder-code-edit-wrapper {
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
-/* 文字色辅助类 */
-.ele-icon-color-base {
-  color: elVar('text-color', 'regular');
+.ele-pro-form-builder-code-edit-header {
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 
-.ele-icon-color-secondary {
+.ele-pro-form-builder-code-edit-icon {
   color: elVar('text-color', 'secondary');
-}
-
-.ele-icon-color-placeholder {
-  color: elVar('text-color', 'placeholder');
-}
-
-.ele-icon-color-light {
-  color: elVar('border-color');
-}
+  margin-left: 8px;
+  position: static;
+  cursor: text;
 
-.ele-icon-color-lighter {
-  color: elVar('border-color', 'light');
-}
+  .ele-pro-form-builder-code-edit-tip {
+    width: 420px;
+    max-width: calc(100vw - 32px);
+    font-size: 14px;
+    line-height: 18px;
+    color: #608b4e;
+    background: #1e1e1e;
+    font-family: Consolas, 'Courier New', monospace;
+    padding: 8px;
+    border-radius: elVar('border-radius', 'small');
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-sizing: border-box;
+    white-space: pre-wrap;
+    user-select: text;
+    cursor: text;
+    transition: all $transition-base;
+    position: absolute;
+    top: 2px;
+    left: 6px;
+    z-index: 9;
+  }
 
-.ele-icon-color-primary {
-  color: elVar('color-primary');
+  &:not(:hover) .ele-pro-form-builder-code-edit-tip {
+    opacity: 0;
+    visibility: hidden;
+  }
 }
 
-.ele-icon-color-primary5 {
-  color: elVar('color-primary', 'light-5');
-}
+/* 源码编辑框 */
+.ele-pro-form-builder-code-editer.el-textarea {
+  height: 100%;
+  display: block;
 
-.ele-icon-color-success {
-  color: elVar('color-success');
+  & > .el-textarea__inner {
+    height: 100%;
+    font-size: 14px;
+    color: #d4d4d4;
+    background: #1e1e1e;
+    font-family: Consolas, 'Courier New', monospace;
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+    resize: none;
+  }
 }