feat:恢复样式

frontend/src/components/Toolbar.vue

 <template>
   <div>
     <div class="toolbar">
-
-      <el-tooltip content="撤消">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="undo" />
-      </el-tooltip>
-      <el-tooltip content="重做">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
-      </el-tooltip>
-      <el-tooltip content="插入图片">
-        <el-button class="el-icon-refresh-left" for="input" size="mini" circle />
+      <el-button @click="undo">撤消</el-button>
+      <el-button @click="redo">重做</el-button>
+      <label for="input" class="insert">插入图片</label>
       <input id="input" type="file" hidden @change="handleFileChange">
-      </el-tooltip>
-      <el-tooltip content="预览">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="preview" />
-      </el-tooltip>
-      <el-tooltip content="清空">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="clearCanvas" />
-      </el-tooltip>
-      <el-tooltip content="保存">
-        <el-button class="el-icon-circle-check" size="mini" circle @click="save" />
-      </el-tooltip>
-      <el-tooltip content="预览">
-        <el-button class="el-icon-view" size="mini" circle @click="preview" />
-      </el-tooltip>
+      <el-button style="margin-left: 10px;" @click="preview">预览</el-button>
+      <el-button @click="save">保存</el-button>
+      <el-button @click="clearCanvas">清空画布</el-button>
+      <div class="canvas-config">
+        <span>画布大小</span>
+        <input v-model="canvasStyleData.width">
+        <span>*</span>
+        <input v-model="canvasStyleData.height">
+      </div>
+      <div class="canvas-config">
+        <span>画布比例</span>
+        <input v-model="scale" @input="handleScaleChange"> %
+      </div>
     </div>
 
     <!-- 预览 -->
@@ -193,9 +187,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.toolbar {
-    height: 35px;
-    line-height: 35px;
+  .toolbar {
+    height: 50px;
+    line-height: 50px;
     background: #fff;
     border-bottom: 1px solid #ddd;
 
@@ -250,5 +244,5 @@ export default {
         color: #3a8ee6;
       }
     }
-}
+  }
 </style>

frontend/src/custom-component/UserView.vue

 <template>
   <div class="rect-shape">
-    <chart-component v-if="showCard" :ref="element.propValue.id" :chart-id="element.propValue.id" :chart="chart" />
+    <chart-component v-if="showCard" :ref="element.propValue.id" class="chart-class" :chart-id="element.propValue.id" :chart="chart" />
   </div>
 </template>
 
@@ -54,4 +54,7 @@ export default {
     height: 100%;
     overflow: auto;
 }
+.chart-class{
+  height: 100%;
+}
 </style>

frontend/src/main.js

@@ -17,10 +17,6 @@ import directives from './directive'
 import VueClipboard from 'vue-clipboard2'
 
 import '@/custom-component' // 注册自定义组件
-import '@/assets/iconfont/iconfont.css'
-import '@/styles/animate.css'
-import 'element-ui/lib/theme-chalk/index.css'
-import '@/styles/reset.css'
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
 

frontend/src/views/panel/edit/index.vue

@@ -3,30 +3,29 @@
     <!-- <de-header>Header</de-header> -->
     <el-header class="de-header">
       <el-row class="panel-design-head">
-        <span style="float: left;line-height: 35px; color: gray">
-
+        <span style="float: left;line-height: 50px; color: gray">
           <span>名称：测试仪表板</span>
-
         </span>
-        <span style="float: right;line-height: 35px;">
+        <Toolbar />
+        <!--        <span style="float: right;line-height: 35px;">-->
 
-          <el-tooltip content="返回目录">
-            <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />
-          </el-tooltip>
+        <!--          <el-tooltip content="返回目录">-->
+        <!--            <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />-->
+        <!--          </el-tooltip>-->
 
-          <el-tooltip content="背景图">
-            <el-button class="el-icon-full-screen" size="mini" circle />
-          </el-tooltip>
+        <!--          <el-tooltip content="背景图">-->
+        <!--            <el-button class="el-icon-full-screen" size="mini" circle />-->
+        <!--          </el-tooltip>-->
 
-          <el-tooltip content="保存">
-            <el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />
-          </el-tooltip>
+        <!--          <el-tooltip content="保存">-->
+        <!--            <el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />-->
+        <!--          </el-tooltip>-->
 
-          <el-tooltip content="预览">
-            <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />
-          </el-tooltip>
+        <!--          <el-tooltip content="预览">-->
+        <!--            <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />-->
+        <!--          </el-tooltip>-->
 
-        </span>
+        <!--        </span>-->
       </el-row>
     </el-header>
     <de-container>
@@ -113,6 +112,13 @@ import componentList from '@/custom-component/component-list' // 左侧列表数
 import { listenGlobalKeyDown } from '@/utils/shortcutKey'
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
+import Toolbar from '@/components/Toolbar'
+
+// 引入样式
+import '@/assets/iconfont/iconfont.css'
+import '@/styles/animate.css'
+import 'element-ui/lib/theme-chalk/index.css'
+import '@/styles/reset.css'
 
 export default {
   components: {
@@ -121,7 +127,8 @@ export default {
     DeAsideContainer,
     FilterGroup,
     ViewSelect,
-    Editor
+    Editor,
+    Toolbar
 
   },
   data() {