替换字体图标，发布3.0 Beta版。

src/components/form-designer/designer.js

@@ -24,6 +24,7 @@ export function createDesigner(vueInstance) {
     customClass: '',
     functions: '',
     layoutType: 'PC',
+    jsonVersion: 3,
 
     onFormCreated: '',
     onFormMounted: '',

src/components/form-designer/form-widget/field-widget/cascader-widget.vue

@@ -2,16 +2,17 @@
   <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
                      :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
                      :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
-    <el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel"
-                 style="width: 100%" class="full-width-input"
-                 :disabled="field.options.disabled"
-                 :size="field.options.size"
-                 :clearable="field.options.clearable"
-                 :filterable="field.options.filterable"
-                 :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
-                 @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                 @change="handleChangeEvent">
-    </el-cascader>
+    <div class="full-width-input">
+      <el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel"
+                   :disabled="field.options.disabled"
+                   :size="field.options.size"
+                   :clearable="field.options.clearable"
+                   :filterable="field.options.filterable"
+                   :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
+                   @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+                   @change="handleChangeEvent">
+      </el-cascader>
+    </div>
   </form-item-wrapper>
 </template>
 
@@ -99,7 +100,11 @@
   @import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
 
   .full-width-input {
-    width: 100% !important;  /* 没生效？？改用内联样式style */
+    width: 100% !important;
+
+    :deep(.el-cascader) {
+      width: 100% !important;
+    }
   }
 
 </style>

src/components/form-designer/form-widget/field-widget/file-upload-widget.vue

@@ -16,15 +16,17 @@
              v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
       </template>
       <template #default>
-        <i class="el-icon-plus avatar-uploader-icon"></i>
+        <svg-icon icon-class="el-plus" /><i class="el-icon-plus avatar-uploader-icon"></i>
       </template>
       <template #file="{ file }">
         <div class="upload-file-list">
           <span class="upload-file-name" :title="file.name">{{file.name}}</span>
           <a :href="file.url" download="">
-            <i class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')"></i></a>
-          <i class="el-icon-delete file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
-            @click="removeUploadFile(file.name)"></i>
+            <span class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')">
+              <svg-icon icon-class="el-download" />
+            </span></a>
+          <span class="file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
+            @click="removeUploadFile(file.name)"><svg-icon icon-class="el-delete" /></span>
         </div>
       </template>
     </el-upload>
@@ -37,6 +39,7 @@
   import i18n, {translate} from "@/utils/i18n";
   import {deepClone} from "@/utils/util";
   import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+  import SvgIcon from "@/components/svg-icon/index";
 
   let selectFileText = "'" + translate('render.hint.selectFile') + "'"
 
@@ -71,6 +74,7 @@
 
     },
     components: {
+      SvgIcon,
       FormItemWrapper,
     },
     inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],

src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue

@@ -22,16 +22,16 @@
           <template v-if="field.options.labelIconPosition === 'front'">
             <template v-if="!!field.options.labelTooltip">
               <el-tooltip :content="field.options.labelTooltip" effect="light">
-                <i :class="field.options.labelIconClass"></i></el-tooltip>{{label}}</template>
+                <svg-icon :icon-class="field.options.labelIconClass" /></el-tooltip>{{label}}</template>
             <template v-else>
-              <i :class="field.options.labelIconClass"></i>{{label}}</template>
+              <svg-icon :icon-class="field.options.labelIconClass" />{{label}}</template>
           </template>
           <template v-else-if="field.options.labelIconPosition === 'rear'">
             <template v-if="!!field.options.labelTooltip">
               {{label}}<el-tooltip :content="field.options.labelTooltip" effect="light">
-              <i :class="field.options.labelIconClass"></i></el-tooltip></template>
+              <svg-icon :icon-class="field.options.labelIconClass" /></el-tooltip></template>
             <template v-else>
-              {{label}}<i :class="field.options.labelIconClass"></i></template>
+              {{label}}<svg-icon :icon-class="field.options.labelIconClass" /></template>
           </template>
         </span>
       </template>

src/components/form-designer/form-widget/field-widget/input-widget.vue

@@ -16,7 +16,7 @@
               @change="handleChangeEvent">
       <template #append v-if="field.options.appendButton">
         <el-button :disabled="field.options.disabled || field.options.appendButtonDisabled"
-                   :class="field.options.buttonIcon" @click="emitAppendButtonClick"></el-button>
+                   @click="emitAppendButtonClick"><svg-icon :icon-class="field.options.buttonIcon" /></el-button>
       </template>
     </el-input>
   </form-item-wrapper>

src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue

@@ -15,7 +15,7 @@
         <div class="el-upload__tip"
              v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
       </template>
