From a11eb21c80713bc66c608cb1aa15a7fe925236d1 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 12 Apr 2021 18:43:13 +0800
Subject: [PATCH] feat(frontend):UI fix

---
 frontend/src/icons/svg/scene.svg              |  1 +
 frontend/src/styles/index.scss                | 29 +++++++++++++++
 frontend/src/views/chart/group/Group.vue      | 11 +++---
 .../dataset/common/DatasetGroupSelector.vue   | 16 +++++----
 frontend/src/views/dataset/group/Group.vue    | 36 ++++---------------
 5 files changed, 52 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/icons/svg/scene.svg

diff --git a/frontend/src/icons/svg/scene.svg b/frontend/src/icons/svg/scene.svg
new file mode 100644
index 0000000000..eb77499b1f
--- /dev/null
+++ b/frontend/src/icons/svg/scene.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618223542845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M592 336H176c-52.928 0-96 43.072-96 96v416c0 52.928 43.072 96 96 96h416c52.928 0 96-43.072 96-96V432c0-52.928-43.072-96-96-96z m32 512a32 32 0 0 1-32 32H176c-17.632 0-32-14.336-32-32V432c0-17.632 14.368-32 32-32h416c17.664 0 32 14.368 32 32v416z" p-id="6673"></path><path d="M720 208H304a32 32 0 0 0 0 64h416c17.664 0 32 14.368 32 32v416a32 32 0 1 0 64 0V304c0-52.928-43.072-96-96-96zM528 752H240a32 32 0 1 0 0 64h288a32 32 0 1 0 0-64z" p-id="6674"></path><path d="M848 80H432a32 32 0 0 0 0 64h416c17.664 0 32 14.368 32 32v416a32 32 0 1 0 64 0V176c0-52.928-43.072-96-96-96z" p-id="6675"></path></svg>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index feaca9696c..8234c98520 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -188,3 +188,32 @@ div:focus {
   @extend %field-icon;
   color: #37b4aa;
 }
+.ds-icon-scene{
+  width: 14px;
+  height: 14px;
+  color: #faaa39;
+}
+.ds-icon-db{
+  width: 14px;
+  height: 14px;
+  color: #3685f2;
+  margin: 0 2px 0 0;
+}
+.ds-icon-sql{
+  width: 14px;
+  height: 14px;
+  color: #faaa39;
+  margin: 0 2px 0 0;
+}
+.ds-icon-excel{
+  width: 14px;
+  height: 14px;
+  color: #13cd66;
+  margin: 0 2px 0 0;
+}
+.ds-icon-custom{
+  width: 14px;
+  height: 14px;
+  color: #23beef;
+  margin: 0 2px 0 0;
+}
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index d603f80dfa..1e40a3f378 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -44,11 +44,12 @@
             <span slot-scope="{ node, data }" class="custom-tree-node">
               <span>
                 <span v-if="data.type === 'scene'">
-                  <el-button
-                    icon="el-icon-folder"
-                    type="text"
-                    size="mini"
-                  />
+                  <!--                  <el-button-->
+                  <!--                    icon="el-icon-folder-opened"-->
+                  <!--                    type="text"-->
+                  <!--                    size="mini"-->
+                  <!--                  />-->
+                  <svg-icon icon-class="scene" class="ds-icon-scene" />
                 </span>
                 <span style="margin-left: 6px">{{ data.name }}</span>
               </span>
diff --git a/frontend/src/views/dataset/common/DatasetGroupSelector.vue b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
index 1e2dab3b4b..25f2acf184 100644
--- a/frontend/src/views/dataset/common/DatasetGroupSelector.vue
+++ b/frontend/src/views/dataset/common/DatasetGroupSelector.vue
@@ -35,11 +35,12 @@
             <span slot-scope="{ node, data }" class="custom-tree-node">
               <span>
                 <span v-if="data.type === 'scene'">
-                  <el-button
-                    icon="el-icon-folder"
-                    type="text"
-                    size="mini"
-                  />
+                  <!--                  <el-button-->
+                  <!--                    icon="el-icon-folder-opened"-->
+                  <!--                    type="text"-->
+                  <!--                    size="mini"-->
+                  <!--                  />-->
+                  <svg-icon icon-class="scene" class="ds-icon-scene" />
                 </span>
                 <span style="margin-left: 6px">{{ data.name }}</span>
               </span>
@@ -83,7 +84,10 @@
         <span slot-scope="{ node, data }" class="custom-tree-node-list">
           <span>
             <span>
-              <svg-icon :icon-class="data.type" class="icon" />
+              <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
+              <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
+              <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
+              <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
             </span>
             <span>
               <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index a9c4d0f2e3..2c9ba69c29 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -44,11 +44,12 @@
             <span slot-scope="{ node, data }" class="custom-tree-node">
               <span>
                 <span v-if="data.type === 'scene'">
-                  <el-button
-                    icon="el-icon-folder"
-                    type="text"
-                    size="mini"
-                  />
+                  <!--                  <el-button-->
+                  <!--                    icon="el-icon-folder-opened"-->
+                  <!--                    type="text"-->
+                  <!--                    size="mini"-->
+                  <!--                  />-->
+                  <svg-icon icon-class="scene" class="ds-icon-scene" />
                 </span>
                 <span style="margin-left: 6px">{{ data.name }}</span>
               </span>
@@ -585,31 +586,6 @@ export default {
 </script>
 
 <style scoped>
-  .ds-icon-db{
-    width: 14px;
-    height: 14px;
-    color: #3685f2;
-    margin: 0 2px 0 0;
-  }
-  .ds-icon-sql{
-    width: 14px;
-    height: 14px;
-    color: #faaa39;
-    margin: 0 2px 0 0;
-  }
-  .ds-icon-excel{
-    width: 14px;
-    height: 14px;
-    color: #13cd66;
-    margin: 0 2px 0 0;
-  }
-  .ds-icon-custom{
-    width: 14px;
-    height: 14px;
-    color: #23beef;
-    margin: 0 2px 0 0;
-  }
-
   .el-divider--horizontal {
     margin: 12px 0
   }