Merge remote-tracking branch 'origin/master'

backend/src/main/java/io/metersphere/api/dto/definition/request/MsScenario.java

@@ -55,7 +55,9 @@ public class MsScenario extends MsTestElement {
         if (StringUtils.isNotEmpty(environmentId)) {
             ApiTestEnvironmentService environmentService = CommonBeanFactory.getBean(ApiTestEnvironmentService.class);
             ApiTestEnvironmentWithBLOBs environment = environmentService.get(environmentId);
-            config.setConfig(JSONObject.parseObject(environment.getConfig(), EnvironmentConfig.class));
+            if (environment != null && environment.getConfig() != null) {
+                config.setConfig(JSONObject.parseObject(environment.getConfig(), EnvironmentConfig.class));
+            }
         }
         if (CollectionUtils.isNotEmpty(this.getVariables())) {
             config.setVariables(this.variables);

backend/src/main/java/io/metersphere/api/dto/definition/request/sampler/MsHTTPSamplerProxy.java

@@ -116,11 +116,7 @@ public class MsHTTPSamplerProxy extends MsTestElement {
         }
         try {
             if (config != null && config.getConfig() != null) {
-                String url = "";
+                String url = config.getConfig().getHttpConfig().getProtocol() + "://" + config.getConfig().getHttpConfig().getSocket();
-                sampler.setDomain(config.getConfig().getHttpConfig().getDomain());
-                sampler.setPort(config.getConfig().getHttpConfig().getPort());
-                sampler.setProtocol(config.getConfig().getHttpConfig().getProtocol());
-                url = config.getConfig().getHttpConfig().getProtocol() + "://" + config.getConfig().getHttpConfig().getSocket();
                 // 补充如果是完整URL 则用自身URL
                 boolean isUrl = false;
                 if (StringUtils.isNotEmpty(this.getUrl()) && isURL(this.getUrl())) {
@@ -128,12 +124,21 @@ public class MsHTTPSamplerProxy extends MsTestElement {
                     isUrl = true;
                 }
                 URL urlObject = new URL(url);
+                if (isUrl) {
+                    sampler.setDomain(URLDecoder.decode(urlObject.getHost(), "UTF-8"));
+                    sampler.setPort(urlObject.getPort());
+                    sampler.setProtocol(urlObject.getProtocol());
+                } else {
+                    sampler.setDomain(config.getConfig().getHttpConfig().getDomain());
+                    sampler.setPort(config.getConfig().getHttpConfig().getPort());
+                    sampler.setProtocol(config.getConfig().getHttpConfig().getProtocol());
+                }
                 String envPath = StringUtils.equals(urlObject.getPath(), "/") ? "" : urlObject.getPath();
                 if (StringUtils.isNotBlank(this.getPath()) && !isUrl) {
                     envPath += this.getPath();
                 }
                 if (CollectionUtils.isNotEmpty(this.getRest()) && this.isRest()) {
-                    envPath = getRestParameters(URLDecoder.decode(envPath, "UTF-8"));
+                    envPath = getRestParameters(URLDecoder.decode(envPath, "UTF-8"), config);
                     sampler.setPath(envPath);
                 }
                 if (CollectionUtils.isNotEmpty(this.getArguments())) {
@@ -150,7 +155,7 @@ public class MsHTTPSamplerProxy extends MsTestElement {
                 sampler.setProtocol(urlObject.getProtocol());
 
                 if (CollectionUtils.isNotEmpty(this.getRest()) && this.isRest()) {
-                    sampler.setPath(getRestParameters(URLDecoder.decode(urlObject.getPath(), "UTF-8")));
+                    sampler.setPath(getRestParameters(URLDecoder.decode(urlObject.getPath(), "UTF-8"), config));
                 }
                 if (CollectionUtils.isNotEmpty(this.getArguments())) {
                     sampler.setPath(getPostQueryParameters(URLDecoder.decode(urlObject.getPath(), "UTF-8")));
@@ -193,7 +198,7 @@ public class MsHTTPSamplerProxy extends MsTestElement {
         }
     }
 
-    private String getRestParameters(String path) {
+    private String getRestParameters(String path, ParameterConfig config) {
         StringBuffer stringBuffer = new StringBuffer();
         stringBuffer.append(path);
         stringBuffer.append("/");
@@ -201,14 +206,31 @@ public class MsHTTPSamplerProxy extends MsTestElement {
         this.getRest().stream().filter(KeyValue::isEnable).filter(KeyValue::isValid).forEach(keyValue ->
                 keyValueMap.put(keyValue.getName(), keyValue.getValue())
         );
+        // 这块是否使用jmeter自身机制？
+        Map<String, String> pubKeyValueMap = new HashMap<>();
+        if (config != null && config.getVariables() != null) {
+            config.getVariables().stream().forEach(keyValue -> {
+                pubKeyValueMap.put(keyValue.getName(), keyValue.getValue());
+            });
+        }
+        for (String key : keyValueMap.keySet()) {
+            if (keyValueMap.get(key) != null && keyValueMap.get(key).startsWith("$")) {
+                String pubKey = keyValueMap.get(key).substring(2, keyValueMap.get(key).length() - 1);
+                keyValueMap.put(key, pubKeyValueMap.get(pubKey));
+            }
+        }
 
         Pattern p = Pattern.compile("(\\{)([\\w]+)(\\})");
         Matcher m = p.matcher(path);
         StringBuffer sb = new StringBuffer();
-        while (m.find()) {
+        try {
-            String group = m.group(2);
+            while (m.find()) {
-            //替换并且把替换好的值放到sb中
+                String group = m.group(2);
-            m.appendReplacement(sb, keyValueMap.get(group));
+                //替换并且把替换好的值放到sb中
+                m.appendReplacement(sb, keyValueMap.get(group));
+            }
+        } catch (Exception ex) {
+            ex.printStackTrace();
         }
         //把符合的数据追加到sb尾
         m.appendTail(sb);

backend/src/main/java/io/metersphere/xpack

@@ -1 +1 @@
-Subproject commit 9f4a9bbf46fc1333dbcccea21f83e27e3ec10b1f
+Subproject commit 79343a2763b014355f91fc21b2356a95ae437973

frontend/package.json

@@ -33,6 +33,7 @@
     "vue": "^2.6.10",
     "vue-calendar-heatmap": "^0.8.4",
     "vue-echarts": "^4.1.0",
+    "vue-float-action-button": "^0.6.6",
     "vue-i18n": "^8.15.3",
     "vue-input-tag": "^2.0.7",
     "vue-pdf": "^4.2.0",

frontend/src/business/components/api/automation/report/components/ResponseText.vue

@@ -2,14 +2,15 @@
   <div class="text-container">
     <el-collapse-transition>
       <el-tabs v-model="activeName" v-show="isActive">
-        <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
-          <pre>{{ response.headers }}</pre>
-        </el-tab-pane>
-
         <el-tab-pane :class="'body-pane'" :label="$t('api_test.definition.request.response_body')" name="body" class="pane">
           <ms-sql-result-table v-if="isSqlType" :body="response.body"/>
           <ms-code-edit v-if="!isSqlType" :mode="mode" :read-only="true" :data="response.body" :modes="modes" ref="codeEdit"/>
         </el-tab-pane>
+
+        <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
+          <pre>{{ response.headers }}</pre>
+        </el-tab-pane>
+
         <el-tab-pane :label="$t('api_test.definition.request.console')" name="console" class="pane">
           <pre>{{response.console}}</pre>
         </el-tab-pane>

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -182,42 +182,19 @@
           </el-col>
           <!-- 按钮列表 -->
           <div>
-            <el-col :span="3" class="ms-left-cell">
+            <el-col :span="3">
-              <el-button type="primary" icon="el-icon-refresh" size="small" @click="showAll">{{$t('commons.show_all')}}</el-button>
+              <vue-fab id="fab" mainBtnColor="#783887" :click-auto-close="false">
-              <br/>
+                <fab-item
-              <div v-if="operatingElements.indexOf('HTTPSamplerProxy')!=-1 || operatingElements.indexOf('DubboSampler')!=-1 || operatingElements.indexOf('JDBCSampler')!=-1 || operatingElements.indexOf('TCPSampler')!=-1 ">
+                  v-for="(item, index) in buttons"
-                <el-button class="ms-right-buttion ms-btn-1" size="small" @click="apiListImport">+{{$t('api_test.automation.api_list_import')}}</el-button>
+                  :key="index"
-              </div>
+                  :idx="getIdx(index)"
-              <div v-if="operatingElements.indexOf('OT_IMPORT')!=-1">
+                  :title="item.title"
-                <el-button class="ms-right-buttion" size="small" style="color: #409EFF;background-color: #EEF5FE" @click="addComponent('OT_IMPORT')">+{{$t('api_test.automation.external_import')}}</el-button>
+                  :title-bg-color="item.titleBgColor"
-              </div>
+                  :title-color="item.titleColor"
-              <div v-if="operatingElements.indexOf('ConstantTimer')!=-1">
+                  :color="item.titleColor"
-                <el-button class="ms-right-buttion ms-btn-3" size="small" @click="addComponent('ConstantTimer')">+{{$t('api_test.automation.wait_controller')}}</el-button>
+                  :icon="item.icon"
-              </div>
+                  @clickItem="item.click"/>
-              <div v-if="operatingElements.indexOf('IfController')!=-1">
+              </vue-fab>
-                <el-button class="ms-right-buttion ms-btn-4" size="small" @click="addComponent('IfController')">+{{$t('api_test.automation.if_controller')}}</el-button>
-              </div>
-              <div v-if="operatingElements.indexOf('scenario')===0">
-                <el-button class="ms-right-buttion ms-btn-5" size="small" @click="addComponent('scenario')">+{{$t('api_test.automation.scenario_import')}}</el-button>
-              </div>
-              <div v-if="operatingElements.indexOf('JSR223Processor')!=-1">
-                <el-button class="ms-right-buttion ms-btn-6" size="small" @click="addComponent('JSR223Processor')">+{{$t('api_test.automation.customize_script')}}</el-button>
-              </div>
-              <div v-if="operatingElements.indexOf('CustomizeReq')!=-1">
-                <el-button class="ms-right-buttion ms-btn-7" size="small" @click="addComponent('CustomizeReq')">+{{$t('api_test.automation.customize_req')}}</el-button>
-              </div>
-              <div v-if="operatingElements.indexOf('JSR223PreProcessor')!=-1">
-                <el-button class="ms-right-buttion ms-btn-8" size="small" @click="addComponent('JSR223PreProcessor')">+{{$t('api_test.definition.request.pre_script')}}</el-button>
-              </div>
-              <div v-if="operatingElements.indexOf('JSR223PostProcessor')!=-1">
-                <el-button class="ms-right-buttion ms-btn-9" size="small" @click="addComponent('JSR223PostProcessor')">+{{$t('api_test.definition.request.post_script')}}</el-button>
-              </div>
-              <div v-if="operatingElements.indexOf('Assertions')!=-1">
-                <el-button class="ms-right-buttion ms-btn-10" size="small" @click="addComponent('Assertions')">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
-              </div>
-              <div v-if="operatingElements.indexOf('Extract')!=-1">
-                <el-button class="ms-right-buttion ms-btn-11" size="small" @click="addComponent('Extract')">+{{$t('api_test.definition.request.extract_param')}}</el-button>
-              </div>
             </el-col>
           </div>
         </el-row>
@@ -282,6 +259,7 @@
   import MsScenarioParameters from "./ScenarioParameters";
   import ApiImport from "../../definition/components/import/ApiImport";
   import InputTag from 'vue-input-tag'
+  import "@/common/css/material-icons.css"
 
   export default {
     name: "EditApiScenario",
@@ -358,12 +336,127 @@
       this.operatingElements = ELEMENTS.get("ALL");
       this.getMaintainerOptions();
       this.getApiScenario();
-      this.getEnvironments();
     }
     ,
     watch: {}
     ,
+    computed: {
+      buttons() {
+        let buttons = [
+          {
+            title: this.$t('api_test.automation.api_list_import'),
+            show: this.showButton("HTTPSamplerProxy", "DubboSampler", "JDBCSampler", "TCPSampler"),
+            titleColor: "#F56C6C",
+            titleBgColor: "#FCF1F1",
+            icon: "api",
+            click: this.apiListImport
+          }, {
+            title: this.$t('api_test.automation.external_import'),
+            show: this.showButton("OT_IMPORT"),
+            titleColor: "#409EFF",
+            titleBgColor: "#EEF5FE",
+            icon: "next_plan",
+            click: () => {
+              this.addComponent('OT_IMPORT')
+            }
+          }, {
+            title: this.$t('api_test.automation.wait_controller'),
+            show: this.showButton("ConstantTimer"),
+            titleColor: "#67C23A",
+            titleBgColor: "#F2F9EE",
+            icon: "access_time",
+            click: () => {
+              this.addComponent('ConstantTimer')
+            }
+          }, {
+            title: this.$t('api_test.automation.if_controller'),
+            show: this.showButton("IfController"),
+            titleColor: "#E6A23C",
+            titleBgColor: "#FCF6EE",
+            icon: "alt_route",
+            click: () => {
+              this.addComponent('IfController')
+            }
+          }, {
+            title: this.$t('api_test.automation.scenario_import'),
+            show: this.operatingElements.indexOf('scenario') === 0,
+            titleColor: "#606266",
+            titleBgColor: "#F4F4F5",
+            icon: "movie",
+            click: () => {
+              this.addComponent('scenario')
+            }
+          }, {
+            title: this.$t('api_test.automation.customize_script'),
+            show: this.showButton("JSR223Processor"),
+            titleColor: "#7B4D12",
+            titleBgColor: "#F1EEE9",
+            icon: "code",
+            click: () => {
+              this.addComponent('JSR223Processor')
+            }
+          }, {
+            title: this.$t('api_test.automation.customize_req'),
+            show: this.showButton("CustomizeReq"),
+            titleColor: "#008080",
+            titleBgColor: "#EBF2F2",
+            icon: "tune",
+            click: () => {
+              this.addComponent('CustomizeReq')
+            }
+          }, {
+            title: this.$t('api_test.definition.request.pre_script'),
+            show: this.showButton("JSR223PreProcessor"),
+            titleColor: "#B8741A",
+            titleBgColor: "#F9F1EA",
+            icon: "skip_previous",
+            click: () => {
+              this.addComponent('JSR223PreProcessor')
+            }
+          }, {
+            title: this.$t('api_test.definition.request.post_script'),
+            show: this.showButton("JSR223PostProcessor"),
+            titleColor: "#783887",
+            titleBgColor: "#F2ECF3",
+            icon: "skip_next",
+            click: () => {
+              this.addComponent('JSR223PostProcessor')
+            }
+          }, {
+            title: this.$t('api_test.definition.request.assertions_rule'),
+            show: this.showButton("Assertions"),
+            titleColor: "#A30014",
+            titleBgColor: "#F7E6E9",
+            icon: "fact_check",
+            click: () => {
+              this.addComponent('Assertions')
+            }
+          }, {
+            title: this.$t('api_test.definition.request.extract_param'),
+            show: this.showButton("Extract"),
+            titleColor: "#015478",
+            titleBgColor: "#E6EEF2",
+            icon: "colorize",
+            click: () => {
+              this.addComponent('Extract')
+            }
+          }
+        ];
+        return buttons.filter(btn => btn.show);
+      }
+    },
     methods: {
+      getIdx(index) {
+        return -1 * index - 2.25; // 为了向下展示菜单
+      },
+      showButton(...names) {
+        for (const name of names) {
+          if (this.operatingElements.includes(name)) {
+            return true;
+          }
+        }
+        return false;
+      },
       addComponent(type) {
         switch (type) {
           case ELEMENT_TYPE.IfController:
@@ -586,6 +679,16 @@
             this.environments.forEach(environment => {
               parseEnvironment(environment);
             });
+            let hasEnvironment = false;
+            for (let i in this.environments) {
+              if (this.environments[i].id === this.currentEnvironmentId) {
+                hasEnvironment = true;
+                break;
+              }
+            }
+            if (!hasEnvironment) {
+              this.currentEnvironmentId = '';
+            }
           });
         }
       }
@@ -718,8 +821,7 @@
             })
           }
         })
-      }
+      },
-      ,
       getApiScenario() {
         if (this.currentScenario.tags != undefined && !(this.currentScenario.tags instanceof Array)) {
           this.currentScenario.tags = JSON.parse(this.currentScenario.tags);
@@ -741,6 +843,7 @@
                 this.path = "/api/automation/create";
               }
             }
+            this.getEnvironments();
           })
         }
       }
