starfish-editor-custom 1.0.0

package/src/styles/shape.scss

@@ -0,0 +1,101 @@
+.starfish-editor {
+  .shape {
+    box-sizing: content-box;
+    // padding-bottom: 12px;
+    border: 2px solid transparent;
+    position: relative;
+    cursor: move;
+    border: 2px dotted #dfe2e2;
+    box-sizing: border-box;
+    &::before {
+      content: "";
+      height: 2px;
+      width: 0;
+      background: $blue;
+      position: absolute;
+      bottom: 0;
+      left: 100%;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+    }
+    .editbar {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      border-radius: 10px 0 0 0;
+      background: $blue;
+      color: white;
+      padding: 1px 5px;
+      z-index: 3333333;
+      cursor: pointer;
+      span {
+        padding: 0 5px;
+        font-weight: 500;
+      }
+      span:first-child,
+      span:nth-child(2) {
+        font-size: 14px;
+      }
+    }
+    .fade-leave-to,
+    .fade-enter-from {
+      opacity: 0;
+    }
+    .fade-leave-from,
+    .fade-enter-to {
+      opacity: 1;
+    }
+    .fade-leave-active,
+    .fade-enter-to {
+      transition: all 0.2s ease-in;
+    }
+    .editForm {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      z-index: 3333334;
+      user-select: none;
+      background-color: #fff;
+      box-sizing: border-box;
+      box-shadow: 0 10px 20px rgb(0 0 0 / 30%), 0 0 0 1px #eee;
+      padding: 5px 0;
+      min-width: 180px;
+      span {
+        padding: 6px 12px;
+        display: flex;
+        text-align: left;
+        white-space: nowrap;
+        color: #333;
+        position: relative;
+        &:hover {
+          background: $blue;
+          color: white;
+        }
+      }
+    }
+    .itemGhost {
+      background-color: #e70c557e;
+    }
+    &.shape_border {
+      border: 2px solid $blue;
+      background: #d1e4f6;
+      &::before {
+        left: 0;
+        width: 100%;
+      }
+    }
+    &.shape_border_layout {
+      background: rgba(152, 103, 247, 0.24);
+      border: 2px solid $layout_color;
+      &::before {
+        background: $layout_color;
+      }
+      .editbar {
+        background: $layout_color;
+      }
+    }
+    &.noactive_layout {
+      background: rgba(152, 103, 247, 0.1);
+    }
+  }
+}

package/src/styles/shortcutkey.scss

@@ -0,0 +1,44 @@
+.starfish-editor {
+  .shortCutKey {
+    position: absolute;
+    width: 250px;
+    background: #fff;
+    // transform: translateY(-105%);
+    // left: -105px;
+    right: 120%;
+    top: 0;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+    z-index: 20;
+    padding-bottom: 20px;
+    .san {
+      position: absolute;
+      height: 0;
+      width: 0;
+      border: 8px solid transparent;
+      border-left-color: #fff;
+      right: 0;
+      top: 30%;
+      margin-right: -16px;
+    }
+    .title {
+      text-align: center;
+      font-size: 18px;
+      padding-top: 5px;
+    }
+    .keyContent {
+      > div {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span {
+          padding: 0 15px;
+          color: rgb(95, 85, 85);
+        }
+        span:first-child {
+          color: rgb(219, 124, 124);
+          //   border: 1px solid rgb(219, 124, 124);
+        }
+      }
+    }
+  }
+}

package/src/styles/variables.scss

@@ -0,0 +1,36 @@
+// 编辑页面头部的高度
+$editor_nav: 50px;
+
+$editor-nav-background-color: white;
+// 画布的最小高度
+$editor_canvas_min_height: 667px;
+
+$blue: #409eff;
+
+$resizer_background_color: #d8dee8;
+
+$resizer_hover_background_color: #ccc;
+
+$layout_color: #9867f7;
+@mixin scrollbar() {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 2px;
+    background: transparent;
+    transition: all 0.3s;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: rgba(0, 0, 0, 0.2);
+    transition: all 0.3s;
+    -webkit-box-shadow: none;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background: transparent;
+  }
+  &::-webkit-scrollbar-track-piece {
+    background: transparent;
+    border: none;
+  }
+}

package/src/styles/work-space.scss

