增加退出账号前提示

src/renderer/src/views/components/headers/components/setTool/setTool.vue

@@ -13,18 +13,10 @@
         </div>
       </div>
     </div> -->
-    <el-tooltip
-      v-for="(item, i) of setList"
-      :key="item.id"
-      :content="t('iconTitle.' + item.name)"
-      effect="customized"
-      :hide-after="0"
-    >
-      <div
-        class="set_item"
-        :class="{ 'last-item': i === setList.length - 1 }"
-        @click="item.callback"
-      >
+    <el-tooltip v-for="(item, i) of setList" :key="item.id" :content="t('iconTitle.' + item.name)" effect="customized"
+      :hide-after="0">
+      <div class="set_item" :class="{ 'last-item': i === setList.length - 1, 'first-item': i === 0 }"
+        @click="item.callback">
         <svg-icon :name="item.icon" :size="20"></svg-icon>
       </div>
     </el-tooltip>
@@ -52,20 +44,29 @@ eventBus.on('settingPop', (data) => {
   data ? setPupRef.value.open('current') : setPupRef.value.close()
 })
 const logout = async (e) => {
-  let res = await LoginApi.logout()
-  if (window.earth) {
-    window.earth.destroy()
-    window.earth = null
-  }
-  if (res.code === 200) {
-    router.push({
-      path: '/',
-      query: {
-        type: 'logout'
+  ElMessageBox.confirm('您确定要退出当前账号?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      let res = await LoginApi.logout()
+      if (window.earth) {
+        window.earth.destroy()
+        window.earth = null
+      }
+      if (res.code === 200) {
+        router.push({
+          path: '/',
+          query: {
+            type: 'logout'
+          }
+        })
+        // localStorage.clear()
       }
     })
-    // localStorage.clear()
-  }
+    .catch(() => {
+    })
 }
 
 const fullScreen = (item) => {
@@ -78,25 +79,24 @@ const resetShow = (item) => {
 
 const setList = ref([
   // 标准版本
+  // {id: 4, index: 2, icon: 'layerTitleBg', className: 'header_public', callback: this.setShow},
   {
     id: 0,
     index: 0,
-    icon: 'beidou',
-    name: 'locate',
+    icon: 'out_login',
+    name: 'logout',
     className: 'header_public',
-    dbcallback: (e) => {},
-    callback: (e) => {}
-    //   dbcallback: this.flyTo,
-    //   callback: this.locate,
+    dbcallback: null,
+    callback: logout
   },
   {
     id: 1,
     index: 1,
-    icon: 'sys_reset',
+    icon: 'sys_set',
+    name: 'set',
     className: 'header_public',
-    name: 'reset',
     dbcallback: null,
-    callback: resetShow
+    callback: setShow
   },
   {
     id: 2,
@@ -109,30 +109,33 @@ const setList = ref([
   },
   {
     id: 3,
-    index: 3,
-    icon: 'sys_set',
-    name: 'set',
+    index: 4,
+    icon: 'sys_reset',
     className: 'header_public',
+    name: 'reset',
     dbcallback: null,
-    callback: setShow
+    callback: resetShow
   },
-  // {id: 4, index: 2, icon: 'layerTitleBg', className: 'header_public', callback: this.setShow},
   {
     id: 4,
     index: 4,
-    icon: 'out_login',
-    name: 'logout',
+    icon: 'beidou',
+    name: 'locate',
     className: 'header_public',
-    dbcallback: null,
-    callback: logout
-  }
+    dbcallback: (e) => { },
+    callback: (e) => { }
+    //   dbcallback: this.flyTo,
+    //   callback: this.locate,
+  },
 ])
 
 ipcRenderer.invoke('getIsFullScreen').then((res) => {
   setList.value[2].icon = res ? 'full_screen_exit' : 'full_screen'
+  setList.value[2].name = res ? 'shrink' : 'fullScreen'
 })
 ipcRenderer.on('fullscreen-status-changed', (event, isFullscreen) => {
   setList.value[2].icon = isFullscreen ? 'full_screen_exit' : 'full_screen'
+  setList.value[2].name = isFullscreen ? 'shrink' : 'fullScreen'
 })
 </script>
 
@@ -147,6 +150,7 @@ ipcRenderer.on('fullscreen-status-changed', (event, isFullscreen) => {
   //   background: var(--svg-headColorbg);
   display: flex;
   align-items: center;
+  flex-direction: row-reverse;
   //   justify-content: space-between;
   //   border: 1px solid var(--svg-headColor3);
   padding: 10px 0;
@@ -167,15 +171,13 @@ ipcRenderer.on('fullscreen-status-changed', (event, isFullscreen) => {
     top: 0;
     bottom: 0;
     width: 1px;
-    background: linear-gradient(
-      180deg,
-      rgba(var(--color-base1), 0),
-      rgba(var(--color-base1), 1),
-      rgba(204, 204, 204, 0)
-    );
+    background: linear-gradient(180deg,
+        rgba(var(--color-base1), 0),
+        rgba(var(--color-base1), 1),
+        rgba(204, 204, 204, 0));
   }
 
-  .set_item.last-item::after {
+  .set_item.first-item::after {
     display: none;
   }