starfish-editor-custom 1.0.0

package/src/components/Nav.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="header_nav">
+    <div class="logo">
+      <svg
+        version="1.0"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        color-interpolation-filters="sRGB"
+        style="margin: auto"
+      >
+        <g fill="rgba(0, 0, 0, .9)">
+          <g>
+            <g>
+              <rect
+                fill="#ffffff"
+                fill-opacity="0"
+                stroke-width="2"
+                x="0"
+                y="0"
+                width="60"
+                height="69.34652458334297"
+                class="image-rect"
+              ></rect>
+              <svg
+                x="0"
+                y="0"
+                width="60"
+                height="69.34652458334297"
+                filtersec="colorsb4782532531"
+                class="image-svg-svg primary"
+                style="overflow: visible"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 7.190000534057617 8.3100004196167"
+                >
+                  <g>
+                    <g fill-rule="evenodd">
+                      <path
+                        fill="#054ba3"
+                        d="M1.8 2.4L0 2.08v4.15L1.8 2.4z"
+                      ></path>
+                      <path
+                        fill="#0691ca"
+                        d="M4.21 1.72L3.6 0 0 2.08l4.21-.36z"
+                      ></path>
+                      <path
+                        fill="#054ba3"
+                        d="M5.4 5.9l1.79.33V2.08L5.4 5.9z"
+                      ></path>
+                      <path
+                        fill="#0691ca"
+                        d="M2.98 6.59l.62 1.72 3.59-2.08-4.21.36z"
+                      ></path>
+                      <path
+                        fill="#44c2f4"
+                        d="M0 6.23l3.6 2.08-2.42-3.47L0 6.23z"
+                      ></path>
+                      <path
+                        fill="#054ba3"
+                        d="M6.01 3.47l1.18-1.39L3.6 0l2.41 3.47z"
+                      ></path>
+                    </g>
+                  </g>
+                </svg>
+              </svg>
+              <!---->
+            </g>
+          </g>
+          <g transform="translate(67,17.723264694213867)">
+            <g
+              data-gra="path-name"
+              fill-rule=""
+              class="tp-name iconsvg-namesvg"
+            >
+              <g transform="scale(1)">
+                <g>
+                  <path
+                    d="M9.58 1.95L7.93 1.95Q3.45 1.85 0.19 1.56L0.19 1.56 0.92-3.7Q5.69-3.26 8.56-3.16L8.56-3.16 10.21-3.16Q13.33-3.16 14.57-3.94 15.81-4.72 16.1-6.18L16.1-6.18Q16.15-6.42 16.15-6.86L16.15-6.86Q16.15-8.07 15.76-8.46L15.76-8.46Q15.42-9 14.64-9.19 13.86-9.39 11.67-9.63L11.67-9.63 10.55-9.78Q8.02-9.97 5.74-10.65L5.74-10.65Q3.94-11.33 3.06-12.62 2.19-13.91 2.19-16.05L2.19-16.05Q2.19-16.49 2.29-17.56L2.29-17.56Q2.63-20.52 3.99-22.2 5.35-23.88 7.78-24.61 10.21-25.34 14.06-25.34L14.06-25.34 16.05-25.34 22.91-25.29 22.28-20.14 13.42-20.14Q11.28-20.14 10.16-19.92 9.05-19.7 8.54-19.19 8.02-18.68 7.88-17.7L7.88-17.7Q7.83-17.46 7.83-17.07L7.83-17.07Q7.83-16.29 8.27-15.76L8.27-15.76Q8.75-15.17 9.7-14.96 10.65-14.74 13.23-14.44L13.23-14.44Q16.29-14.15 18.24-13.52L18.24-13.52Q19.94-12.94 20.84-11.53 21.74-10.12 21.74-7.88L21.74-7.88Q21.74-6.81 21.64-6.23L21.64-6.23Q21.06-1.7 18.24 0.12 15.42 1.95 9.58 1.95L9.58 1.95ZM30.79-20.14L24.71-20.14 25.34-25.34 31.47-25.34 32.29-32.25 37.89-32.25 37.06-25.34 45.33-25.34 44.7-20.14 36.43-20.14 34.92-7.73Q34.87-7.39 34.87-6.81L34.87-6.81Q34.87-3.55 38.08-3.55L38.08-3.55Q39.44-3.55 42.95-3.65L42.95-3.65 42.31 1.65Q40.37 1.75 37.45 1.75L37.45 1.75Q33.46 1.75 31.27-0.05 29.08-1.85 29.08-5.4L29.08-5.4Q29.08-5.79 29.18-6.86L29.18-6.86 30.79-20.14ZM68.28 1.75L54.18 1.75Q50.53 1.75 48.34-0.32 46.16-2.38 46.16-5.69L46.16-5.69Q46.16-6.42 46.2-6.81L46.2-6.81Q46.64-9.82 47.76-11.6 48.88-13.37 50.99-14.18 53.11-14.98 56.56-14.98L56.56-14.98 64.73-14.98 64.78-15.37Q64.83-15.61 64.83-16.05L64.83-16.05Q64.83-17.95 63.57-19.11 62.3-20.28 59.63-20.28L59.63-20.28 58.36-20.28Q54.03-20.28 50.58-20.04L50.58-20.04 51.31-25 52.72-25.1Q53.5-25.14 55.47-25.24 57.44-25.34 58.9-25.34L58.9-25.34 60.21-25.34Q65.22-25.34 67.8-22.96 70.38-20.57 70.38-16.58L70.38-16.58Q70.38-16.15 70.28-15.08L70.28-15.08 68.28 1.75ZM51.8-6.81L51.75-6.23Q51.75-4.81 52.55-4.06 53.35-3.31 54.86-3.31L54.86-3.31 63.32-3.31 64.15-10.12 56.08-10.16Q54.23-10.21 53.13-9.46 52.04-8.71 51.8-6.81L51.8-6.81ZM92.5-25.19L91.63-20.04Q88.61-20.14 87.74-20.14L87.74-20.14Q84.63-20.14 83.07-18.65 81.51-17.17 81.12-13.76L81.12-13.76 79.18 1.75 73.59 1.75 75.48-13.62Q76.21-19.79 79.2-22.57 82.19-25.34 88.37-25.34L88.37-25.34Q90.8-25.34 92.5-25.19L92.5-25.19ZM105.1-26.46L104.96-25.34 120.52-25.34 117.16 1.75 111.57 1.75 114.29-20.14 104.32-20.14 101.65 1.75 96.06 1.75 98.73-20.14 93.09-20.14 93.72-25.34 99.36-25.34 99.61-27.33Q100.68-35.94 109.53-35.94L109.53-35.94Q111.72-35.94 114.63-35.7L114.63-35.7 113.86-30.54 112.25-30.64Q109.92-30.74 109.43-30.74L109.43-30.74Q107.29-30.74 106.32-29.69 105.34-28.65 105.1-26.46L105.1-26.46ZM131.46 1.95L129.81 1.95Q125.33 1.85 122.08 1.56L122.08 1.56 122.8-3.7Q127.57-3.26 130.44-3.16L130.44-3.16 132.09-3.16Q135.21-3.16 136.45-3.94 137.69-4.72 137.98-6.18L137.98-6.18Q138.03-6.42 138.03-6.86L138.03-6.86Q138.03-8.07 137.64-8.46L137.64-8.46Q137.3-9 136.52-9.19 135.74-9.39 133.55-9.63L133.55-9.63 132.43-9.78Q129.91-9.97 127.62-10.65L127.62-10.65Q125.82-11.33 124.94-12.62 124.07-13.91 124.07-16.05L124.07-16.05Q124.07-16.49 124.17-17.56L124.17-17.56Q124.51-20.52 125.87-22.2 127.23-23.88 129.66-24.61 132.09-25.34 135.94-25.34L135.94-25.34 137.93-25.34 144.79-25.29 144.16-20.14 135.3-20.14Q133.16-20.14 132.05-19.92 130.93-19.7 130.42-19.19 129.91-18.68 129.76-17.7L129.76-17.7Q129.71-17.46 129.71-17.07L129.71-17.07Q129.71-16.29 130.15-15.76L130.15-15.76Q130.63-15.17 131.58-14.96 132.53-14.74 135.11-14.44L135.11-14.44Q138.17-14.15 140.12-13.52L140.12-13.52Q141.82-12.94 142.72-11.53 143.62-10.12 143.62-7.88L143.62-7.88Q143.62-6.81 143.52-6.23L143.52-6.23Q142.94-1.7 140.12 0.12 137.3 1.95 131.46 1.95L131.46 1.95ZM147.41 1.75L151.99-35.75 157.58-35.75 156.31-25.34 162.93-25.34Q173-25.34 173-16.1L173-16.1Q173-14.98 172.85-13.67L172.85-13.67 170.95 1.75 165.36 1.75 167.26-13.81Q167.35-14.79 167.35-15.17L167.35-15.17Q167.35-20.14 162.3-20.14L162.3-20.14 155.68-20.14 153.01 1.75 147.41 1.75Z"
+                    transform="translate(-0.1899999976158142, 35.939998626708984)"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+
+      <!-- <iframe src="https://ghbtns.com/github-btn.html?user=haixin-fang&amp;repo=vue-form-design&amp;type=star&amp;count=true" frameborder="0" scrolling="0" width="160px" height="30px" style="vertical-align: middle; margin-top: 10px; margin-left: 10px"></iframe> -->
+    </div>
+    <div class="starfish-link">
+      <!-- <a href="https://github.com/haixin-fang/vue-form-design" target="_black"
+        >GitHub</a
+      > -->
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        @click="onLink"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12 2.23999C6.475 2.23999 2 6.71499 2 12.24C2 16.665 4.8625 20.4025 8.8375 21.7275C9.3375 21.815 9.525 21.515 9.525 21.2525C9.525 21.015 9.5125 20.2275 9.5125 19.39C7 19.8525 6.35 18.7775 6.15 18.215C6.0375 17.9275 5.55 17.04 5.125 16.8025C4.775 16.615 4.275 16.1525 5.1125 16.14C5.9 16.1275 6.4625 16.865 6.65 17.165C7.55 18.6775 8.9875 18.2525 9.5625 17.99C9.65 17.34 9.9125 16.9025 10.2 16.6525C7.975 16.4025 5.65 15.54 5.65 11.715C5.65 10.6275 6.0375 9.72749 6.675 9.02749C6.575 8.77749 6.225 7.75249 6.775 6.37749C6.775 6.37749 7.6125 6.11499 9.525 7.40249C10.325 7.17749 11.175 7.06499 12.025 7.06499C12.875 7.06499 13.725 7.17749 14.525 7.40249C16.4375 6.10249 17.275 6.37749 17.275 6.37749C17.825 7.75249 17.475 8.77749 17.375 9.02749C18.0125 9.72749 18.4 10.615 18.4 11.715C18.4 15.5525 16.0625 16.4025 13.8375 16.6525C14.2 16.965 14.5125 17.565 14.5125 18.5025C14.5125 19.84 14.5 20.915 14.5 21.2525C14.5 21.515 14.6875 21.8275 15.1875 21.7275C17.1727 21.0573 18.8977 19.7815 20.1198 18.0795C21.3419 16.3776 21.9995 14.3352 22 12.24C22 6.71499 17.525 2.23999 12 2.23999Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+/**
+ * 2022.7.1想到的优化点
+ * 新增json导入导出功能
+ */
+export default defineComponent({
+  setup() {
+    return {
+      onLink() {
+        window.open("https://github.com/haixin-fang/vue-form-design");
+      },
+    };
+  },
+});
+</script>

