style: 皮肤优化

haixin-fang · Mar 8, 2024 · c621fe4 · c621fe4
1 parent 5df33fb
commit c621fe4
Show file tree

Hide file tree

Showing 21 changed files with 774 additions and 359 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # vue-form-design
 
-Starfish 可视化动态表单平台及 h5 页面搭建平台。
+Starfish 可视化动态表单平台
 
 - 💪 Vue 3.0 Composition API
 - 🔥 Written in TypeScript

diff --git a/packages/editor/src/components/ComponentList.vue b/packages/editor/src/components/ComponentList.vue
@@ -1,21 +1,47 @@
 <template>
   <el-scrollbar class="editor_pages_left">
-    <el-input placeholder="请输入关键词进行过滤" size="" v-model="filterContent" />
+    <div class="filter">
+      <el-input
+        placeholder="请输入关键词进行过滤"
+        size=""
+        v-model="filterContent"
+      />
+    </div>
     <el-button text v-if="newcomponentlist.length > 0">基础控件</el-button>
-    <draggable class="dragArea list-group" :list="newcomponentlist" :group="{ name: 'starfish-form', pull: 'clone', put: false }" :sort="false" item-key="id">
+    <draggable
+      class="dragArea list-group"
+      :list="newcomponentlist"
+      :group="{ name: 'starfish-form', pull: 'clone', put: false }"
+      :sort="false"
+      item-key="id"
+    >
       <template #item="{ element }">
-        <div class="list-group-item" :alt="element.nameCn" @click.stop="clickAddControl(element)">
+        <div
+          class="list-group-item"
+          :alt="element.nameCn"
+          @click.stop="clickAddControl(element)"
+        >
           <div class="form-item">
             <span class="iconfont" :class="element.icon"></span>
           </div>
           <div class="item-text">{{ element.nameCn }}</div>
         </div>
       </template>
     </draggable>
-    <el-button text v-if='layoutList.length > 0'>布局控件</el-button>
-    <draggable class="dragArea list-group" :list="layoutList" :group="{ name: 'starfish-form', pull: 'clone', put: false }" :sort="false" item-key="id">
+    <el-button text v-if="layoutList.length > 0">布局控件</el-button>
+    <draggable
+      class="dragArea list-group"
+      :list="layoutList"
+      :group="{ name: 'starfish-form', pull: 'clone', put: false }"
+      :sort="false"
+      item-key="id"
+    >
       <template #item="{ element }">
-        <div class="list-group-item" :alt="element.nameCn" @click.stop="clickAddControl(element)">
+        <div
+          class="list-group-item"
+          :alt="element.nameCn"
+          @click.stop="clickAddControl(element)"
+        >
           <div class="form-item">
             <span class="iconfont" :class="element.icon"></span>
           </div>
@@ -26,91 +52,105 @@
   </el-scrollbar>
 </template>
 <script lang="ts">
