diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
index 3e766ab..7287c75 100644
--- a/src/component/form-designer/src/FormDesigner.vue
+++ b/src/component/form-designer/src/FormDesigner.vue
@@ -498,6 +498,13 @@ export default {
       this.widgetFormSelect = {};
     },
   },
+  watch: {
+    widgetFormSelect(val) {
+      if (val) {
+        this.configTab = 'widget';
+      }
+    },
+  },
 };
 </script>
 
diff --git a/src/component/form-designer/src/WidgetForm.vue b/src/component/form-designer/src/WidgetForm.vue
index 89924b0..83ae071 100644
--- a/src/component/form-designer/src/WidgetForm.vue
+++ b/src/component/form-designer/src/WidgetForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="widget-form-container">
     <div v-if="data.list.length == 0" class="form-empty">
-      拖拽左侧组件添加字段!
+      <SvgIcon icon-class="form_empty" class="form-empty-icon"></SvgIcon> 拖拽组件至这里吧!
     </div>
     <el-form
       :label-position="data.config.labelPosition"
@@ -139,6 +139,7 @@
 
 <script>
 import Draggable from 'vuedraggable';
+import SvgIcon from '@/icons/SvgIcon.vue';
 import WidgetFormItem from './WidgetFormItem.vue';
 import WidgetSubForm from './components/SubForm/WidgetSubForm.vue';
 import WidgetTabs from './components/Tabs/WidgetTabs.vue';
@@ -149,6 +150,7 @@ export default {
     WidgetFormItem,
     WidgetSubForm,
     WidgetTabs,
+    SvgIcon,
   },
   // 这里的data从父组件接收和设计器实时对应的json
   props: ['data', 'select'],
diff --git a/src/component/form-designer/src/styles/index.scss b/src/component/form-designer/src/styles/index.scss
index 5eef0e7..3e3914c 100644
--- a/src/component/form-designer/src/styles/index.scss
+++ b/src/component/form-designer/src/styles/index.scss
@@ -1,4 +1,4 @@
-$primary-color: #409eff;
+$primary-color: #1861d5;
 $primary-background-color: #ecf5ff;
 
 *,
@@ -243,7 +243,7 @@ $primary-background-color: #ecf5ff;
         outline-offset: 0px;
 
         &.active {
-          outline: 2px solid $primary-color;
+          outline: 1px solid $primary-color;
           border: 1px solid $primary-color;
           outline-offset: 0;
         }