@@ -842,63 +945,10 @@
     margin-top: 5px;
   }
 
-  .ms-right-buttion {
+  #fab {
-    margin-top: 10px;
+    bottom: unset;
-  }
+    right: 90px;
-
+    z-index: 5;
-  .ms-btn-1 {
-    color: #F56C6C;
-    background-color: #FCF1F1
-  }
-
-  .ms-btn-2 {
-    color: #F56C6C;
-    background-color: #FCF1F1
-  }
-
-  .ms-btn-3 {
-    color: #67C23A;
-    background-color: #F2F9EE
-  }
-
-  .ms-btn-4 {
-    color: #E6A23C;
-    background-color: #FCF6EE
-  }
-
-  .ms-btn-5 {
-    color: #606266;
-    background-color: #F4F4F5
-  }
-
-  .ms-btn-6 {
-    color: #7B4D12;
-    background-color: #F1EEE9
-  }
-
-  .ms-btn-7 {
-    color: #008080;
-    background-color: #EBF2F2
-  }
-
-  .ms-btn-8 {
-    color: #B8741A;
-    background-color: #F9F1EA
-  }
-
-  .ms-btn-9 {
-    color: #783887;
-    background-color: #F2ECF3
-  }
-
-  .ms-btn-10 {
-    color: #A30014;
-    background-color: #F7E6E9
-  }
-
-  .ms-btn-11 {
-    color: #015478;
-    background-color: #E6EEF2
   }
 
   /deep/ .el-tree-node__content {
@@ -944,5 +994,4 @@
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
     font-size: 13px;
   }