-  import { defineComponent } from "vue";
-  import formStore from '@/controller/form';
-  import {BaseComponentItem} from '@/type';
-  export default defineComponent({
-    props: {
-      basicFields: {
-        type: Array,
-        default(){
-          return [];
-        }
+import { defineComponent } from "vue";
+import formStore from "@/controller/form";
+import { BaseComponentItem } from "@/type";
+export default defineComponent({
+  props: {
+    basicFields: {
+      type: Array,
+      default() {
+        return [];
       },
-      layoutFields: {
-        type: Array,
-        default(){
-          return []
-        }
-      }
     },
-    data() {
-      const formcomponents: typeof this.$formcomponents = this.$formcomponents;
-      const lastFormComponents = [];
-      for (const key in formcomponents) {
-        const item = formcomponents[key];
-        if (item.isHide) {
-          continue;
-        }
-        const model: BaseComponentItem | Record<string, any> = {};
-        model.ControlType = item.ControlType;
-        model.icon = item.icon;
-        model.nameCn = item.nameCn;
-        model.layout = !!item.layout
-        // 有json编辑器时，验证格式有固定的规则
-        if (item.rule) {
-          model.rule = item.rule;
-        }
-        lastFormComponents.push(model);
-      }
-      return {
-        formcomponents: lastFormComponents,
-        filterContent: "",
-      };
-    },
-    computed: {
-      newcomponentlist() {
-        return (this as any).formcomponents.filter((item: BaseComponentItem) => {
-          if (item.nameCn && item.nameCn.indexOf(this.filterContent) != -1 && !item.layout) {
-            if(this.basicFields.length == 0){
-              return true;
-            }else if(this.basicFields.length > 0){
-              let isHave = false;
-              this.basicFields.find((fieldItem: any) => {
-                if(fieldItem.toLocaleLowerCase() == (item.ControlType as string).toLocaleLowerCase()){
-                  isHave = true;
-                  return fieldItem;
-                }
-              })
-              return isHave;
-            }
-          }
-        });
+    layoutFields: {
+      type: Array,
+      default() {
+        return [];
       },
-      layoutList(){
-        return (this as any).formcomponents.filter((item:any) => {
-          if(item.nameCn && item.nameCn.indexOf(this.filterContent) != -1 && item.layout){
-            if(this.layoutFields.length == 0){
-              return true;
-            }else if(this.layoutFields.length > 0){
-              let isHave = false;
-              this.layoutFields.find((fieldItem: any) => {
-                if(fieldItem.toLocaleLowerCase() == item.ControlType.toLocaleLowerCase()){
-                  isHave = true;
-                  return fieldItem;
-                }
-              })
-              return isHave;
-            }
-          }
-        })
-      }
     },
-    methods: {
-      clickAddControl(item:any){
-       formStore.setAllFormList((this as any).$Flex.jsonToForm(item));
+  },
+  data() {
+    const formcomponents: any = this.$formcomponents;
+    const lastFormComponents = [];
+    for (const key in formcomponents) {
+      const item = formcomponents[key];
+      if (item.isHide) {
+        continue;
+      }
+      const model: BaseComponentItem | Record<string, any> = {};
+      model.ControlType = item.ControlType;
+      model.icon = item.icon;
+      model.nameCn = item.nameCn;
+      model.layout = !!item.layout;
+      // 有json编辑器时，验证格式有固定的规则
+      if (item.rule) {
+        model.rule = item.rule;
       }
+      lastFormComponents.push(model);
     }
-  });
+    return {
+      formcomponents: lastFormComponents,
+      filterContent: "",
+    };
+  },
+  computed: {
+    newcomponentlist() {
+      return (this as any).formcomponents.filter((item: BaseComponentItem) => {
+        if (
+          item.nameCn &&
+          item.nameCn.indexOf(this.filterContent) != -1 &&
+          !item.layout
+        ) {
+          if (this.basicFields.length == 0) {
+            return true;
+          } else if (this.basicFields.length > 0) {
+            let isHave = false;
+            this.basicFields.find((fieldItem: any) => {
+              if (
+                fieldItem.toLocaleLowerCase() ==
+                (item.ControlType as string).toLocaleLowerCase()
+              ) {
+                isHave = true;
+                return fieldItem;
+              }
+            });
+            return isHave;
+          }
+        }
+      });
+    },
+    layoutList() {
+      return (this as any).formcomponents.filter((item: any) => {
+        if (
+          item.nameCn &&
+          item.nameCn.indexOf(this.filterContent) != -1 &&
+          item.layout
+        ) {
+          if (this.layoutFields.length == 0) {
+            return true;
+          } else if (this.layoutFields.length > 0) {
+            let isHave = false;
+            this.layoutFields.find((fieldItem: any) => {
+              if (
+                fieldItem.toLocaleLowerCase() ==
+                item.ControlType.toLocaleLowerCase()
+              ) {
+                isHave = true;
+                return fieldItem;
+              }
+            });
+            return isHave;
+          }
+        }
+      });
+    },
+  },
+  methods: {
+    clickAddControl(item: any) {
+      formStore.setAllFormList((this as any).$Flex.jsonToForm(item));
+    },
+  },
+});
 </script>
 
diff --git a/packages/editor/src/components/Nav.vue b/packages/editor/src/components/Nav.vue
@@ -1,19 +1,128 @@
 <template>
   <div class="header_nav">
     <div class="logo">
-      <div><span>starfish</span> 表单设计器</div>
+      <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>
+      <!-- <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({});
+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>