-      <i class="el-icon-plus avatar-uploader-icon"></i>
+      <div class="uploader-icon"><svg-icon icon-class="el-plus" /></div>
     </el-upload>
   </form-item-wrapper>
 </template>
@@ -222,4 +222,13 @@
     }
   }
 
+  .uploader-icon {
+    height: 100%;
+    display: flex;
+    color: #8c939d;
+    font-size: 28px;
+    justify-content: center;
+    align-items: center;
+  }
+
 </style>

src/components/form-designer/index.vue

@@ -13,10 +13,10 @@
     <el-header class="main-header">
       <div class="float-left main-title">
         <img src="../../assets/vform-logo.png" @click="openHome">
-        <span class="bold">VForm</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div>
+        <span class="bold">VForm 3</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div>
       <div class="float-right external-link">
         <el-dropdown v-if="showLink('languageMenu')" @command="handleLanguageChanged">
-          <span class="el-dropdown-link">{{curLangName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
+          <span class="el-dropdown-link">{{curLangName}}<svg-icon icon-class="el-arrow-down" /></span>
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item command="zh-CN">{{i18nt('application.zh-CN')}}</el-dropdown-item>
@@ -72,12 +72,14 @@
   import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
   import i18n, { changeLocale } from "@/utils/i18n"
   import axios from 'axios'
+  import SvgIcon from "@/components/svg-icon/index";
 
   export default {
     name: "VFormDesigner",
     componentName: "VFormDesigner",
     mixins: [i18n],
     components: {
+      SvgIcon,
       WidgetPanel,
       ToolbarPanel,
       SettingPanel,

src/components/form-designer/setting-panel/form-setting.vue

@@ -300,8 +300,8 @@
       white-space: nowrap;
     }
 
-    :deep(.el-form-item--mini.el-form-item) {
-      margin-bottom: 6px;
+    :deep(.el-form-item--small.el-form-item) {
+      margin-bottom: 10px;
     }
 
     .radio-group-custom {

src/components/form-designer/setting-panel/index.vue

@@ -312,8 +312,8 @@
       white-space: nowrap;
     }
 
-    :deep(.el-form-item--mini.el-form-item) {
-      margin-bottom: 6px;
+    :deep(.el-form-item--small.el-form-item) {
+      margin-bottom: 10px;
     }
   }
 

src/components/form-designer/setting-panel/option-items-setting.vue

@@ -34,11 +34,12 @@
         </template>
       </draggable>
     </el-checkbox-group>
-    <el-cascader v-else-if="(selectedWidget.type === 'cascader')"
-                 v-model="optionModel.defaultValue" :options="optionModel.optionItems"
-                 @change="emitDefaultValueChange"
-                :placeholder="i18nt('render.hint.selectPlaceholder')" style="width: 100%">
-    </el-cascader>
+    <div v-else-if="(selectedWidget.type === 'cascader')" class="full-width-input">
+      <el-cascader v-model="optionModel.defaultValue" :options="optionModel.optionItems"
+                   @change="emitDefaultValueChange"
+                   :placeholder="i18nt('render.hint.selectPlaceholder')">
+      </el-cascader>
+    </div>
     <div v-if="(selectedWidget.type === 'cascader')">
       <el-button type="text" @click="importCascaderOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
       <el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
@@ -222,9 +223,13 @@
 </script>
 
 <style lang="scss" scoped>
-  .option-items-pane ul {
-    padding-inline-start: 6px;
-    padding-left: 6px;  /* 重置IE11默认样式 */
+  .option-items-pane {
+    width: 100%;
+
+    ul {
+      padding-inline-start: 6px;
+      padding-left: 6px; /* 重置IE11默认样式 */
+    }
   }
 
   li.ghost{
@@ -243,4 +248,13 @@
   .dialog-footer .el-button {
     width: 100px;
   }
+
+  .full-width-input {
+    width: 100% !important;
+
+    :deep(.el-cascader) {
+      width: 100% !important;
+    }
+  }
+
 </style>

src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue

@@ -3,7 +3,7 @@
     <template #label>
       <span>{{i18nt('designer.setting.fileTypes')}}
         <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
-          <i class="el-icon-info"></i></el-tooltip>
+          <svg-icon icon-class="el-info" /></el-tooltip>
       </span>
     </template>
     <el-select multiple allow-create filterable default-first-option

src/components/form-designer/setting-panel/property-editor/field-picture-upload/picture-upload-fileTypes-editor.vue

@@ -3,7 +3,7 @@
     <template #label>
       <span>{{i18nt('designer.setting.fileTypes')}}
         <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
-          <i class="el-icon-info"></i></el-tooltip>
+          <svg-icon icon-class="el-info" /></el-tooltip>
       </span>
     </template>
     <el-select multiple allow-create filterable default-first-option
@@ -31,9 +31,9 @@
     data() {
       return {
         uploadPictureTypes: [
-          {value: 'jpeg', label: 'JPG'},
-          {value: 'png', label: 'PNG'},
-          {value: 'gif', label: 'GIF'},
+          {value: 'jpeg', label: 'jpg'}, /* label如用大写字母，选择两个文件类型就会导致设置面板快速抖动、闪烁，非常奇怪！！ */
+          {value: 'png', label: 'png'},
+          {value: 'gif', label: 'gif'},
         ],
       }
     }

src/components/form-designer/toolbar-panel/index.vue

@@ -454,6 +454,15 @@
         try {
           let importObj = JSON.parse(this.importTemplate)
           //console.log('test import', this.importTemplate)
+          if (!importObj || !importObj.formConfig) {
+            throw new Error( this.i18nt('designer.hint.invalidJsonFormat') )
+          }
+
+          let fJsonVer = importObj.formConfig.jsonVersion
+          if (!fJsonVer || (fJsonVer !== 3)) {
+            throw new Error( this.i18nt('designer.hint.jsonVersionMismatch') )
+          }
+
           this.designer.loadFormJson(importObj)
 
           this.showImportJsonDialogFlag = false

src/components/form-designer/widget-panel/index.vue

@@ -5,7 +5,7 @@
     <el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
       <el-tab-pane name="componentLib">
         <template #label>
-          <span><i class="el-icon-set-up"></i> {{i18nt('designer.componentLib')}}</span>
+          <span><svg-icon icon-class="el-set-up" /> {{i18nt('designer.componentLib')}}</span>
         </template>
 
       <el-collapse v-model="activeNames" class="widget-collapse">
@@ -61,7 +61,7 @@
 
       <el-tab-pane v-if="showFormTemplates()" name="formLib" style="padding: 8px">
         <template #label>
-          <span><i class="el-icon-c-scale-to-original"></i> {{i18nt('designer.formLib')}}</span>
+          <span><svg-icon icon-class="el-form-template" /> {{i18nt('designer.formLib')}}</span>
         </template>
 
         <template v-for="(ft, idx) in formTemplates">

src/components/form-designer/widget-panel/widgetsConfig.js

@@ -146,7 +146,7 @@ export const basicFields = [
       suffixIcon: '',
       appendButton: false,
       appendButtonDisabled: false,
-      buttonIcon: 'el-icon-search',
+      buttonIcon: 'custom-search',
       //-------------------
       onCreated: '',
       onMounted: '',

src/components/form-render/container-item/sub-form-item.vue

@@ -8,7 +8,7 @@
           <span class="action-label">{{i18nt('render.hint.subFormAction')}}</span>
           <el-button :disabled="actionDisabled" round type="primary" size="small" class="action-button" @click="addSubFormRow"
                      :title="i18nt('render.hint.subFormAddActionHint')">
-            {{i18nt('render.hint.subFormAddAction')}}<i class="el-icon-plus el-icon-right"></i></el-button>
+            {{i18nt('render.hint.subFormAddAction')}}<svg-icon icon-class="el-plus" /></el-button>
         </div>
         <template v-for="(subWidget) in widget.widgetList" :key="subWidget.id + 'thc'">
           <div class="field-header-column"
@@ -18,16 +18,16 @@
               <template v-if="subWidget.options.labelIconPosition === 'front'">
                 <template v-if="!!subWidget.options.labelTooltip">
                   <el-tooltip :content="subWidget.options.labelTooltip" effect="light">
-                    <i :class="subWidget.options.labelIconClass"></i></el-tooltip>{{subWidget.options.label}}</template>
+                    <svg-icon :icon-class="subWidget.options.labelIconClass" /></el-tooltip>{{subWidget.options.label}}</template>
                 <template v-else>
-                  <i :class="subWidget.options.labelIconClass"></i>{{subWidget.options.label}}</template>
+                  <svg-icon :icon-class="subWidget.options.labelIconClass" />{{subWidget.options.label}}</template>
               </template>
               <template v-else-if="subWidget.options.labelIconPosition === 'rear'">
                 <template v-if="!!subWidget.options.labelTooltip">
                   {{subWidget.options.label}}<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
-                  <i :class="subWidget.options.labelIconClass"></i></el-tooltip></template>
+                  <svg-icon :icon-class="subWidget.options.labelIconClass" /></el-tooltip></template>
                 <template v-else>
-                  {{subWidget.options.label}}<i :class="subWidget.options.labelIconClass"></i></template>
+                  {{subWidget.options.label}}<svg-icon :icon-class="subWidget.options.labelIconClass" /></template>
               </template>
             </span>
             <template v-else>