ele-admin-plus 1.3.0-beta.2 → 1.3.0-beta.3

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

@@ -15,6 +15,21 @@
     overflow: hidden;
   }
 
+  & > .ele-split-panel-wrap > .ele-split-panel-side {
+    display: flex;
+    flex-direction: column;
+
+    & > .ele-tab-bar {
+      flex-shrink: 0;
+      padding: 0 12px;
+    }
+
+    & > .ele-pro-form-builder-tab-body {
+      flex: 1;
+      overflow: auto;
+    }
+  }
+
   & > .ele-split-collapse-button {
     z-index: 99;
   }
@@ -40,23 +55,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%;
@@ -244,7 +242,6 @@
 /* 组件库列表 */
 .ele-pro-form-builder-component-wrapper {
   height: 100%;
-  padding: 2px 0;
   box-sizing: border-box;
   overflow: auto;
 }
@@ -254,12 +251,12 @@
   font-weight: 600;
   color: elVar('color-primary');
   background: elVar('bg-color');
-  padding: 8px 0 4px 20px;
+  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 +266,7 @@
     top: 50%;
     width: 4px;
     height: 12px;
-    margin-top: -4px;
+    margin-top: -3px;
     background: elVar('color-primary');
     border-radius: 2px;
   }
@@ -279,7 +276,7 @@
   display: grid;
   gap: 8px;
   grid-template-columns: repeat(2, 1fr);
-  padding: 6px 10px 8px 10px;
+  padding: 6px 10px 10px 10px;
   box-sizing: border-box;
 }
 
@@ -654,37 +651,6 @@
   }
 }
 
-.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;
@@ -774,6 +740,19 @@
   }
 }
 
+/* 预览表单 */
+.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-children-edit-list {
   width: 100%;
@@ -902,136 +881,41 @@
   }
 }
 
-/* 预览表单 */
-.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;
+/* 数据编辑表格 */
+.ele-pro-form-builder-options-editer {
+  flex: 1;
+  margin-top: 8px;
 
-    &.is-tree-index {
-      padding: 8px 0;
-      vertical-align: top;
-      white-space: nowrap;
-      text-align: center;
-    }
+  & > .ele-tree-table {
+    height: 100%;
   }
 
-  & > thead > tr > th {
-    padding: 8px 10px;
+  .ele-tree-table-cells > .ele-tree-table-cell {
+    padding: 6px 8px;
   }
 
-  &.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;
-      }
-    }
+  .ele-tree-table-cell.is-tree-index {
+    padding: 10px 0 0 0;
   }
 
