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

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

@@ -21,15 +21,27 @@
 
     & > .ele-tab-bar {
       flex-shrink: 0;
-      padding: 0 12px;
+      padding: 0 16px;
+
+      .ele-tab-item + .ele-tab-item {
+        margin-left: 22px;
+      }
     }
 
     & > .ele-pro-form-builder-tab-body {
       flex: 1;
-      overflow: auto;
+      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;
   }
@@ -62,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 {
@@ -114,6 +143,7 @@
 
 /* 屏幕尺寸切换图标 */
 .ele-pro-form-builder-screen-radio {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   padding: 0 8px;
@@ -136,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;
@@ -150,6 +174,7 @@
 
 /* 顶栏左侧操作按钮 */
 .ele-pro-form-builder-header-left {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   padding: 0 0 0 8px;
@@ -170,6 +195,7 @@
 
 /* 顶栏右侧操作按钮 */
 .ele-pro-form-builder-header-tools {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   margin: 0 0 0 auto;
@@ -177,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;
 
@@ -193,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;
@@ -200,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%;
   }
 
@@ -209,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;
 
@@ -220,27 +270,46 @@
 
   /* 新拖进来的组件 */
   .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%;
   box-sizing: border-box;
   overflow: auto;
@@ -248,9 +317,10 @@
 
 .ele-pro-form-builder-component-group-label {
   font-size: 12px;
-  font-weight: 600;
+  font-weight: bold;
   color: elVar('color-primary');
-  background: elVar('bg-color');
+  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;
@@ -283,7 +353,6 @@
 /* 组件卡片 */
 .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;
@@ -304,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 {
@@ -325,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 {
@@ -353,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;
 }
 
@@ -372,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 {
@@ -511,7 +580,7 @@
 }
 
 .ele-pro-form-builder-outline-item > .ele-pro-form-builder-outline {
-  padding-left: 12px;
+  padding-left: 10px;
   padding-right: 6px;
 
   &:empty {
@@ -626,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,10 +727,9 @@
 /* 属性设置表单 */
 .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;
@@ -671,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;
@@ -686,7 +757,7 @@
     top: 50%;
     width: 4px;
     height: 12px;
-    margin-top: -5px;
+    margin-top: -4px;
     background: elVar('color-primary');
     border-radius: 2px;
   }
@@ -695,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;
@@ -720,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;
@@ -740,17 +832,109 @@
   }
 }
 
-/* 预览表单 */
-.ele-pro-form-builder-preview-form {
-  min-height: 520px;
-  box-sizing: border-box;
-}
-
 /* 添加子级时组件选择 */
 .ele-pro-form-builder-component-picker .ele-pro-form-builder-component-list {
   gap: 10px;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  padding: 6px 12px 8px 12px;
+}
+
+/* 生成代码弹窗 */
+.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;
 }
 
 /* 子级编辑列表 */
@@ -920,8 +1104,15 @@
   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;
+    }
   }
 }
 
@@ -929,6 +1120,10 @@
   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);
@@ -948,34 +1143,75 @@
 }
 
 /* 数据代码编辑框 */
-.ele-pro-form-builder-options-tabs {
+.ele-pro-form-builder-options-tabs.ele-tab-bar {
   flex-shrink: 0;
+  overflow: visible;
+
+  & > .ele-tab-nav {
+    overflow: visible;
+  }
+
+  .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-pro-form-builder-code-edit-tip {
+      top: -8px;
+      left: -128px;
+    }
+  }
 }
 
 /* 事件代码编辑框 */
 .ele-pro-form-builder-code-edit-wrapper {
   flex: 1;
   height: 100%;
-  display: flex;
-  flex-direction: column;
   box-sizing: border-box;
   overflow: hidden;
 }
 
 .ele-pro-form-builder-code-edit-header {
-  flex-shrink: 0;
-  font-size: 14px;
-  color: #608b4e;
-  background: #1e1e1e;
-  padding: 6px 10px 0 10px;
-  font-family: Consolas, 'Courier New', monospace;
-  box-sizing: border-box;
-  white-space: pre-wrap;
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 
-.ele-pro-form-builder-code-edit-body {
-  flex: 1;
-  overflow: hidden;
+.ele-pro-form-builder-code-edit-icon {
+  color: elVar('text-color', 'secondary');
+  margin-left: 8px;
+  position: static;
+  cursor: text;
+
+  .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;
+  }
+
+  &:not(:hover) .ele-pro-form-builder-code-edit-tip {
+    opacity: 0;
+    visibility: hidden;
+  }
 }
 
 /* 源码编辑框 */