refactor: 重构提高性能和加载速度

haixin-fang · Mar 12, 2024 · af7109d · af7109d
1 parent c621fe4
commit af7109d
Show file tree

Hide file tree

Showing 23 changed files with 572 additions and 418 deletions.
diff --git a/bug.md b/bug.md
@@ -24,4 +24,5 @@
 - 设计个logo
 - 布局优化  参考(https://epic.kcz66.com/demo/element-plus/)
 - 新增签名、评价表单
-- 表单新增提示,间距,html 
+- 表单新增提示,间距,html 
+- tab选中 初始化
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
     "clean:all": "pnpm clean:top && pnpm clean:modules",
     "prepare": "husky install",
-    "build": "pnpm clean:top && pnpm --filter \"starfish-*\" build",
+    "build": " pnpm --filter \"starfish-*\" build",
     "commit": "git-cz"
   },
   "engines": {

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,19 +1,17 @@
 {
   "name": "starfish-editor",
-  "version": "1.0.16",
+  "version": "1.1.3",
   "publish": false,
   "main": "dist/starfish-editor.umd.js",
   "style": "dist/style.css",
   "module": "dist/starfish-editor.es.js",
   "types": "dist/types/starfish-editor.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/starfish-editor.es.js",
-      "require": "./dist/starfish-editor.umd.js"
+      "import": "./dist/starfish-editor.es.js"
     },
     "./dist/style.css": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
+      "import": "./dist/style.css"
     },
     "./*": "./*"
   },
@@ -37,7 +35,7 @@
     "keycon": "^1.1.2",
     "mitt": "^3.0.0",
     "nanoid": "^4.0.0",
-    "starfish-form": "^1.1.2",
+    "starfish-form": "^1.2.3",
     "vue": "^3.2.37",
     "vue-codemirror": "^6.1.1",
     "vuedraggable": "^4.1.0",

diff --git a/packages/editor/src/common/formStyle.vue b/packages/editor/src/common/formStyle.vue
@@ -3,17 +3,36 @@
     <div class="label">
       <label>{{ item.data.label }}</label>
       <span v-if="item.data.required" class="item_require">*</span>
-      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+      <el-tooltip
+        v-if="item.data.tip"
+        class="item"
+        effect="dark"
+        :content="item.data.tip"
+        placement="top"
+      >
         <span class="tip iconfont icon-tishi"></span>
       </el-tooltip>
     </div>
     <div class="control">
-      <el-button style="width: 100%" @click="onStyleSet" :type="code?'primary':''">{{code?'已设置':'设置'}}</el-button>
+      <el-button
+        style="width: 100%"
+        @click="onStyleSet"
+        :type="code ? 'primary' : ''"
+        >{{ code ? "已设置" : "设置" }}</el-button
+      >
       <custom-dialog ref="codeDialog" dialogclass="codeDialog" width="1000">
         <div class="custom_code">
-          <codemirror v-model="code" placeholder=".starfish-form-css{}" :style="{ height: '400px' }" :autofocus="true" :extensions="extensions" :indent-with-tab="true" :tab-size="2" />
+          <codemirror
+            v-model="code"
+            placeholder=".starfish-form-css{}"
+            :style="{ height: '400px' }"
+            :autofocus="true"
+            :extensions="extensions"
+            :indent-with-tab="true"
+            :tab-size="2"
+          />
         </div>
-        <el-footer class="my-Footer" style="text-align: center;">
+        <el-footer class="my-Footer" style="text-align: center">
           <el-button type="primary" @click="saveCssStyle">确定</el-button>
           <el-button @click="closeCodeDialog">关闭</el-button>
         </el-footer>