@@ -0,0 +1,126 @@
+.starfish-editor {
+  background: #fafafa;
+  .editor_pages_center {
+    position: relative;
+    height: calc(100% - 40px);
+    // overflow-y: auto;
+    outline: 0;
+    .editor_nav {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      box-shadow: 0 0 10px #ebedf0;
+    }
+    .canvasBox {
+      position: absolute;
+      // left: 16px;
+      left: 50%;
+      transform: translateX(-50%) scale(var(--scale));
+      top: 16px;
+      // right: 16px;
+      bottom: 10px;
+      width: calc(100% - 32px);
+      // margin-left: -350px;
+      background: white;
+      box-shadow: 0 4px 12px #ebedf0;
+      transform-origin: 50% 50%;
+      transition: all 0.2s linear;
+      overflow: hidden;
+      box-sizing: border-box;
+      // &.fullScreenBox {
+      //   width: 100% ;
+      // }
+      &.PC_layout {
+        width: calc(100% - 32px);
+      }
+      &.Pad_layout {
+        width: 70%;
+        border-radius: 15px;
+        // box-shadow: 0 0 1px 10px #495060;
+        border: 10px solid #495060;
+      }
+      &.H5_layout {
+        width: 50%;
+        border-radius: 15px;
+        // box-shadow: 0 0 1px 10px #495060;
+        border: 10px solid #495060;
+      }
+      .draggable_container {
+        width: 100%;
+        height: 100%;
+        // min-height: $editor_canvas_min_height;
+        min-height: 100%;
+        z-index: 1;
+        text-align: left;
+        position: relative;
+        .dragArea {
+          width: 100%;
+          height: 100%;
+          min-height: 100%;
+          @include scrollbar();
+          overflow-y: auto;
+        }
+        .form-empty {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          text-align: center;
+          font-size: 20px;
+          color: #ccc;
+        }
+      }
+      .grid_controller {
+        position: absolute;
+        top: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        height: 25px;
+        line-height: 25px;
+        display: flex;
+        background: white;
+        span {
+          font-size: 14px;
+          padding: 0 10px;
+          border: 1px solid #d9d9d9;
+          box-sizing: border-box;
+        }
+        .grid_check {
+          color: #40a9ff;
+          border-color: #40a9ff;
+        }
+        .grid_check_none2 {
+          border-left: transparent;
+        }
+        .grid_check_none1 {
+          border-right: transparent;
+        }
+      }
+    }
+    .editForm {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      z-index: 3;
+      user-select: none;
+      background-color: #fff;
+      box-sizing: border-box;
+      box-shadow: 0 10px 20px rgb(0 0 0 / 30%), 0 0 0 1px #eee;
+      padding: 5px 0;
+      min-width: 180px;
+      span {
+        padding: 6px 12px;
+        display: flex;
+        text-align: left;
+        white-space: nowrap;
+        color: #333;
+        position: relative;
+        &:hover {
+          background: #409eff;
+          color: white;
+        }
+      }
+    }
+  }
+}

package/src/type.ts