package/src/components/NavList.vue

@@ -0,0 +1,560 @@
+<template>
+  <div class="nav_list">
+    <div class="detailBtn">
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="保存"
+        placement="top"
+        v-if="btnIsShow('left', 'save')"
+      >
+        <span
+          class="iconfontui icon-baocun"
+          :class="clearIsDisable ? 'noactive' : ''"
+          @click="handleFormSave()"
+        ></span>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="预览"
+        placement="top"
+        v-if="btnIsShow('left', 'preview')"
+      >
+        <span
+          class="iconfontui icon-icon_yulan"
+          :class="clearIsDisable ? 'noactive' : ''"
+          @click="handleFormPre()"
+        ></span>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="全屏"
+        placement="top"
+        v-if="
+          !fullscreen && btnIsShow('left', 'fullscreen') && supportFullScreen
+        "
+      >
+        <span class="iconfontui icon-quanping" @click="handleFullScreen()"></span>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="非全屏"
+        placement="top"
+        v-if="
+          fullscreen && btnIsShow('left', 'fullscreen') && supportFullScreen
+        "
+      >
+        <span class="iconfontui icon-suoxiao1" @click="handleFullScreen()"></span>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="清空"
+        placement="top"
+        v-if="btnIsShow('left', 'delete')"
+      >
+        <span
+          class="iconfontui icon-shanchu1"
+          :class="clearIsDisable ? 'noactive' : ''"
+          @click="handleClear()"
+        >
+        </span>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="组件结构树"
+        placement="top"
+        v-if="btnIsShow('left', 'tree')"
+      >
+        <span class="iconfontui icon-tree" @click="handleTree()"> </span>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="撤销"
+        placement="top"
+        v-if="btnIsShow('left', 'undo')"
+      >
+        <span
+          class="iconfontui icon-24gl-undo3"
+          :class="historyIndex == -1 ? 'noactive' : ''"
+          @click="handleBack()"
+        ></span>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="重做"
+        placement="top"
+        v-if="btnIsShow('left', 'redo')"
+      >
+        <span
+          class="iconfontui icon-24gl-redo3"
+          :class="historyIndex == historyLen - 1 ? 'noactive' : ''"
+          @click="handleForward()"
+        ></span>
+      </el-tooltip>
+      <!-- <el-button text @click="handleFormSave()" size="small" :disabled="clearIsDisable">保存</el-button>
+      <el-button text @click="handleFormPre()" size="small" :disabled="clearIsDisable">预览</el-button>
+      <el-button text @click="handleFullScreen()" size="small">全屏/非全屏</el-button>
+      <el-button text @click="handleClear()" size="small" :disabled="clearIsDisable">清空</el-button>
+      <el-button text @click="handleBack()" size="small" :disabled="historyIndex == -1">后退</el-button>
+      <el-button text @click="handleForward()" size="small" :disabled="historyIndex == historyLen - 1">前进</el-button> -->
+    </div>
+    <div class="pageBtn">
+      <div class="el-button-group" v-if="btnIsShow('right', 'viewport')">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="PC"
+          placement="top"
+          v-if="btnIsShow('left', 'redo')"
+        >
+          <span
+            :class="pageType == 'PC' ? 'info' : ''"
+            @click="updatePageType('PC')"
+            ><i class="iconfontui icon-diannao"></i
+          ></span>
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="Pad"
+          placement="top"
+          v-if="btnIsShow('left', 'redo')"
+        >
+          <span
+            :class="pageType == 'Pad' ? 'info' : ''"
+            @click="updatePageType('Pad')"
+            ><i class="iconfontui icon-pingbandiannao"></i
+          ></span>
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="H5"
+          placement="top"
+          v-if="btnIsShow('left', 'redo')"
+        >
+          <span
+            :class="pageType == 'H5' ? 'info' : ''"
+            @click="updatePageType('H5')"
+            ><i class="iconfontui icon-shouji"></i
+          ></span>
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="导入json"
+          placement="top"
+        >
+          <span
+            type="text"
+            plain
+            @click="ImportJson"
+            v-if="btnIsShow('right', 'json-import')"
+            ><i class="iconfontui icon-daoru"></i
+          ></span>
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="导出json"
+          placement="top"
+        >
+          <span
+            type="text"
+            plain
+            @click="exportJson"
+            v-if="btnIsShow('right', 'json-export')"
+            ><i class="iconfontui icon-daochu"></i
+          ></span>
+        </el-tooltip>
+      </div>
+    </div>
+    <el-drawer
+      ref="drawerRef"
+      v-model="dialog"
+      title="表单结构树"
+      :before-close="handleClose"
+      direction="ltr"
+      custom-class="demo-drawer"
+    >
+      <div class="demo-drawer__content">
+        <el-input v-model="filterText" placeholder="Filter keyword" />
+        <el-tree
+          :data="tree"
+          :props="propsData"
+          ref="treeRef"
+          default-expand-all
+          :filter-node-method="filterNode"
+          @node-click="myClick"
+          style="margin-top: 20px"
+        >
+          <template #default="{ node, data }">
+            <span class="custom-tree-node">
+              <i
+                class="iconfontui"
+                :class="data.icon"
+                style="font-size: 12px; margin-right: 5px"
+              ></i>
+              <span>{{ node.label }}</span>
+              <!-- <span>
+                <i
+                  @click="remove(node, data)"
+                  class="iconfontui icon-shanchu1"
+                ></i>
+              </span> -->
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </el-drawer>
+    <custom-dialog ref="jsonDialog" :width="800" dialogclass="codeDialog">
+      <div class="custom_code">
+        <!-- <codemirror
+          v-model="code"
+          placeholder="json导入"
+          mode="text/json"
+          :style="{ height: '400px' }"
+          :extensions="extensions"
+        /> -->
+        <JsonCode v-model:value="code" />
+        <el-upload
+          accept="application/json"
+          class="upload-demo"
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :on-change="handleChange"
+        >
+          <el-button type="primary">导入json文件</el-button>
+        </el-upload>
+      </div>
+
+      <el-footer class="my-Footer" style="text-align: center">
+        <el-button type="primary" @click="saveJson">确定</el-button>
+        <el-button @click="closeCodeDialog">关闭</el-button>
+      </el-footer>
+    </custom-dialog>
+  </div>
+</template>
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  inject,
+  ref,
+  toRaw,
+  watch,
+  PropType,
+  defineAsyncComponent,
+} from "vue";
+import type {
+  Controls,
+  MenuBarData,
+  AllFormItem,
+  BaseComponentItem,
+} from "@/type";
+import { clearCanvas } from "@/utils/formKeycon";
+// import { json } from "@codemirror/lang-json";
+// import Codemirror from "vue-codemirror";
+// import JsonCode from "@/common/jsonCode.vue";
+export default defineComponent({
+  components: {
+    JsonCode: defineAsyncComponent(() => import("@/common/jsonCode.vue")),
+  },
+  props: {
+    /** 顶部工具栏配置 */
+    menu: {
+      type: Object as PropType<MenuBarData>,
+      default: () => ({ left: [], right: [], column: true }),
+    },
+  },
+  setup(props) {
+    const { proxy } = getCurrentInstance() as any;
+    const { hisContrl, uiControl, formStore } =
+      inject<Controls>("control") || {};
+    const clearIsDisable = computed(
+      () => formStore?.get("allFormList")?.length == 0
+    );
+    const historyIndex = computed(() => hisContrl?.get("index"));
+    const historyLen = computed(
+      () => hisContrl?.get<Array<any>>("historyList").length || 0
+    );
+    const fullscreen = computed(() => uiControl?.get("isFullscreen"));
+    const allFormList = computed(() => formStore?.get("allFormList"));
+    const pageType = computed(() => uiControl?.get("pageType"));
+    const supportFullScreen = ref(!!document.fullscreenEnabled);
+    // const extensions = [json()];
+    const jsonDialog = ref();
+    const tree = ref();
+    const treeRef = ref();
+    const filterText = ref();
+    const code = ref();
+    const propsData = ref({
+      value: "id",
+      label: "label",
+      children: "children",
+    });
+    interface Tree {
+      id: string;
+      label: string;
+      children?: Tree[];
+      name?: string;
+    }
+    const initTree = () => {
+      if (allFormList.value && allFormList.value.length > 0) {
+        const treeList = toRaw(allFormList.value).map((item: any): Tree => {
+          return toTree(item);
+        });
+        return treeList;
+      } else {
+        return [];
+      }
+    };
+    function toTree(item: any): any {
+      if (!item.layout) {
+        return {
+          id: item.id,
+          label: item.nameCn,
+          icon: item.icon,
+        };
+      } else {
+        let children;
+        if (item.ControlType == "Grid") {
+          children = item.data.columns.map(
+            (colItem: { list: AllFormItem[] }) => {
+              const children = colItem.list.map((listItem: AllFormItem) => {
+                return toTree(listItem);
+              });
+              return {
+                id: "",
+                label: "GridChild",
+                children,
+              };
+            }
+          );
+        } else if (item.ControlType == "TableLayout") {
+          children = item.data.trs.map((trItem: any) => {
+            const children = trItem.tds.map((tdItem: any) => {
+              const children = tdItem.list.map((listItem: AllFormItem) => {
+                return toTree(listItem);
+              });
+              return {
+                id: "",
+                label: "列",
+                children,
+              };
+            });
+            return {
+              id: "",
+              label: "行",
+              children,
+            };
+          });
+        } else if (
+          item.ControlType == "Collapse" ||
+          item.ControlType == "Tabs"
+        ) {
+          children = item.data.items.map((colItem: any) => {
+            const children = colItem.list.map((listItem: AllFormItem) => {
+              return toTree(listItem);
+            });
+            return {
+              id: "",
+              label: item.nameCn + "-child",
+              children,
+            };
+          });
+        }
+        return {
+          id: item.id,
+          label: item.nameCn,
+          children,
+        };
+      }
+    }
+    const dialog = ref(false);
+    const timer: unknown = null;
+    const filterNode = (value: string, data: Tree) => {
+      if (!value) return true;
+      return data.label.includes(value);
+    };
+    const handleFormSave = (type?: string) => {
+      proxy.$EventBus.emit("setSave", type);
+    };
+    const handleFormPre = () => {
+      formStore?.set("preview", true);
+      proxy.$EventBus.emit("openPreview");
+    };
+
+    const setTimeSave = () => {
+      // timer = setInterval(() => {
+      //   handleFormSave("auto");
+      // }, 20000);
+    };
+
+    const handleImportJson = () => {
+      try {
+        const result = JSON.parse(code.value);
+        const formList = result.map((item: BaseComponentItem) => {
+          return window.VueContext.$Flex.jsonToForm(item);
+        });
+        code.value = JSON.stringify(formList, null, 4);
+      } catch (e) {
+        code.value = JSON.stringify({});
+        console.error(e);
+        ElMessage({
+          type: "error",
+          message: "导入失败，数据格式不对",
+        });
+      }
+    };
+
+    watch(filterText, (val) => {
+      treeRef.value?.filter(val);
+    });
+
+    // 每隔一分钟判断是否更改了内容,如果有更改则自动保存
+    onMounted(() => {
+      setTimeSave();
+    });
+    onUnmounted(() => {
+      clearInterval(timer as any);
+    });
+
+    return {
+      // extensions,
+      code,
+      supportFullScreen,
+      handleFormSave,
+      handleFormPre,
+      jsonDialog,
+      pageType,
+      historyIndex,
+      historyLen,
+      fullscreen,
+      clearIsDisable,
+      filterText,
+      propsData,
+      dialog,
+      tree,
+      treeRef,
+      filterNode,
+      btnIsShow(type: "left" | "right", btn: any) {
+        if (props.menu[type].length == 0) {
+          return true;
+        }
+        return props.menu[type].includes(btn);
+      },
+      updatePageType(type: string) {
+        uiControl?.set("pageType", type);
+      },
+      handleClear: () => {
+        clearCanvas();
+        formStore?.setFormCurrentId("");
+      },
+      handleBack: () => {
+        hisContrl?.back();
+      },
+      handleForward: () => {
+        hisContrl?.go();
+      },
+      handleFullScreen: () => {
+        const value = !uiControl?.get("isFullscreen");
+        uiControl?.set("isFullscreen", value);
+        if (value) {
+          const element: any = document.documentElement;
+
+          if (element.requestFullscreen) {
+            element.requestFullscreen();
+          } else if (element.mozRequestFullScreen) {
+            // Firefox
+            element.mozRequestFullScreen();
+          } else if (element.webkitRequestFullscreen) {
+            // Chrome, Safari and Opera
+            element.webkitRequestFullscreen();
+          } else if (element.msRequestFullscreen) {
+            // IE/Edge
+            element.msRequestFullscreen();
+          }
+        } else {
+          const doc: any = document;
+          if (doc.exitFullscreen) {
+            doc.exitFullscreen();
+          } else if (doc.mozCancelFullScreen) {
+            // Firefox
+            doc.mozCancelFullScreen();
+          } else if (doc.webkitExitFullscreen) {
+            // Chrome, Safari and Opera
+            doc.webkitExitFullscreen();
+          } else if (doc.msExitFullscreen) {
+            // IE/Edge
+            doc.msExitFullscreen();
+          }
+        }
+      },
+      handleTree() {
+        dialog.value = true;
+        tree.value = initTree();
+      },
+      handleClose() {
+        dialog.value = false;
+      },
+      myClick(currentNode: any) {
+        formStore?.setFormCurrentId(currentNode.id);
+      },
+      ImportJson() {
+        jsonDialog.value.show();
+        jsonDialog.value.init("json导入", "icon-biaodan");
+      },
+      handleChange(file: any) {
+        const reader = new FileReader();
+        reader.readAsText(file.raw);
+        reader.onload = (e: any) => {
+          code.value = e.currentTarget.result;
+          handleImportJson();
+        };
+      },
+      closeCodeDialog() {
+        jsonDialog.value.close();
+      },
+      saveJson() {
+        debugger;
+        formStore?.updateAllFormList(JSON.parse(code.value));
+        jsonDialog.value.close();
+      },
+      exportJson(fileName = `demo.json`) {
+        let content = "data:application/json;charset=utf-8,";
+        try {
+          const result = JSON.stringify(
+            window.VueContext.$Flex.initFormToJson(allFormList.value)
+          );
+          content += result;
+          const encodedUri = encodeURI(content);
+          const actions = document.createElement("a");
+          actions.setAttribute("href", encodedUri);
+          actions.setAttribute("download", fileName);
+          actions.click();
+          ElMessage({
+            type: "success",
+            message: "导出成功",
+          });
+        } catch (e) {
+          ElMessage({
+            type: "error",
+            message: "导出失败,数据格式不对",
+          });
+        }
+      },
+      // remove(node, data) {},
+    };
+  },
+});
+</script>