先提再说

package.json

@@ -15,12 +15,10 @@
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
     "@antv/x6": "^1.29.1",
-    "@antv/x6-vue-shape": "1.5.4",
     "@fullcalendar/interaction": "^5.10.1",
     "@fullcalendar/timegrid": "^5.10.1",
     "@fullcalendar/vue": "^5.10.1",
     "@tinymce/tinymce-vue": "^2.1.0",
-    "@vue/composition-api": "^1.5.0",
     "axios": "^0.15.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -129,33 +129,44 @@
               <el-option :label="s.name" :value="s.value" v-for="s in fontSizeOptions" :key="s.name"></el-option>
             </el-select>
           </div>
-          <img :src="require('@/assets/img/sand_new/tools/bold.png')" 
+          <img src="~@/assets/img/sand_new/tools/bold.png" 
           class="sand-tool-item"  @click="toolClickOptions('changeWeight')"/>
-          <img :src="require('@/assets/img/sand_new/tools/italic.png')" 
+          <img src="~@/assets/img/sand_new/tools/italic.png" 
           class="sand-tool-item"  @click="toolClickOptions('changeFontStyle')"/>
           <!-- <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeWeight')">B</div>
           <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeFontStyle')">I</div> -->
           <!-- <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeDecoration')">下划线</div> -->
-          <img :src="require('@/assets/img/sand_new/tools/underline.png')" 
+          <img src="~@/assets/img/sand_new/tools/underline.png" 
           class="sand-tool-item"  @click="toolClickOptions('changeDecoration')"/>
-          <div class="sand-tool-item">
+          <div class="sand-tool-item sand-tool-img">
+            <img src="~@/assets/img/sand_new/tools/text-color.png" />
             <el-color-picker
               key="textColor"
               v-model="styleOptions.color"
               size="mini"
               :predefine="colorsOptions"
               @change="(e)=>toolClickOptions('changeColor',e)"
-            />
+              style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
+            > 
+            </el-color-picker>
           </div>
-          <div class="sand-tool-item" id="sand-tool-lineHeight">
-            <el-select v-model="styleOptions.lineHeight" placeholder="行高" @change="(e)=>toolClickOptions('changeLineHeight',e)">
-              <el-option :label="lh.name" :value="lh.value" v-for="lh in lineHeightOptions" :key="lh.name"></el-option>
-            </el-select>
+          <div class="sand-tool-item">
+            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',e)">
+							<div class="el-dropdown-link">
+                <img src="~@/assets/img/sand_new/tools/line-height.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
+							</div>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item v-for="lh in lineHeightOptions" :command="lh.value" :key="lh.value"
+                :class="styleOptions.lineHeight==lh.value?'style-acitve':''">
+                  {{ lh.name }}
+								</el-dropdown-item>
+							</el-dropdown-menu>
+						</el-dropdown>
           </div>
           <div class="sand-tool-item">
             <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',e)">
 							<div class="el-dropdown-link">
-                <img :src="require('@/assets/img/sand_new/tools/text-align.png')" style="vertical-align: middle;"/>
+                <img src="~@/assets/img/sand_new/tools/text-align.png" style="vertical-align: middle;"/>
 								<!-- <img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;"> -->
 							</div>
 							<el-dropdown-menu slot="dropdown">
@@ -174,42 +185,44 @@
 							</el-dropdown-menu>
 						</el-dropdown>
           </div>
-          <div class="sand-tool-item">
+          <div class="sand-tool-item sand-tool-img">
+            <img src="~@/assets/img/sand_new/tools/background-color.png" />
             <el-color-picker
               key="backgroundColor"
               v-model="styleOptions.backgroundColor"
               size="mini"
               :predefine="colorsOptions"
               @change="(e)=>toolClickOptions('changeBackgroundColor',e)"
-            />
+              style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
+            > 
+            </el-color-picker>
           </div>
-          <div class="sand-tool-item">
+          <div class="sand-tool-item sand-tool-img">
+            <img src="~@/assets/img/sand_new/tools/line-color.png" />
             <el-color-picker
               key="lineColor"
               v-model="styleOptions.lineColor"
               size="mini"
               :predefine="colorsOptions"
               @change="(e)=>toolClickOptions('changeLineColor',e)"
-            />
+              style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
+            > 
+            </el-color-picker>
           </div>
           <div class="sand-tool-item">
             <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineWidth',e)">
 							<div class="el-dropdown-link">
-								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
-								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+                <img src="~@/assets/img/sand_new/tools/line-style.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
 							</div>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="3" :class="styleOptions.lineWidth=='cu'?'style-acitve':''">
