From 1cd9165a614dfea8561b224ef131f7b6a9e5165e Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 21 Mar 2022 18:55:46 +0800
Subject: [PATCH] add switch

---
 src/views/dashboard/panel/Tool.vue | 48 +++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 1219c487..c82d5b38 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -72,19 +72,28 @@ limitations under the License. -->
         />
       </div>
     </div>
-    <div class="tool-icons" v-if="dashboardStore.editMode">
-      <span
-        @click="clickIcons(t)"
-        v-for="(t, index) in toolIcons"
-        :key="index"
-        :title="t.content"
-      >
-        <el-tooltip :content="t.content" placement="bottom">
-          <i>
-            <Icon class="icon-btn" size="sm" :iconName="t.name" />
-          </i>
-        </el-tooltip>
-      </span>
+    <div class="flex-h tools">
+      <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
+        <span
+          @click="clickIcons(t)"
+          v-for="(t, index) in toolIcons"
+          :key="index"
+          :title="t.content"
+        >
+          <el-tooltip :content="t.content" placement="bottom">
+            <i>
+              <Icon class="icon-btn" size="sm" :iconName="t.name" />
+            </i>
+          </el-tooltip>
+        </span>
+      </div>
+      <div class="switch">
+        <el-switch
+          v-model="dashboardStore.editMode"
+          active-text="Edit"
+          inactive-text="View"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -106,7 +115,9 @@ import {
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
@@ -434,12 +445,17 @@ function getTools() {
 <style lang="scss" scoped>
 .dashboard-tool {
   text-align: right;
-  padding: 5px;
+  padding: 3px 5px 5px 5px;
   background: rgb(240, 242, 245);
   border-bottom: 1px solid #dfe4e8;
   justify-content: space-between;
 }
 
+.switch {
+  padding-top: 2px;
+  margin: 0 10px;
+}
+
 .label {
   font-size: 12px;
   display: inline-block;
@@ -450,6 +466,10 @@ function getTools() {
   margin-top: 2px;
 }
 
+.tools {
+  justify-content: space-between;
+}
+
 .icon-btn {
   display: inline-block;
   padding: 3px;