@@ -254,13 +254,13 @@ $primary-background-color: #ecf5ff;
       }
 
       &.active {
-        outline: 2px solid $primary-color;
+        outline: 1px solid $primary-color;
         border: 1px solid $primary-color;
       }
 
       &.ghost {
         background: #f56c6c;
-        border: 2px solid #f56c6c;
+        border: 1px solid #f56c6c;
         outline-width: 0;
         height: 3px;
         box-sizing: border-box;
@@ -377,28 +377,28 @@ $primary-background-color: #ecf5ff;
       }
 
       &.active {
-        outline: 2px solid #e6a23c;
-        border: 2px solid #e6a23c;
+        outline: 1px solid #c11e72;
+        border: 1px solid #c11e72;
       }
 
       &:hover {
         background: #fdf6ec;
-        outline: 1px solid #e6a23c;
+        outline: 1px solid #c11e72;
         outline-offset: 0px;
 
         &.active {
-          outline: 2px solid #e6a23c;
-          border: 1px solid #e6a23c;
+          outline: 1px solid #c11e72;
+          border: 1px solid #c11e72;
           outline-offset: 0;
         }
       }
 
       .widget-view-action.widget-col-action {
-        background: #e6a23c;
+        background: #c11e72;
       }
 
       .widget-view-drag.widget-col-drag {
-        background: #e6a23c;
+        background: #c11e72;
       }
 
       &::after {
@@ -440,18 +440,18 @@ $primary-background-color: #ecf5ff;
       background-color: rgba(253, 246, 236, 0.3);
 
       &.active {
-        outline: 2px solid #e6a23c;
-        border: 1px solid #e6a23c;
+        outline: 1px solid #c11e72;
+        border: 1px solid #c11e72;
       }
 
       &:hover {
         background: #fdf6ec;
-        outline: 1px solid #e6a23c;
+        outline: 1px solid #c11e72;
         outline-offset: 0px;
 
         &.active {
-          outline: 2px solid #e6a23c;
-          border: 1px solid #e6a23c;
+          outline: 1px solid #c11e72;
+          border: 1px solid #c11e72;
           outline-offset: 0;
         }
       }
@@ -462,7 +462,7 @@ $primary-background-color: #ecf5ff;
 
       &.ghost {
         background: #f56c6c;
-        border: 2px solid #f56c6c;
+        border: 1px solid #f56c6c;
         outline-width: 0;
         height: 3px;
         box-sizing: border-box;
@@ -473,7 +473,7 @@ $primary-background-color: #ecf5ff;
       }
 
       .widget-view-action.widget-col-action {
-        background: #e6a23c;
+        background: #c11e72;
         i {
           color: white !important;
           &:hover {
@@ -483,7 +483,7 @@ $primary-background-color: #ecf5ff;
       }
 
       .widget-view-drag.widget-col-drag {
-        background: #e6a23c;
+        background: #c11e72;
       }
 
       &::after {
@@ -493,7 +493,7 @@ $primary-background-color: #ecf5ff;
 
     .ghost {
       background: #f56c6c;
-      border: 2px solid #f56c6c;
+      border: 1px solid #f56c6c;
       outline-width: 0;
       height: 3px;
       box-sizing: border-box;
@@ -506,7 +506,7 @@ $primary-background-color: #ecf5ff;
 
   .ghost {
     background: #f56c6c;
-    border: 2px solid #f56c6c;
+    border: 1px solid #f56c6c;
     position: relative;
 
     &::after {
@@ -537,7 +537,7 @@ $primary-background-color: #ecf5ff;
   .widget-grid-container {
     &.ghost {
       background: #f56c6c;
-      border: 2px solid #f56c6c;
+      border: 1px solid #f56c6c;
       outline-width: 0;
       height: 3px;
       box-sizing: border-box;
@@ -550,7 +550,7 @@ $primary-background-color: #ecf5ff;
 
   .ghost {
     background: #f56c6c;
-    border: 2px solid #f56c6c;
+    border: 1px solid #f56c6c;
     position: relative;
 
     &::after {
@@ -594,7 +594,7 @@ $primary-background-color: #ecf5ff;
     &.active {
       background: none;
       box-sizing: border-box;
-      border-top: 2px solid #1861d5;
+      border-top: 1px solid #1861d5;
       border-bottom: none!important;
     }
     &:not(.active):hover{
@@ -658,10 +658,14 @@ $primary-background-color: #ecf5ff;
   text-align: center;
   width: 300px;
   font-size: 20px;
-  top: 40%;
+  top: 24%;
   left: 50%;
   margin-left: -150px;
   color: #aaa;
+  .form-empty-icon{
+    width: 16em;
+    height: 16em;
+  }
 }
 
 .header {
diff --git a/src/icons/svg/form_empty.svg b/src/icons/svg/form_empty.svg
new file mode 100644
index 0000000..a61ebe5
--- /dev/null
+++ b/src/icons/svg/form_empty.svg
@@ -0,0 +1 @@
+<svg id="b511d523-d0bd-4630-9f8f-4ef2adb48046" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="888" height="664.79542" viewBox="0 0 888 664.79542"><title>selected_options</title><path d="M1007.71574,708.095l3.32283-13.10586a170.18275,170.18275,0,0,1,18.0553-6.47768l.41956,6.09082,1.70126-6.71023c7.60894-2.17275,12.78531-3.12981,12.78531-3.12981s-6.99208,26.58871-21.65745,46.91612L1005.25418,734.68l13.27549,1.91408a68.85146,68.85146,0,0,1-5.93832,6.29308c-21.334,19.80249-45.096,28.888-53.074,20.293s2.84919-31.61568,24.18316-51.41817c6.61374-6.139,14.922-11.06543,23.23852-14.94266Z" transform="translate(-156 -117.60229)" fill="#e6e6e6"/><path d="M976.11309,693.86231l-3.93-12.93677a170.18364,170.18364,0,0,1,12.10783-14.878l3.50751,4.99714-2.01216-6.62363c5.3905-5.793,9.327-9.288,9.327-9.288s7.75821,26.37535,5.71126,51.35707l-13.07684,11.40258,12.3538-5.22358a68.84952,68.84952,0,0,1-1.83056,8.45669c-8.0269,27.97938-23.672,48.03959-34.94424,44.80572s-13.90316-28.53719-5.87625-56.51657c2.48842-8.67388,7.05416-17.18571,12.16934-24.80362Z" transform="translate(-156 -117.60229)" fill="#e6e6e6"/><rect x="370" y="647.39771" width="516" height="2" fill="#3f3d56"/><path d="M180.21808,378.97731c-6.98427-10.3673-9.98664-28.78031,3.00237-37.85456,6.44187-4.50035,14.262-3.95126,21.03212-1.97089,9.36452,2.73927,17.69214,8.32329,24.89548,14.571,8.3086,7.20635,15.42224,15.65468,22.43635,24.10649,6.9244,8.34371,13.94215,16.5903,21.30341,24.54338a503.43192,503.43192,0,0,0,46.375,44.0945,499.577,499.577,0,0,0,50.53953,37.186q13.11333,8.42559,26.78743,15.99327a238.92042,238.92042,0,0,0,26.21277,12.99586c11.96425,4.81093,32.46454,11.53456,43.0744-1.96168,5.62565-7.15609,5.907-16.86645,4.63661-25.02247-1.53606-9.86168-5.40831-19.06443-9.22389-28.05359-17.748-41.81254-35.703-83.5249-53.55544-125.28615-4.16656-9.7466-8.4576-19.456-11.91868-29.52936-3.24042-9.43112-5.93783-19.37463-6.00169-29.64634-.05577-8.97153,1.89337-19.09578,8.71819-26.0063,5.66-5.73106,13.59015-7.62805,21.05757-7.58452,18.48784.10779,35.859,9.51839,50.21831,19.43713,17.84,12.323,33.59693,27.29266,51.36809,39.70846,14.34917,10.025,31.22424,19.10977,49.53692,20.25984,7.02133.441,14.47285-.49546,20.86931-4.33146a28.85123,28.85123,0,0,0,12.48051-16.79146c2.39772-8.06922,2.09843-16.59281.82656-24.54633a101.37536,101.37536,0,0,0-8.56819-26.87435c-8.65771-18.50073-20.489-35.08-30.67707-52.63923-4.99645-8.61144-9.87633-17.48623-12.99023-27.09092-2.63816-8.13727-4.78442-17.76841-2.17788-26.59095,5.37791-18.203,27.24194-11.35342,38.32806-6.09887a177.48574,177.48574,0,0,1,21.66571,12.61759c1.48957.9843,2.93817-1.62685,1.45555-2.60655a170.43791,170.43791,0,0,0-22.8347-13.16235c-6.75758-3.09246-14.19772-5.79006-21.95043-5.64179-6.51122.12453-13.07433,2.852-16.89595,8.6776-4.52163,6.89266-4.20993,15.804-2.99295,23.19885,1.60932,9.7789,5.45137,18.81254,9.88162,27.40793,4.66586,9.05252,9.98952,17.708,15.34518,26.32494,10.7018,17.21853,22.42611,34.63766,27.76337,54.73954,3.73358,14.0619,6.0925,36.025-9.10472,46.06011-6.74614,4.45466-15.01263,5.0994-22.47742,4.26022-9.02144-1.01417-17.61424-4.01246-25.63916-7.7789-37.42094-17.56329-62.34908-54.03129-102.24349-67.51755-13.56433-4.58541-32.54594-7.51325-44.48254,4.88649-6.20081,6.4414-8.68787,15.38432-9.24645,23.78766-.669,10.06484,1.43195,19.96977,4.2873,29.29081a289.7511,289.7511,0,0,0,11.03812,28.738q6.70863,15.71874,13.43495,31.42878l27.18342,63.58869,13.50624,31.59438c4.12215,9.64272,8.54031,19.33259,10.689,29.78609,1.75935,8.55921,2.25836,20.33683-5.28069,27.22252-5.98731,5.46843-14.7354,5.21516-21.74443,3.94539-9.0759-1.6442-17.61415-5.2383-25.74053-9.20316-9.37323-4.57318-18.49766-9.64636-27.45592-14.92323a485.73032,485.73032,0,0,1-52.98419-36.17858,504.95011,504.95011,0,0,1-48.04469-42.8481q-11.439-11.59392-22.10772-23.92686c-7.32928-8.47722-14.21225-17.35562-21.80345-25.59852-6.86636-7.45585-14.38334-14.36733-23.12223-19.62569-7.29679-4.39062-15.9229-8.06213-24.89718-7.77313a22.56809,22.56809,0,0,0-16.57186,7.9519,27.83279,27.83279,0,0,0-6.1442,17.62814,35.86624,35.86624,0,0,0,6.40246,20.22339c.99774,1.481,3.52823-.10357,2.52606-1.59116Z" transform="translate(-156 -117.60229)" fill="#e6e6e6"/><rect x="18.79499" y="20.13724" width="119.81946" height="106.38679" fill="#e6e6e6"/><rect x="18.79499" y="211.63346" width="119.81946" height="106.38679" fill="#2077ff"/><rect x="403.79499" y="20.13724" width="119.81946" height="106.38679" fill="#2077ff"/><rect x="403.79499" y="211.63346" width="119.81946" height="106.38679" fill="#e6e6e6"/><rect x="212.65536" y="20.13724" width="119.81946" height="106.38679" fill="#2077ff"/><rect x="212.65536" y="211.63346" width="119.81946" height="106.38679" fill="#2077ff"/><circle cx="213" cy="20" r="20" fill="#3f3d56"/><circle cx="406" cy="20" r="20" fill="#3f3d56"/><circle cx="20" cy="212" r="20" fill="#3f3d56"/><circle cx="213" cy="212" r="20" fill="#3f3d56"/><path d="M835.30029,754.74036s-27.95189,2.15015-25.085,12.18416,25.085,8.60058,25.085,8.60058,17.20116-1.43343,26.51846,1.43343,20.068,0,20.78474-5.017-5.017-8.60058-5.017-8.60058l-3.58357-7.16715Z" transform="translate(-156 -117.60229)" fill="#2f2e41"/><path d="M761.837,530.7669l-2.86686,11.46744S746.06926,568.7528,761.837,568.7528s10.034-24.36832,10.034-24.36832l1.43343-11.46744Z" transform="translate(-156 -117.60229)" fill="#9f616a"/><path d="M900.163,521.4496l2.86686,11.46744s12.90087,26.51846-2.86686,26.51846-10.034-24.36831-10.034-24.36831l-1.43343-11.46744Z" transform="translate(-156 -117.60229)" fill="#9f616a"/><circle cx="669.62464" cy="178.08206" r="30.81875" fill="#9f616a"/><path d="M816.30734,319.336s3.58358,16.48444,1.43343,24.36831,44.43634-1.43343,44.43634-1.43343-16.48445-27.23517-15.76774-27.95189Z" transform="translate(-156 -117.60229)" fill="#9f616a"/><path d="M823.47449,337.97054s-12.90087-3.58358-17.20116.71671S776.888,355.1717,776.888,355.1717l17.20116,105.35712,74.53837-16.48445,12.90087-99.6234s-20.32436-11.918-23.77976-9.54255S823.47449,337.97054,823.47449,337.97054Z" transform="translate(-156 -117.60229)" fill="#d0cde1"/><path d="M782.62173,355.88842l-3.44-1.84491s-13.04444,2.56162-12.32772,12.59563,3.58358,65.93779,3.58358,65.93779L758.97013,533.63376l20.78474,3.58357L800.53961,452.645Z" transform="translate(-156 -117.60229)" fill="#d0cde1"/><path d="M879.37827,346.57112l3.44-1.84491s13.04444,2.56162,12.32772,12.59564-3.58358,65.93778-3.58358,65.93778l11.46745,101.05683L882.24513,527.9l-20.78474-84.57238Z" transform="translate(-156 -117.60229)" fill="#d0cde1"/><path d="M794.80589,449.77809,791.939,493.49771l-9.3173,87.43924,13.61759,181.32892,47.30319,1.43343L829.20821,590.971l14.3343-59.48735,46.85455-1.73535s3.31551-68.50273-23.20295-90.00418Z" transform="translate(-156 -117.60229)" fill="#2f2e41"/><polygon points="690.409 403.847 682.884 561.883 680.375 641.797 722.662 646.097 733.331 411.08 716.928 394.53 690.409 403.847" fill="#2f2e41"/><path d="M839.24222,254.83159s-27.95188-3.58358-35.83575,10.034c0,0-2.15015,10.034-9.3173,13.61759s1.43343,15.76773,3.58358,19.3513,7.88386,24.36832,1.43343,29.38532,11.46744,19.35131,11.46744,19.35131,8.60058,11.46744,1.43343,20.068,9.3173,11.46744,9.3173,11.46744-3.58358,24.36832,2.86686,17.91788c0,0,2.86686,55.18706,30.102,20.78474s38.70262-50.88677,27.23517-64.50436-2.86686-25.80174-2.86686-25.80174,3.58358-7.16715-4.30029-17.91788S866.4774,254.83159,839.24222,254.83159Z" transform="translate(-156 -117.60229)" fill="#2f2e41"/><path d="M798.74782,759.04065s-27.95189,2.15015-25.085,12.18416,25.085,8.60058,25.085,8.60058,17.20116-1.43343,26.51846,1.43343,20.068,0,20.78474-5.017-5.017-8.60059-5.017-8.60059l-3.58357-7.16715Z" transform="translate(-156 -117.60229)" fill="#2f2e41"/></svg>
\ No newline at end of file