From 30c0100a0b47efd0fc029ce46bd9b905b14ae9dd Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 27 Jul 2023 18:18:52 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=BB=9F=E4=B8=80=20ztree=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DataZTree/components/ZTree/index.vue      |   2 +-
 src/styles/ztree.css                          |  10 +-
 src/styles/ztree_icon.css                     | 361 ------------------
 src/styles/ztree_icon.scss                    | 344 +++++++++++++++++
 4 files changed, 354 insertions(+), 363 deletions(-)
 delete mode 100644 src/styles/ztree_icon.css
 create mode 100644 src/styles/ztree_icon.scss

diff --git a/src/components/DataZTree/components/ZTree/index.vue b/src/components/DataZTree/components/ZTree/index.vue
index def03ba4c..dfaadc653 100644
--- a/src/components/DataZTree/components/ZTree/index.vue
+++ b/src/components/DataZTree/components/ZTree/index.vue
@@ -46,7 +46,7 @@ import $ from '@/utils/jquery-vendor.js'
 import '@ztree/ztree_v3/js/jquery.ztree.all.min.js'
 import '@ztree/ztree_v3/js/jquery.ztree.exhide.min.js'
 import '@/styles/ztree.css'
-import '@/styles/ztree_icon.css'
+import '@/styles/ztree_icon.scss'
 import axiosRetry from 'axios-retry'
 
 const defaultObject = {
diff --git a/src/styles/ztree.css b/src/styles/ztree.css
index 1191e6913..6e88cbe22 100644
--- a/src/styles/ztree.css
+++ b/src/styles/ztree.css
@@ -264,7 +264,7 @@ website:    http://code.google.com/p/jquerytree/
 }
 
 .ztree li span.button.roots_docu::before {
-  content: "\f114";
+  content: '';
   padding-left: 2px;
   display: inline-block;
   color: #676a6c;
@@ -417,3 +417,11 @@ ul.ztree.zTreeDragUL {
   filter: alpha(opacity=0);
   position: absolute;
 }
+
+.ztree li span.button::before {
+  color: #676a6c;
+}
+.ztree li a > span.button {
+  filter: invert(47%) sepia(3%) saturate(412%) hue-rotate(161deg) brightness(83%) contrast(83%);
+}
+
diff --git a/src/styles/ztree_icon.css b/src/styles/ztree_icon.css
deleted file mode 100644
index 045ee5de1..000000000
--- a/src/styles/ztree_icon.css
+++ /dev/null
@@ -1,361 +0,0 @@
-.ztree li span.button {
-  line-height: 0;
-  margin: 0;
-  padding: 0;
-  width: 18px;
-  height: 20px;
-  display: inline-block;
-  vertical-align: top;
-  border: 0px solid;
-  cursor: pointer;
-  outline: none;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-attachment: scroll;
-}
-
-.ztree li span.button.ico_loading {
-  margin-right: 2px;
-  background: url(./icons/loading.gif) no-repeat scroll 0 0 transparent;
-  vertical-align: top;
-  *vertical-align: middle;
-}
-
-.ztree li span.button::before {
-  font-family: FontAwesome;
-  padding-top: 10px;
-  padding-left: 2px;
-  display: inline-block;
-  color: #676a6c;
-}
-
-.ztree li span.button.chk {
-  margin-right: 1px;
-  cursor: auto;
-  width: 12px;
-  display: inline-block;
-  padding-top: 0;
-  padding-left: 0;
-}
-
-.ztree li span.button.chk.checkbox_false_full::before {
-  content: "\f096";
-}
-
-.ztree li span.button.chk.checkbox_false_full_focus::before {
-  content: "\f096";
-  color: #676a6c;
-}
-
-.ztree li span.button.chk.checkbox_false_part::before {
-  content: "\f096";
-  color: #aaaaaa;
-}
-
-.ztree li span.button.chk.checkbox_false_part_focus::before {
-  content: "\f096";
-  color: #cad96c;
-}
-
-.ztree li span.button.chk.checkbox_false_disable::before {
-  content: "\f096";
-  color: #808080;
-}
-
-.ztree li span.button.chk.checkbox_true_full::before {
-  content: "\f046";
-}
-
-.ztree li span.button.chk.checkbox_true_full_focus::before {
-  content: "\f046";
-}
-
-.ztree li span.button.chk.checkbox_true_part::before {
-  content: "\f14a";
-}
-
-.ztree li span.button.chk.checkbox_true_part_focus::before {
-  content: "\f14a";
-  color: #676a6c;
-}
-
-.ztree li span.button.chk.checkbox_true_full_focus::before {
-  content: "\f046";
-  color: #676a6c;
-}
-
-.ztree li span.button.chk.checkbox_true_part::before {
-  content: "\f046";
-  color: #aaaaaa;
-}
-
-.ztree li span.button.chk.checkbox_true_part_focus::before {
-  content: "\f046";
-  color: #cad96c;
-}
-
-.ztree li span.button.chk.checkbox_true_disable::before {
-  content: "\f046";
-  color: #808080;
-}
-
-.ztree li span.button.chk.radio_false_full::before {
-  content: "\f10c";
-}
-
-.ztree li span.button.chk.radio_false_full_focus::before {
-  content: "\f10c";
-  color: #676a6c;
-}
-
-.ztree li span.button.chk.radio_false_part::before {
-  content: "\f10c";
-  color: #aaaaaa;
-}
-
-.ztree li span.button.chk.radio_false_part_focus::before {
-  content: "\f10c";
-  color: #676a6c;
-}
-
-.ztree li span.button.chk.radio_false_disable::before {
-  content: "\f1db";
-  color: #808080;
-}
-
-.ztree li span.button.chk.radio_true_full::before {
-  content: "\f192";
-}
-
-.ztree li span.button.chk.radio_true_full_focus::before {
-  content: "\f192";
-  color: #676a6c;
-}
-
-.ztree li span.button.chk.radio_true_part::before {
-  content: "\f192";
-  color: #aaaaaa;
-}
-
-.ztree li span.button.chk.radio_true_part_focus::before {
-  content: "\f192";
-  color: #aaaaaa;
-}
-
-.ztree li span.button.chk.radio_true_disable::before {
-  content: "\f1db";
-  color: #808080;
-}
-
-.ztree li span.button.switch {
-  width: 18px;
-  height: 20px;
-}
-
-.ztree li span.button.root_open::before {
-  content: "\f107";
-}
-
-.ztree li span.button.root_close::before {
-  content: "\f105";
-}
-
-.ztree li span.button.roots_open::before {
-  content: "\f107";
-}
-
-.ztree li span.button.roots_close::before {
-  content: "\f105";
-}
-
-.ztree li span.button.center_open::before {
-  content: "\f107";
-}
-
-.ztree li span.button.center_close::before {
-  content: "\f105";
-}
-
-.ztree li span.button.bottom_open::before {
-  content: "\f107";
-}
-
-.ztree li span.button.bottom_close::before {
-  content: "\f105";
-}
-
-.ztree li span.button.root_docu {
-  background: none;
-}
-
-.ztree li span.button.roots_docu::before {
-  content: "\f114";
-}
-
-.ztree li span.button.noline_docu {
-  background: none;
-}
-
-.ztree li span.button.ico_open::before {
-  content: "\f07c";
-}
-
-.ztree li span.button.ico_close::before {
-  content: "\f07b";
-}
-
-.ztree li span.button.ico_docu::before {
-  content: "\f07b";
-}
-
-.ztree li span.button.file_ico_docu::before {
-  content: "\f022";
-}
-
-.ztree li span.button.linux_ico_docu::before {
-  content: "\f17c";
-}
-
-.ztree li span.button.windows_ico_docu::before {
-  content: "\f17a";
-}
-
-.ztree li span.button.user-tie_ico_close::before {
-  content: "\f2be";
-}
-
-.ztree li span.button.user-tie_ico_open::before {
-  content: "\f2be";
-}
-
-.ztree li span.button.cloud_ico_close::before {
-  content: "\f0c2";
-}
-
-.ztree li span.button.cloud_ico_open::before {
-  content: "\f0c2";
-}
-
-.ztree li span.button.chrome_ico_docu::before {
-  content: "\f268";
-}
-
-.ztree li span.button.public_ico_docu::before,
-.ztree li span.button.router_ico_docu::before,
-.ztree li span.button.other_ico_docu::before,
-.ztree li span.button.firewall_ico_docu::before,
-.ztree li span.button.general_ico_docu::before {
-  content: "\F07B";
-}
-
-.ztree li span.button.switch_ico_docu {
-  background: url('./icons/switch.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.k8s_ico_docu {
-  background: url('./icons/k8s.png') center left no-repeat;
-}
-
-.ztree li span.button.mysql_ico_docu {
-  background: url('./icons/mysql.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.redis_ico_docu {
-  background: url('./icons/redis.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.mariadb_ico_docu {
-  background: url('./icons/mariadb.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.postgresql_ico_docu {
-  background: url('./icons/postgresql.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.mongodb_ico_docu {
-  background: url('./icons/mongodb.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.unix_ico_docu {
-  background: url('./icons/unix.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.private_ico_docu {
-  background: url('./icons/private.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.sqlserver_ico_docu {
-  background: url('./icons/sqlserver.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.website_ico_docu {
-  background: url('./icons/website.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.chatgpt_ico_docu {
-    background: url('./icons/chatgpt.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.clickhouse_ico_docu {
-  background: url('./icons/clickhouse.png') no-repeat center left transparent;
-}
-
-.ztree li span.button.windows_ico_docu {
-  background: url('./icons/windows.png') no-repeat center left transparent;
-}
-
-.ztree li a > span.button {
-  filter: invert(47%) sepia(3%) saturate(412%) hue-rotate(161deg) brightness(83%) contrast(83%);
-}
-
-.ztree li span.button.oracle_ico_docu::before {
-  content: "\f1c0";
-}
-
-.ztree li span.button.oracle_ico_docu::before {
-  content: "\f1c0";
-}
-
-.ztree li span.button.database_ico_docu::before {
-  content: "\f1c0";
-}
-
-.ztree li span.button.cloud_ico_docu::before {
-  content: "\f0c2";
-}
-
-.ztree li span.button.edit {
-  margin-left: 4px;
-  margin-right: -1px;
-  vertical-align: top;
-  *vertical-align: middle;
-  padding-top: 10px;
-}
-
-.ztree li span.button.edit::before {
-  content: "\f044";
-}
-
-.ztree li span.button.remove {
-  margin-left: 4px;
-  margin-right: -1px;
-  vertical-align: top;
-  *vertical-align: middle;
-  padding-top: 10px;
-}
-
-.ztree li span.button.remove::before {
-  content: "\f1f8";
-}
-
-.ztree li span.button.add {
-  margin-left: 4px;
-  margin-right: -1px;
-  vertical-align: top;
-  *vertical-align: middle;
-  padding-top: 10px;
-}
-
-.ztree li span.button.add::before {
-  content: "\f067";
-}
diff --git a/src/styles/ztree_icon.scss b/src/styles/ztree_icon.scss
new file mode 100644
index 000000000..e7e575479
--- /dev/null
+++ b/src/styles/ztree_icon.scss
@@ -0,0 +1,344 @@
+.ztree li span.button {
+  line-height: 0;
+  margin: 0;
+  padding: 0;
+  width: 18px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: top;
+  border: 0 solid;
+  cursor: pointer;
+  outline: none;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+}
+
+
+.ztree li span.button {
+  .edit, .remove, .add {
+    margin-left: 4px;
+    margin-right: -1px;
+    vertical-align: top;
+    *vertical-align: middle;
+    padding-top: 10px;
+  }
+}
+
+
+.ztree li span.button::before {
+  font-family: FontAwesome;
+  padding-top: 10px;
+  padding-left: 2px;
+  display: inline-block;
+}
+
+.ztree li span.button.chk {
+  margin: 0;
+  cursor: auto;
+  width: 12px;
+  display: inline-block;
+  padding-top: 10px;
+  padding-left: 2px;
+}
+
+
+.ztree li span.button {
+  margin-right: 2px;
+  width: 16px;
+  height: 20px;
+}
+
+
+.ztree li span.button, .view_icon {
+  &.windows_ico_docu {
+    background: url('./icons/windows.png') no-repeat center left transparent;
+  }
+
+  &.switch_ico_docu {
+    background: url('./icons/switch.png') no-repeat center left transparent;
+  }
+
+  &.k8s_ico_docu {
+    background: url('./icons/k8s.png') center left no-repeat;
+  }
+
+  &.mysql_ico_docu {
+    background: url('./icons/mysql.png') no-repeat center left transparent;
+  }
+
+  &.redis_ico_docu {
+    background: url('./icons/redis.png') no-repeat center left transparent;
+  }
+
+  &.mariadb_ico_docu {
+    background: url('./icons/mariadb.png') no-repeat center left transparent;
+  }
+
+  &.postgresql_ico_docu {
+    background: url('./icons/postgresql.png') no-repeat center left transparent;
+  }
+
+  &.mongodb_ico_docu {
+    background: url('./icons/mongodb.png') no-repeat center left transparent;
+  }
+
+  &.unix_ico_docu {
+    background: url('./icons/unix.png') no-repeat center left transparent;
+  }
+
+
+  &.private_ico_docu {
+    background: url('./icons/private.png') no-repeat center left transparent;
+  }
+
+  &.sqlserver_ico_docu {
+    background: url('./icons/sqlserver.png') no-repeat center left transparent;
+  }
+
+  &.website_ico_docu {
+    background: url('./icons/website.png') no-repeat center left transparent;
+  }
+
+  &.chatgpt_ico_docu {
+    background: url('./icons/chatgpt.png') no-repeat center left transparent;
+  }
+
+  &.clickhouse_ico_docu {
+    background: url('./icons/clickhouse.png') no-repeat center left transparent;
+  }
+
+  &.ico_loading {
+    background: url(./icons/loading.gif) no-repeat scroll 0 0 transparent;
+  }
+
+  &.oracle_ico_docu::before {
+    content: "\f1c0";
+  }
+
+  &.database_ico_docu::before {
+    content: "\f1c0";
+  }
+
+  &.cloud_ico_docu::before {
+    content: "\f0c2";
+  }
+
+  &.cloud_ico_open::before {
+    content: "\f07c";
+  }
+
+  &.cloud_ico_close::before {
+    content: "\f07b";
+  }
+
+  &.chrome_ico_docu::before {
+    content: "\f268";
+  }
+
+
+  &.public_ico_docu::before,
+  &.router_ico_docu::before,
+  &.other_ico_docu::before,
+  &.firewall_ico_docu::before,
+  &.general_ico_docu::before {
+    content: "\F07B";
+  }
+
+  &.ico_close::before {
+    content: "\f07b";
+  }
+
+  &.ico_docu::before {
+    content: "\f07b";
+  }
+
+  &.file_ico_docu::before {
+    content: "\f022";
+  }
+
+  &.linux_ico_docu::before {
+    content: "\f17c";
+  }
+
+  &.user-tie_ico_close::before {
+    content: "\f2be";
+  }
+
+  &.user-tie_ico_open::before {
+    content: "\f2be";
+  }
+
+  &.roots_close::before {
+    content: "\f105";
+  }
+
+  &.center_open::before {
+    content: "\f107";
+  }
+
+  &.center_close::before {
+    content: "\f105";
+  }
+
+  &.bottom_open::before {
+    content: "\f107";
+  }
+
+  &.bottom_close::before {
+    content: "\f105";
+  }
+
+  &.chk.checkbox_false_part::before {
+    content: "\f096";
+    color: #aaaaaa;
+  }
+
+  &.chk.checkbox_false_full::before {
+    content: "\f096";
+  }
+
+  &.chk.checkbox_false_full_focus::before {
+    content: "\f096";
+    color: #676a6c;
+  }
+
+  &.chk.checkbox_false_part_focus::before {
+    content: "\f096";
+    color: #cad96c;
+  }
+
+  &.chk.checkbox_false_disable::before {
+    content: "\f096";
+    color: #808080;
+  }
+
+  &.chk.checkbox_true_full::before {
+    content: "\f046";
+  }
+
+  &.chk.checkbox_true_full_focus::before {
+    content: "\f046";
+  }
+
+  &.chk.checkbox_true_part::before {
+    content: "\f14a";
+  }
+
+  &.chk.checkbox_true_part_focus::before {
+    content: "\f14a";
+    color: #676a6c;
+  }
+
+  &.chk.checkbox_true_full_focus::before {
+    content: "\f046";
+    color: #676a6c;
+  }
+
+  &.chk.checkbox_true_part::before {
+    content: "\f046";
+    color: #aaaaaa;
+  }
+
+  &.chk.checkbox_true_part_focus::before {
+    content: "\f046";
+    color: #cad96c;
+  }
+
+  &.chk.checkbox_true_disable::before {
+    content: "\f046";
+    color: #808080;
+  }
+
+  &.chk.radio_false_full::before {
+    content: "\f10c";
+  }
+
+  &.chk.radio_false_full_focus::before {
+    content: "\f10c";
+    color: #676a6c;
+  }
+
+  &.chk.radio_false_part::before {
+    content: "\f10c";
+    color: #aaaaaa;
+  }
+
+  &.chk.radio_false_part_focus::before {
+    content: "\f10c";
+    color: #676a6c;
+  }
+
+  &.chk.radio_false_disable::before {
+    content: "\f1db";
+    color: #808080;
+  }
+
+  &.chk.radio_true_full::before {
+    content: "\f192";
+  }
+
+  &.chk.radio_true_full_focus::before {
+    content: "\f192";
+    color: #676a6c;
+  }
+
+  &.chk.radio_true_part::before {
+    content: "\f192";
+    color: #aaaaaa;
+  }
+
+  &.chk.radio_true_part_focus::before {
+    content: "\f192";
+    color: #aaaaaa;
+  }
+
+  &.chk.radio_true_disable::before {
+    content: "\f1db";
+    color: #808080;
+  }
+
+  &.switch {
+    width: 18px;
+    height: 20px;
+  }
+
+  &.root_open::before {
+    content: "\f107";
+  }
+
+  &.root_close::before {
+    content: "\f105";
+  }
+
+  &.roots_open::before {
+    content: "\f107";
+  }
+
+  &.root_docu {
+    background: none;
+  }
+
+  &.roots_docu::before {
+  }
+
+  &.noline_docu {
+    background: none;
+  }
+
+  &.ico_open::before {
+    content: "\f07c";
+  }
+
+  &.edit::before {
+    content: "\f044";
+  }
+
+  &.remove::before {
+    content: "\f1f8";
+  }
+
+  &.add::before {
+    content: "\f067";
+  }
+}