-									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
-                  粗
+                <el-dropdown-item :command="1" :class="styleOptions.lineWidth==1?'style-acitve':''">
+                  1
 								</el-dropdown-item>
-								<el-dropdown-item :command="2">
-                  细
-										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+                <el-dropdown-item :command="2" :class="styleOptions.lineWidth==2?'style-acitve':''">
+                  2
 								</el-dropdown-item>
-                <el-dropdown-item :command="1">
-                  很细
-										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								<el-dropdown-item :command="3" :class="styleOptions.lineWidth==3?'style-acitve':''">
+                  3
 								</el-dropdown-item>
 							</el-dropdown-menu>
 						</el-dropdown>
@@ -217,17 +230,14 @@
           <div class="sand-tool-item">
             <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeStrokeDasharray',e)">
 							<div class="el-dropdown-link">
-								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
-								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+								<img src="~@/assets/img/sand_new/tools/line-style.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
 							</div>
 							<el-dropdown-menu slot="dropdown">
 								<el-dropdown-item command="4 4" :class="styleOptions.lineStyle=='xu'?'style-acitve':''">
-									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                   虚线
 								</el-dropdown-item>
-								<el-dropdown-item :command="null">
+								<el-dropdown-item :command="null" :class="styleOptions.lineStyle=='shi'?'style-acitve':''">
                   实线
-										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
 							</el-dropdown-menu>
             </el-dropdown>
@@ -235,21 +245,17 @@
           <div class="sand-tool-item">
             <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',e)">
 							<div class="el-dropdown-link">
-								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
-								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+                <img src="~@/assets/img/sand_new/tools/line-type.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
 							</div>
 							<el-dropdown-menu slot="dropdown">
 								<el-dropdown-item :command="1" :class="styleOptions.connectStyle==1?'style-acitve':''">
-									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
-                  直线{{ styleOptions.connectStyle }}
+                  直线
 								</el-dropdown-item>
 								<el-dropdown-item :command="2" :class="styleOptions.connectStyle==2?'style-acitve':''">
-                  弯折线{{ styleOptions.connectStyle }}
-										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+                  弯折线
 								</el-dropdown-item>
                 <el-dropdown-item :command="3" :class="styleOptions.connectStyle==3?'style-acitve':''">
-                  圆角弯折线{{ styleOptions.connectStyle }}
-										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+                  圆角弯折线
 								</el-dropdown-item>
 							</el-dropdown-menu>
             </el-dropdown>
@@ -257,17 +263,14 @@
           <div class="sand-tool-item">
             <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',e)">
 							<div class="el-dropdown-link">
-								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
-								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+                <img src="~@/assets/img/sand_new/tools/arrow-start.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
 							</div>
 							<el-dropdown-menu slot="dropdown">
 								<el-dropdown-item command="classic" :class="styleOptions.startArrow=='1'?'style-acitve':''">
-									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                   有
 								</el-dropdown-item>
 								<el-dropdown-item :command="null">
                   无
-										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
 							</el-dropdown-menu>
             </el-dropdown>
@@ -275,17 +278,14 @@
           <div class="sand-tool-item">
             <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',e)">
 							<div class="el-dropdown-link">
-								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
-								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+                <img src="~@/assets/img/sand_new/tools/arrow-end.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
 							</div>
 							<el-dropdown-menu slot="dropdown">
 								<el-dropdown-item command="classic" :class="styleOptions.endArrow=='1'?'style-acitve':''">
-									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
                   有
 								</el-dropdown-item>
 								<el-dropdown-item :command="null">
                   无
-										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
 								</el-dropdown-item>
 							</el-dropdown-menu>
             </el-dropdown>
@@ -1793,6 +1793,15 @@ const { line} = configOpt;
             margin-left: 20px;
             cursor: pointer;
           }
+          .sand-tool-img{
+            height: 16px;
+            min-width: 16px;
+            position: relative;
+            img{
+              height: 16px;
+              width: 16px;
+            }
+          }
         }
         .sand-mainBody-chart{
           height: calc(100% - 50px);
@@ -2052,7 +2061,7 @@ const { line} = configOpt;
       }
     }
   }
-  #sand-tool-fontSize,#sand-tool-fontFamily,#sand-tool-lineHeight{
+  #sand-tool-fontSize,#sand-tool-fontFamily{
     .el-select{
       width: 58px;
     }

src/views/sandbox_manage/sandFlowNew/popover.vue

@@ -1,3 +1,4 @@
+<!-- "@antv/x6-vue-shape": "1.5.4", "@vue/composition-api": "^1.5.0", -->
 <template>
   <el-popover
     placement="top"