@@ -0,0 +1,240 @@
+import type { UiControl } from "./controller/ui";
+import type { hisContrl } from "./controller/history";
+import type { formContrl } from "./controller/form";
+import type { ActionForm } from "./controller/action";
+import type { shortCut } from "./controller/shortcut";
+import type { FormConfig, fields } from "starfish-form/src/main";
+/**
+ * 组件名称枚举
+ */
+type ComponentListEnum = Omit<keyof typeof window.VApp.$formcomponents, "symbol">;
+
+interface ColumnWidth {
+  left: number;
+  center: number;
+  right: number;
+}
+
+declare type T1 = number;
+
+export interface UiState {
+  /**
+   * 编辑器各模块宽度
+   */
+  columnWidth: ColumnWidth;
+  /**
+   * 弹窗宽度
+   */
+  dialogWidth: number;
+  /**
+   * 编辑器缩放比例
+   */
+  scale: number;
+  /**
+   * 编辑器是否全屏
+   */
+  isFullscreen: boolean;
+  /**
+   * 页面类型
+   */
+  pageType: string;
+  /**
+   * 右侧配置菜单是否隐藏
+   */
+  rightClose: boolean;
+  /**
+   * 左侧表单列表模块是否隐藏
+   */
+  leftClose: boolean;
+}
+
+export interface Controls {
+  uiControl: UiControl;
+  hisContrl: hisContrl;
+  formStore: formContrl;
+  actionContrl: ActionForm;
+  store: shortCut;
+}
+
+export interface setColumnWidth {
+  left?: number;
+  center?: number | "auto";
+  right?: number;
+}
+
+export interface GetColumnWidth {
+  left: number;
+  center: number;
+  right: number;
+}
+
+export interface HistoryState {
+  /**
+   * 存储的所有历史行为
+   */
+  historyList: HistoryItem[];
+  /**
+   * 当前所在的历史行为
+   */
+  index: number;
+  /**
+   * 是否正在执行后退或前进,是则阻止进入历史快走中
+   */
+  historyFlag: boolean;
+  /**
+   * 历史回退最大步数
+   */
+  maxStep: number;
+}
+
+export interface ShortCutState {
+  form: FormState;
+  copyContent: AllFormItem | Record<string, any>;
+  curList: AllFormItem[];
+}
+
+export interface HistoryItem {
+  allFormList: AllFormItem[];
+  currentIndex: number;
+  currentId: string;
+  curControl: AllFormItem | Record<string, any>;
+}
+
+export type MenuItem = "delete" | "undo" | "redo" | "tree" | "save" | "preview" | "fullscreen" | "viewport" | "json-export" | "json-import";
+export type MenuRight = "viewport" | "json-export" | "json-import";
+export type MenuBarData = {
+  left: MenuItem[];
+  right: MenuRight[];
+  column: boolean;
+};
+export interface FormState {
+  /**
+   * 存储所有选择的表单控件
+   */
+  allFormList: AllFormItem[];
+  /**
+   * 选中的表单控件
+   */
+  curControl: AllFormItem | Record<string, any>;
+  /**
+   * 选中的控件的id
+   */
+  currentId: string;
+  /**
+   * 选中的控件的索引
+   */
+  currentIndex: number;
+  /**
+   * 开启预览进行表单验证
+   */
+  preview: boolean;
+  /**
+   * 预览是否展示
+   */
+  previewShow: boolean;
+  /**
+   * 保存
+   */
+  save: boolean;
+
+  /**
+   * 下一次保存的时候判断表单是否变更了，而不用变更就改变save，但是我们监听了save会形成死循环
+   * 判断表单是否更新
+   */
+  formUpdate: boolean;
+  /**
+   * 预览和存储到数据库最终结果
+   */
+  AllFormResult: any[];
+  /**
+   * 用户在动态表单输入的配置结果
+   */
+  formResult: Record<string, any>;
+  /**
+   * 表单全局配置
+   */
+  globalDatas: Record<string, any>;
+  /**
+   * 全局表单配置列表
+   */
+  globalFormList: BaseFormConfig[];
+}
+
+interface FormRule {
+  fieldName: any[];
+  label: any[];
+}
+export interface AllFormItem {
+  /**
+   * 组件渲染唯一标识
+   */
+  ControlType: ComponentListEnum;
+  /**
+   * 表单配置所需的表单配置列表
+   */
+  controlItems: FormConfig[];
+  /**
+   * 表单配置
+   */
+  data: fields;
+  /**
+   * 获取配置列表和配置方法列表
+   */
+  formConfig: {
+    data: () => fields;
+    morenConfig: () => FormConfig[];
+  };
+  /**
+   * 组件icon图标
+   */
+  icon: string;
+  /**
+   * 组件唯一id
+   */
+  id: string;
+  /**
+   * 组件名称
+   */
+  nameCn: string;
+  /**
+   * 是否是布局表单
+   */
+  layout: boolean;
+  /**
+   * 规则
+   */
+  rules: FormRule;
+}
+
+export interface BaseComponentItem {
+  /**
+   * 组件渲染唯一标识
+   */
+  ControlType: ComponentListEnum;
+  /**
+   * 组件icon图标
+   */
+  icon: string;
+  /**
+   * 组件名称
+   */
+  nameCn: string;
+  /**
+   * 是否是布局表单
+   */
+  layout: boolean;
+  /**
+   * 规则
+   */
+  rules?: FormRule;
+}
+
+export type RequiredKey<T, K extends keyof T> = Omit<T, K> & {
+  [P in K]-?: T[P];
+};
+
+export type PartialKey<T, K extends keyof T> = Omit<T, K> & {
+  [P in K]?: T[P];
+};
+
+export type BaseFormConfig = FormConfig;