-  & > tbody > tr.is-empty-tr td {
-    background: none;
-    text-align: center;
-    padding: 9px 8px;
+  .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-wrapper {
-  position: relative;
-
-  &::before {
-    content: '';
-    border-left: 1px solid var(--el-border-color-light);
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &::after {
-    content: '';
-    border-right: 1px solid var(--el-border-color-light);
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-}
-
-.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;
-  }
-
-  &::after {
-    content: '';
-    border-bottom: 1px solid var(--el-border-color-light);
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-.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;
@@ -1041,7 +925,7 @@ table.ele-table.ele-pro-form-builder-tree-table {
   }
 }
 
-.ele-pro-form-builder-options-edit-th-cell {
+.ele-pro-form-builder-options-edit-th {
   position: relative;
 
   .ele-pro-form-builder-tool-button {
@@ -1057,106 +941,57 @@ 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');
-}
-
-.ele-icon-bg-fill-light {
-  background: elVar('border-color', 'light');
-}
-
-.ele-icon-bg-fill-lighter {
-  background: elVar('fill-color', 'light');
-}
-
-.ele-icon-bg-fill-dark {
-  background: elVar('border-color');
-}
-
-.ele-icon-bg-white {
-  background: #fff;
-}
-
-.ele-icon-bg-calendar {
-  background-image: radial-gradient(
-    elVar('border-color', 'light') 50%,
-    transparent 50%
-  );
-}
-
-/* 文字色辅助类 */
-.ele-icon-color-base {
-  color: elVar('text-color', 'regular');
-}
 
-.ele-icon-color-secondary {
-  color: elVar('text-color', 'secondary');
+  .el-input .el-input__wrapper .el-input__inner {
+    font-weight: bold;
+  }
 }
 
-.ele-icon-color-placeholder {
-  color: elVar('text-color', 'placeholder');
+/* 数据代码编辑框 */
+.ele-pro-form-builder-options-tabs {
+  flex-shrink: 0;
 }
 
-.ele-icon-color-light {
-  color: elVar('border-color');
+/* 事件代码编辑框 */
+.ele-pro-form-builder-code-edit-wrapper {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
-.ele-icon-color-lighter {
-  color: elVar('border-color', 'light');
+.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;
 }
 
-.ele-icon-color-primary {
-  color: elVar('color-primary');
+.ele-pro-form-builder-code-edit-body {
+  flex: 1;
+  overflow: 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;
+  }
 }

package/lib/ele-pro-form-builder/types.d.ts

@@ -1,17 +1,18 @@
-import type { CSSProperties } from 'vue';
-import type { ComponentProps } from '../ele-app/types';
+import type { ComponentProps, UserComponent } from '../ele-app/types';
+import type { ProFormItemKey, ProFormItemProps } from '../ele-pro-form/types';
 import type { ProFormProps } from '../ele-pro-form/props';
-import type {
-  ProFormItemKey,
-  ProFormItemProps,
-  ProFormItemOption
-} from '../ele-pro-form/types';
+import type { TreeTableColumn } from '../ele-tree-table/types';
 
 /**
  * 表单配置模板
  */
 export type TemplateFormConfig = ComponentProps<ProFormProps>;
 
+/**
+ * 表单除表单项外的配置数据
+ */
+export type TemplateFormProps = Omit<TemplateFormConfig, 'items'>;
+
 /**
  * 表单模板库模板
  */
@@ -19,9 +20,7 @@ export interface TemplateItem {
   /** 模板名称 */
   name: string;
   /** 模板缩略图 */
-  cover?: any;
-  /** 模板缩略图组件属性 */
-  coverProps?: Record<string, any>;
+  cover?: UserComponent;
   /** 模板数据 */
   config: TemplateFormConfig;
 }
@@ -35,7 +34,7 @@ export interface ComponentItem {
   /** 组件类型名称 */
   name: string;
   /** 组件类型缩略图 */
-  cover?: any;
+  cover?: UserComponent;
   /** 是否不显示在组件库列表中 */
   hide?: boolean;
   /** 组件原本的预设属性 */
@@ -46,9 +45,7 @@ export interface ComponentItem {
   initialProps: Record<string, any>;
   /** 组件的强制保留属性 */
   reservedProps: Record<string, any>;
-  /** 组件添加时的初始选项数据 */
-  initialOptions?: ProFormItemOption[];
-  /** 表单项属性配置的表单数据 */
+  /** 组件属性配置的表单配置数据 */
   configForm?: ProFormItemProps[];
   /** 生成 ElForm 代码时组件名称 */
   componentName: string;
@@ -65,25 +62,51 @@ export interface ComponentGroup {
 }
 
 /**
- * 树表格列配置
+ * 顶栏右侧操作按钮名称
  */
-export interface TreeTableColumn extends Record<keyof any, any> {
-  /** key */
-  key?: string;
-  /** 标题 */
-  label?: string;
-  /** 属性名 */
-  prop?: string;
-  /** 列宽 */
-  width?: string;
-  /** 样式 */
-  style?: CSSProperties;
-  /** 类名 */
-  class?: string;
-  /** 编辑组件类型 */
-  editType?: 'input' | 'switch';
+export type HeaderRightToolName = 'import' | 'export' | 'clear' | 'preview';
+
+/**
+ * 添加表单项需要的数据
+ */
+export interface AddItemResult {
+  /** 表单项 */
+  item?: ProFormItemProps;
+  /** 父级表单项 key */
+  parentItemId?: ProFormItemKey;
+  /** 添加位置 */
+  index?: number;
+}
+
+/**
+ * 修改表单项属性需要的数据
+ */
+export interface UpdateItemResult {
+  /** 表单项 key */
+  itemId: ProFormItemKey;
+  /** 需要修改的字段名 */
+  field: string;
+  /** 新的值 */
+  value: any;
 }
 
+/**
+ * 修改表单项需要的数据
+ */
+export interface UpdateItemsResult {
+  /** 需要删除的数据 */
+  deleteItemIds: ProFormItemKey[];
+  /** 需要添加的数据 */
+  addItems: AddItemResult[];
+  /** 需要修改的数据 */
+  updateItems: UpdateItemResult[];
+}
+
+/**
+ * 屏幕尺寸
+ */
+export type ScreenSize = 'pc' | 'pad' | 'phone';
+
 /**
  * 样式编辑数据
  */
@@ -96,6 +119,21 @@ export interface ComponentStyleItem {
   value?: string;
 }
 
+/**
+ * 树表格列配置
+ */
+export interface OptionsTableColumn extends TreeTableColumn {
+  /** 列宽 */
+  width?: string;
+  /** 编辑组件类型 */
+  editType?: 'input' | 'switch';
+}
+
+/**
+ * 添加子级时操作类型
+ */
+export type AddChildrenItemAction = 'addTableRow' | 'addTableCol';
+
 /**
  * 表格跨行跨列处理时单元格数据
  */
@@ -130,49 +168,3 @@ export interface TableGridRow {
  * 表格跨行跨列处理时数据
  */
 export type TableGridData = TableGridRow[];
-
-/**
- * 修改表单项需要的数据
- */
-export interface UpdateItemResult {
-  /** 表单项 key */
-  itemId: ProFormItemKey;
-  /** 需要修改的字段名 */
-  field: string;
-  /** 新的值 */
-  value: any;
-}
-
-/**
- * 添加表单项需要的数据
- */
-export interface AddItemResult {
-  /** 表单项 */
-  item?: ProFormItemProps;
-  /** 父级表单项 key */
-  parentItemId?: ProFormItemKey;
-  /** 添加位置 */
-  index?: number;
-}
-
-/**
- * 修改表单项时需要的数据
- */
-export interface UpdateItemsResult {
-  /** 需要删除的数据 */
-  deleteItemIds: ProFormItemKey[];
-  /** 需要添加的数据 */
-  addItems: AddItemResult[];
-  /** 需要修改的数据 */
-  updateItems: UpdateItemResult[];
-}
-
-/**
- * 添加子级时操作类型
- */
-export type AddChildrenItemAction = 'addTableRow' | 'addTableCol';
-
-/**
- * 屏幕尺寸
- */
-export type ScreenSize = 'pc' | 'pad' | 'phone';