@@ -22,117 +41,130 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, getCurrentInstance } from "vue";
-  import { css } from "@codemirror/lang-css";
-  export default defineComponent({
-    ControlType: "FormStyle", // 必须与文件名匹配
-    isHide: true,
-    props: {
-      item: {
-        type: Object,
-        default: () => ({}),
+import { defineComponent, ref, getCurrentInstance } from "vue";
+import { css } from "@codemirror/lang-css";
+import { Codemirror } from "vue-codemirror";
+export default defineComponent({
+  ControlType: "FormStyle", // 必须与文件名匹配
+  isHide: true,
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    controlItems: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    Codemirror,
+  },
+  setup(props) {
+    const extensions = [css()];
+    const codeDialog = ref();
+    const code = ref();
+    const { proxy } = getCurrentInstance() as any;
+    return {
+      code,
+      extensions,
+      codeDialog,
+      onStyleSet() {
+        codeDialog.value.init("表单样式表", "icon-biaodan");
+        codeDialog.value.show();
       },
-      data: {
-        type: Object,
-        default: () => ({}),
+      saveCssStyle() {
+        props.data[props.item.data.fieldName] = code.value;
+        proxy.extractCssClass();
+        proxy.insertCustomCssToHead(code.value);
+        codeDialog.value.close();
       },
-      controlItems: {
-        type: Array,
-        default: () => [],
+      closeCodeDialog() {
+        codeDialog.value.close();
       },
-    },
-    setup(props) {
-      const extensions = [css()];
-      const codeDialog = ref();
-      const code = ref();
-      const { proxy } = getCurrentInstance() as any;
-      return {
-        code,
-        extensions,
-        codeDialog,
-        onStyleSet() {
-          codeDialog.value.init("表单样式表", "icon-biaodan");
-          codeDialog.value.show();
-        },
-        saveCssStyle() {
-          props.data[props.item.data.fieldName] = code.value;
-          proxy.extractCssClass();
-          proxy.insertCustomCssToHead(code.value);
-          codeDialog.value.close();
-        },
-        closeCodeDialog() {
-          codeDialog.value.close();
-        },
-        extractCssClass() {
-          const regExp = /\..*{/g;
-          const result = code.value.match(regExp);
-          const cssNameArray: any[] = [];
-          if (!!result && result.length > 0) {
-            result.forEach((rItem: any) => {
-              const classArray = rItem.split(","); //切分逗号分割的多个class
-              if (classArray.length > 0) {
-                classArray.forEach((cItem: any) => {
-                  const caItem = cItem.trim();
-                  if (caItem.indexOf(".", 1) !== -1) {
-                    //查找第二个.位置
-                    const newClass = caItem.substring(caItem.indexOf(".") + 1, caItem.indexOf(".", 1)); //仅截取第一、二个.号之间的class
-                    if (newClass) {
-                      cssNameArray.push(newClass.trim());
-                    }
-                  } else if (caItem.indexOf(" ") !== -1) {
-                    //查找第一个空格位置
-                    const newClass = caItem.substring(caItem.indexOf(".") + 1, caItem.indexOf(" ")); //仅截取第一、二个.号之间的class
-                    if (newClass) {
-                      cssNameArray.push(newClass.trim());
-                    }
+      extractCssClass() {
+        const regExp = /\..*{/g;
+        const result = code.value.match(regExp);
+        const cssNameArray: any[] = [];
+        if (!!result && result.length > 0) {
+          result.forEach((rItem: any) => {
+            const classArray = rItem.split(","); //切分逗号分割的多个class
+            if (classArray.length > 0) {
+              classArray.forEach((cItem: any) => {
+                const caItem = cItem.trim();
+                if (caItem.indexOf(".", 1) !== -1) {
+                  //查找第二个.位置
+                  const newClass = caItem.substring(
+                    caItem.indexOf(".") + 1,
+                    caItem.indexOf(".", 1)
+                  ); //仅截取第一、二个.号之间的class
+                  if (newClass) {
+                    cssNameArray.push(newClass.trim());
+                  }
+                } else if (caItem.indexOf(" ") !== -1) {
+                  //查找第一个空格位置
+                  const newClass = caItem.substring(
+                    caItem.indexOf(".") + 1,
+                    caItem.indexOf(" ")
+                  ); //仅截取第一、二个.号之间的class
+                  if (newClass) {
+                    cssNameArray.push(newClass.trim());
+                  }
+                } else {
+                  if (caItem.indexOf("{") !== -1) {
+                    //查找第一个{位置
+                    const newClass = caItem.substring(
+                      caItem.indexOf(".") + 1,
+                      caItem.indexOf("{")
+                    );
+                    cssNameArray.push(newClass.trim());
                   } else {
-                    if (caItem.indexOf("{") !== -1) {
-                      //查找第一个{位置
-                      const newClass = caItem.substring(caItem.indexOf(".") + 1, caItem.indexOf("{"));
-                      cssNameArray.push(newClass.trim());
-                    } else {
-                      const newClass = caItem.substring(caItem.indexOf(".") + 1);
-                      cssNameArray.push(newClass.trim());
-                    }
+                    const newClass = caItem.substring(caItem.indexOf(".") + 1);
+                    cssNameArray.push(newClass.trim());
                   }
-                });
-              }
-            });
-          }
-          props.controlItems.find((item: any) => {
-            if (item.data.fieldName == "csslist") {
-              item.data.itemConfig.items = [];
-              cssNameArray.forEach((cssName: string, index: number) => {
-                item.data.itemConfig.items.push({
-                  label: cssName,
-                  value: cssName,
-                  select: false,
-                  id: index + 1,
-                });
+                }
               });
-              return item;
             }
           });
-        },
-        insertCustomCssToHead(cssCode:string) {
-          const head = document.getElementsByTagName("head")[0];
-          const oldStyle = document.getElementById("starfish-custom-css");
-          if (oldStyle) {
-            head.removeChild(oldStyle); //先清除后插入！！
-          }
-          const newStyle: any = document.createElement("style");
-          newStyle.type = "text/css";
-          newStyle.rel = "stylesheet";
-          newStyle.id = "starfish-custom-css";
-          try {
-            newStyle.appendChild(document.createTextNode(cssCode));
-          } catch (ex) {
-            newStyle.styleSheet.cssText = cssCode;
+        }
+        props.controlItems.find((item: any) => {
+          if (item.data.fieldName == "csslist") {
+            item.data.itemConfig.items = [];
+            cssNameArray.forEach((cssName: string, index: number) => {
+              item.data.itemConfig.items.push({
+                label: cssName,
+                value: cssName,
+                select: false,
+                id: index + 1,
+              });
+            });
+            return item;
           }
+        });
+      },
+      insertCustomCssToHead(cssCode: string) {
+        const head = document.getElementsByTagName("head")[0];
+        const oldStyle = document.getElementById("starfish-custom-css");
+        if (oldStyle) {
+          head.removeChild(oldStyle); //先清除后插入！！
+        }
+        const newStyle: any = document.createElement("style");
+        newStyle.type = "text/css";
+        newStyle.rel = "stylesheet";
+        newStyle.id = "starfish-custom-css";
+        try {
+          newStyle.appendChild(document.createTextNode(cssCode));
+        } catch (ex) {
+          newStyle.styleSheet.cssText = cssCode;
+        }
 
-          head.appendChild(newStyle);
-        },
-      };
-    },
-  });
+        head.appendChild(newStyle);
+      },
+    };
+  },
+});
 </script>
diff --git a/packages/editor/src/components/FormPreview.vue b/packages/editor/src/components/FormPreview.vue
@@ -70,12 +70,11 @@ import { Dynamicform } from "starfish-form";
 import uiControl from "@/controller/ui";
 import Clipboard from "clipboard";
 import { json } from "@codemirror/lang-json";
-// import { Codemirror } from "vue-codemirror";
-// import { json } from "@codemirror/lang-json";
+import { Codemirror } from "vue-codemirror";
 export default defineComponent({
   components: {
     Dynamicform,
-    // Codemirror,
+    Codemirror,
   },
   setup() {
     const previewShow = computed(() => formStore.get("previewShow"));
@@ -87,7 +86,6 @@ export default defineComponent({
     const codeDialog = ref();
     const code = ref();
     let clipboard: Clipboard;
-    // const extensions = [json()];
     const dynamicform = ref();
     const previewDialog = ref<any>();
     // let editor: any = null;

diff --git a/packages/editor/src/components/NavList.vue b/packages/editor/src/components/NavList.vue
@@ -235,13 +235,16 @@ import {
 import type {
   Controls,
   MenuBarData,
-  MenuItem,
   AllFormItem,
   BaseComponentItem,
 } from "@/type";
 import { clearCanvas } from "@/utils/formKeycon";
 import { json } from "@codemirror/lang-json";
+import { Codemirror } from "vue-codemirror";
 export default defineComponent({
+   components: {
+    Codemirror,
+  },
   props: {
     /** 顶部工具栏配置 */
     menu: {