-
 </style>

frontend/src/business/components/api/automation/scenario/MsInputTag.vue

@@ -31,14 +31,14 @@
 
 <style scoped>
 
-  ms-input-tag-wrapper >>> .vue-input-tag-wrapper {
+  .ms-input-tag-wrapper >>> .vue-input-tag-wrapper {
     border-radius: 2px;
     border: 1px solid #a5d24a;
     color: #909399;
     display: inline-block;
   }
 
-  ms-input-remove >>> .remove {
+  .ms-input-remove >>> .remove {
     color: #909399;
   }
 

frontend/src/business/components/api/definition/ApiDefinition.vue

@@ -266,7 +266,7 @@
       },
       saveApi(data) {
         this.setTabTitle(data);
-        this.$refs.apiList[0].initTable(data);
+        this.refresh(data);
       },
 
       showExecResult(row) {

frontend/src/business/components/api/definition/components/body/ApiBody.vue

@@ -48,7 +48,6 @@
       <ms-code-edit :read-only="isReadOnly" :data.sync="body.raw" :modes="modes" :mode="'xml'" ref="codeEdit"/>
     </div>
 
-
     <div class="ms-body" v-if="body.type == 'Raw'">
       <ms-code-edit :read-only="isReadOnly" :data.sync="body.raw" :modes="modes" ref="codeEdit"/>
     </div>
@@ -69,7 +68,6 @@
   import {BODY_TYPE, KeyValue} from "../../model/ApiTestModel";
   import MsCodeEdit from "../../../../common/components/MsCodeEdit";
   import MsJsonCodeEdit from "../../../../common/components/MsJsonCodeEdit";
-
   import MsDropdown from "../../../../common/components/MsDropdown";
   import MsApiVariable from "../ApiVariable";
   import MsApiBinaryVariable from "./ApiBinaryVariable";

frontend/src/business/components/api/definition/components/case/ApiCaseList.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="visible">
-    <ms-drawer :size="40" @close="apiCaseClose" direction="bottom">
+    <ms-drawer :size="60" @close="apiCaseClose" direction="bottom">
       <template v-slot:header>
         <api-case-header
           :api="api"
@@ -17,8 +17,8 @@
         />
       </template>
 
-      <el-container v-loading="result.loading" style="padding-bottom: 200px">
+      <el-container v-loading="result.loading">
-        <el-main v-loading="batchLoading" style="overflow: auto">
+        <el-main v-loading="batchLoading">
           <div v-for="(item,index) in apiCaseList" :key="index">
             <api-case-item v-loading="singleLoading && singleRunId === item.id"
                            @refresh="refresh"
@@ -250,4 +250,8 @@
 
 <style scoped>
 
+  .ms-drawer >>> .ms-drawer-body {
+    margin-top: 80px;
+  }
+
 </style>

frontend/src/business/components/api/definition/components/list/ApiList.vue

@@ -248,7 +248,7 @@
         let arr = Array.from(this.selectRows);
         // 选中1个以上的用例时显示更多操作
         if (this.selectRows.size === 1) {
-          this.$set(arr[0], "showMore", false);
+          this.$set(arr[0], "showMore", true);
         } else if (this.selectRows.size === 2) {
           arr.forEach(row => {
             this.$set(row, "showMore", true);

frontend/src/business/components/api/definition/components/response/ResponseResult.vue

@@ -2,13 +2,14 @@
   <div class="text-container">
 
     <el-tabs v-model="activeName" v-show="isActive">
-      <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
-        <pre>{{ response.responseResult.headers }}</pre>
-      </el-tab-pane>
       <el-tab-pane :label="$t('api_test.definition.request.response_body')" name="body" class="pane">
         <ms-sql-result-table v-if="isSqlType" :body="response.responseResult.body"/>
         <ms-code-edit v-if="!isSqlType" :mode="mode" :read-only="true" :modes="modes" :data.sync="response.responseResult.body" ref="codeEdit"/>
       </el-tab-pane>
+
+      <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
+        <pre>{{ response.responseResult.headers }}</pre>
+      </el-tab-pane>
       <!--<el-tab-pane label="Cookie" name="cookie" class="pane cookie">-->
       <!--<pre>{{response.cookies}}</pre>-->
       <!--</el-tab-pane>-->
@@ -80,7 +81,7 @@
     data() {
       return {
         isActive: true,
-        activeName: "headers",
+        activeName: "body",
         modes: ['text', 'json', 'xml', 'html'],
         sqlModes: ['text', 'table'],
         mode: BODY_FORMAT.TEXT

frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue

@@ -217,6 +217,7 @@
         let url = "/api/definition/update";
         let bodyFiles = this.getBodyUploadFiles();
         this.api.method = this.api.request.method;
+        this.api.path = this.api.request.path;
         this.$fileUpload(url, null, bodyFiles, this.api, () => {
           this.$success(this.$t('commons.save_success'));
           this.$emit('saveApi', this.api);
@@ -273,7 +274,7 @@
       environmentConfigClose() {
         this.getEnvironments();
       },
-      refresh(){
+      refresh() {
         this.$emit('refresh');
       },
       getResult() {

frontend/src/business/components/api/definition/model/ApiTestModel.js

@@ -843,6 +843,7 @@ export class JSR223Processor extends BaseConfig {
     this.type = "JSR223Processor";
     this.script = undefined;
     this.language = "beanshell";
+    this.scriptLanguage = "java";
     this.enable = true;
     this.hashTree = [];
     this.set(options);

frontend/src/business/components/common/components/MsDrawer.vue

@@ -178,7 +178,9 @@
   }
 
   .ms-drawer-header {
-    position: relative;
+    position: fixed;
+    width: 100%;
+    z-index: 999;
   }
 
   .el-icon-close {

frontend/src/business/components/common/components/MsJsonCodeEdit.vue

@@ -17,12 +17,12 @@
       },
       mode: {
         type: String,
-        default: "tree"
+        default: "code"
       },
       modes: {
         type: Array,
         default: function () {
-          return ["tree", "code"];
+          return ["code"];
         }
       }
     },

frontend/src/business/main.js

@@ -17,6 +17,7 @@ import CalendarHeatmap from "../common/js/calendar-heatmap";
 import '../common/css/menu-header.css';
 import '../common/css/main.css';
 import CKEditor from '@ckeditor/ckeditor5-vue';
+import VueFab from 'vue-float-action-button'
 
 Vue.config.productionTip = false;
 Vue.use(icon);
@@ -29,7 +30,8 @@ Vue.use(chart);
 Vue.use(CalendarHeatmap);
 Vue.use(message);
 Vue.use(CKEditor);
-Vue.use(YanProgress)
+Vue.use(YanProgress);
+Vue.use(VueFab);
 
 // v-permission
 Vue.directive('permission', permission);

frontend/src/common/css/main.css

@@ -134,6 +134,6 @@ html,body {
 }
 ::-webkit-scrollbar-track{
   border-radius: 1em;
-  background-color: rgba(50,50,50,.1);
+  background-color: transparent;
   position: fixed;
 }

frontend/src/common/css/material-icons.css

@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./material.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}