fix: 调整loading元素

11 files changed, 140 insertions, 110 deletions

diff --git a/src/components/layout/index.vue b/src/components/layout/index.vue
index d854c1b..d078487 100644
--- a/src/components/layout/index.vue
+++ b/src/components/layout/index.vue
@@ -105,7 +105,7 @@ const gotoProfileManage = (val) => {
     .pageContent {
       position: relative;
       z-index: 5;
-      padding: 24px 50px 24px calc(64px + 50px);
+      padding-left: 64px;
       width: 100%;
       height: 100%;
     }
diff --git a/src/styles/components/detail.scss b/src/styles/components/detail.scss
index a76d301..1d16299 100644
--- a/src/styles/components/detail.scss
+++ b/src/styles/components/detail.scss
@@ -1,6 +1,8 @@
 .detail {
-  overflow: hidden;
+  padding: 24px 50px;
+  width: 100%;
   height: 100%;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 20px;
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
index 6cba9a7..60c842c 100644
--- a/src/styles/components/table.scss
+++ b/src/styles/components/table.scss
@@ -24,6 +24,7 @@
 }
 
 .pageList {
+  padding: 24px 50px;
   width: 100%;
   height: 100%;
   .list-header {
diff --git a/src/views/applications/history.vue b/src/views/applications/history.vue
index 114aa54..9d8d9d7 100644
--- a/src/views/applications/history.vue
+++ b/src/views/applications/history.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="applications_history" class="pageList">
+  <div id="applications_history" class="pageList" v-loading="loading">
     <div class="list-header">
       <div class="list-header-left">
         <span>{{ t('overall.history') }}</span>
@@ -21,7 +21,6 @@
     <!-- table -->
     <div class="list-table">
       <el-table
-        v-loading="loading"
         border
         :data="tableData"
         :default-sort="defaultSort"
diff --git a/src/views/applications/index.vue b/src/views/applications/index.vue
index 2c7f8e1..1fcd6e9 100644
--- a/src/views/applications/index.vue
+++ b/src/views/applications/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="applications" class="pageList">
+  <div id="applications" class="pageList" v-loading="loading">
     <div class="list-header">
       <div class="list-header-left">
         <span>{{ t('overall.applications') }}</span>
@@ -63,7 +63,6 @@
       :infinite-scroll-distance="10"
     >
       <el-table
-        v-loading="loading"
         border
         :data="tableData"
         :default-sort="defaultSort"
@@ -323,8 +322,7 @@ const paginat = reactive({
   noMore: false,
 });
 
-const disabledLoad = computed(() => loading.value || paginat.noMore);
-
+const disabledLoad = computed(() => paginat.noMore || loading.value);
 const loadMore = () => {
   paginat.current++;
   fetchList(false);
diff --git a/src/views/envMgts/index.vue b/src/views/envMgts/index.vue
index ba758a9..9f2ff18 100644
--- a/src/views/envMgts/index.vue
+++ b/src/views/envMgts/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="envMgts" class="pageList">
+  <div id="envMgts" class="pageList" v-loading="loading">
     <div class="list-header">
       <div class="list-header-left">
         <span>{{ t('overall.environments') }}</span>
@@ -13,7 +13,7 @@
           v-model="keyword"
           size="large"
           :placeholder="t('overall.search')"
-          style="width: 450px;margin-right:20px;"
+          style="width: 450px; margin-right: 20px"
           clearable
           @keydown.enter="fetchList()"
           @clear="fetchList()"
@@ -22,11 +22,7 @@
             <el-icon><Search /></el-icon>
           </template>
         </el-input>
-        <el-button
-                type="primary"
-                size="large"
-                @click="newEnv"
-        >
+        <el-button type="primary" size="large" @click="newEnv">
           {{ t('env_mgt.create_env') }}
         </el-button>
       </div>
@@ -40,7 +36,6 @@
       :infinite-scroll-distance="10"
     >
       <el-table
-        v-loading="loading"
         border
         :data="tableData"
         :default-sort="defaultSort"
@@ -61,17 +56,23 @@
           <template #default="scope">
             <!-- name -->
             <template v-if="item.prop === 'name'">
-              <span :class="{
-                              'in-use': scope.row.status === 2,
-                              'primary-color': scope.row.status === 1 || scope.row.status === 0,
-                            }"
-              >{{ scope.row.name }}</span>
+              <span
+                :class="{
+                  'in-use': scope.row.status === 2,
+                  'primary-color':
+                    scope.row.status === 1 || scope.row.status === 0,
+                }"
+                >{{ scope.row.name }}</span
+              >
             </template>
             <!-- workspaces -->
             <template v-else-if="item.prop === 'workspaces'">
               <div class="environment-workspaces">
-                <div v-for="ws in scope.row.workspaces" :class="{'in-use': scope.row.status === 2}">
-                  <i class="asw-icon icon-Workbooks" ></i>{{ws.name}}
+                <div
+                  v-for="ws in scope.row.workspaces"
+                  :class="{ 'in-use': scope.row.status === 2 }"
+                >
+                  <i class="asw-icon icon-Workbooks"></i>{{ ws.name }}
                 </div>
               </div>
             </template>
@@ -111,23 +112,31 @@
           </template>
         </el-table-column>
         <el-table-column
-                width="100"
-                fixed="right"
-                align="center"
-                :label="t('overall.actions')"
+          width="100"
+          fixed="right"
+          align="center"
+          :label="t('overall.actions')"
         >
           <template #default="scope">
             <el-tooltip
-                    effect="dark"
-                    :content="t('overall.edit')"
-                    placement="top">
-              <i class="asw-icon icon-edit cp action-button" @click="tableEdit(scope.row)"></i>
+              effect="dark"
+              :content="t('overall.edit')"
+              placement="top"
+            >
+              <i
+                class="asw-icon icon-edit cp action-button"
+                @click="tableEdit(scope.row)"
+              ></i>
             </el-tooltip>
             <el-tooltip
-                    effect="dark"
-                    :content="t('overall.delete')"
-                    placement="top">
-              <i class="asw-icon icon-Delete cp action-button" @click="tableDelete(scope.row)"></i>
+              effect="dark"
+              :content="t('overall.delete')"
+              placement="top"
+            >
+              <i
+                class="asw-icon icon-Delete cp action-button"
+                @click="tableDelete(scope.row)"
+              ></i>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -139,7 +148,7 @@
 <script setup>
 import { ref, reactive, onBeforeMount, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { envMgtListApi, envMgtDeleteApi} from '@/axios/api';
+import { envMgtListApi, envMgtDeleteApi } from '@/axios/api';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { toThousands } from '@/utils';
 import { useSystemStore } from '@/store/index';
@@ -223,15 +232,18 @@ const paginat = reactive({
   noMore: false,
 });
 
-const disabledLoad = computed(() => loading.value || paginat.noMore);
+const disabledLoad = computed(() => paginat.noMore || loading.value);
 const isSelfInUse = computed(() => {
-  return (item)=> {
-    if(item && item.user && item.workspace) {
-      return item.user.id === userInfo.value.id && item.workspace.id ===  workspace.value.id;
+  return (item) => {
+    if (item && item.user && item.workspace) {
+      return (
+        item.user.id === userInfo.value.id &&
+        item.workspace.id === workspace.value.id
+      );
     } else {
       return false;
     }
-  }
+  };
 });
 
 // 新增
@@ -240,7 +252,7 @@ const newEnv = () => {
     name: 'envMgt_add',
     params: {},
   });
-}
+};
 
 // 编辑
 const tableEdit = async (row) => {
@@ -248,31 +260,37 @@ const tableEdit = async (row) => {
     name: 'envMgt_edit',
     params: {
       id: row.id,
-    }
+    },
   });
 };
 
 // 删除
 const tableDelete = (row) => {
-  ElMessageBox.confirm(t('env_mgt.delete_hint_message', {
-    environment: row.name
-  }), t('env_mgt.delete_hint_title'), {
-    confirmButtonText: t('overall.delete'),
-    cancelButtonText: t('overall.cancel'),
-    iconClass: 'width:0px;height:0px;',
-    customClass: 'delete-box',
-  }).then(async () => {
-    const params = {
-      ids: row.id,
-    };
-    const res = await envMgtDeleteApi(params);
-    if (res.code == 200) {
-      fetchList();
-      ElMessage.success(t('message.save_success'));
-    } else {
-      ElMessage.error(res.msg || res.error);
+  ElMessageBox.confirm(
+    t('env_mgt.delete_hint_message', {
+      environment: row.name,
+    }),
+    t('env_mgt.delete_hint_title'),
+    {
+      confirmButtonText: t('overall.delete'),
+      cancelButtonText: t('overall.cancel'),
+      iconClass: 'width:0px;height:0px;',
+      customClass: 'delete-box',
     }
-  }).catch((e) => {});
+  )
+    .then(async () => {
+      const params = {
+        ids: row.id,
+      };
+      const res = await envMgtDeleteApi(params);
+      if (res.code == 200) {
+        fetchList();
+        ElMessage.success(t('message.save_success'));
+      } else {
+        ElMessage.error(res.msg || res.error);
+      }
+    })
+    .catch((e) => {});
 };
 
 const loadMore = () => {
@@ -291,7 +309,7 @@ const fetchList = async (reset = true) => {
     q: keyword.value,
     current: paginat.current,
     size: paginat.size,
-    orderBy: orderBy.value
+    orderBy: orderBy.value,
   };
 
   let res = await envMgtListApi(params);
@@ -303,7 +321,7 @@ const fetchList = async (reset = true) => {
       // 合并请求的数据
       tableData.value = [...tableData.value, ...records];
     }
-    paginat.total = res.data.total
+    paginat.total = res.data.total;
     // 判断是否有无更多的数据
     paginat.noMore = tableData.value.length >= res.data.total;
   } else {
@@ -331,14 +349,13 @@ onBeforeMount(() => {
     fetchList();
   } catch (error) {}
 });
-
 </script>
 
 <style lang="scss">
 .environment-workspaces {
   display: flex;
-  flex-direction:column;
-  padding-left:10px;
+  flex-direction: column;
+  padding-left: 10px;
   i {
     margin-right: 6px;
   }
diff --git a/src/views/environments/index.vue b/src/views/environments/index.vue
index 7871ff9..30fb05e 100644
--- a/src/views/environments/index.vue
+++ b/src/views/environments/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="environments" class="pageList">
+  <div id="environments" class="pageList" v-loading="loading">
     <div class="list-header">
       <div class="list-header-left">
         <span>{{ t('overall.environments') }}</span>
@@ -56,7 +56,6 @@
       :infinite-scroll-distance="10"
     >
       <el-table
-        v-loading="loading"
         border
         :data="tableData"
         :default-sort="defaultSort"
@@ -242,7 +241,7 @@ const paginat = reactive({
   noMore: false,
 });
 
-const disabledLoad = computed(() => loading.value || paginat.noMore);
+const disabledLoad = computed(() => paginat.noMore || loading.value);
 const isSelfInUse = computed(() => {
   return (item) => {
     if (item && item.user && item.workspace) {
diff --git a/src/views/environments/start.vue b/src/views/environments/start.vue
index b1171c8..3c09efc 100644
--- a/src/views/environments/start.vue
+++ b/src/views/environments/start.vue
@@ -559,12 +559,15 @@ const connect = () => {
   rfb.qualityLevel = quality.value; // 范围为[0-9]的整数，控制所需的JPEG质量。0表示低质量，9表示高质量。
   rfb.compressionLevel = compressionLevel.value; // 范围为[0-9]的整数，用于控制所需的压缩级别。0表示不压缩。级别1使用最少的CPU资源，实现较弱的压缩比，而级别9提供最好的压缩，但在服务器端的CPU消耗方面很慢。
 
-  rfb._sock._websocket.onclose = (err) => {
+  rfb._sock._websocket.addEventListener('close', (err) => {
     if (err.reason) {
       ElMessage.error(err.reason);
     }
     desktopEnd();
-  };
+  });
+  rfb._sock._websocket.addEventListener('message', (e) => {
+    // console.log(e);
+  });
 };
 
 // novnc调整画质
@@ -1082,7 +1085,6 @@ onBeforeUnmount(() => {
   display: flex;
   gap: 0 10px;
   .desktop-left {
-    flex-shrink: 0;
     width: 50%;
     height: 100%;
     background: var(--background_secondary);
@@ -1142,7 +1144,6 @@ onBeforeUnmount(() => {
     }
   }
   .desktop-right {
-    flex-shrink: 0;
     width: 50%;
     height: 100%;
     background: var(--background_secondary);
diff --git a/src/views/pcaps/index.vue b/src/views/pcaps/index.vue
index 7191f72..336d045 100644
--- a/src/views/pcaps/index.vue
+++ b/src/views/pcaps/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="pcaps" class="pageList">
+  <div id="pcaps" class="pageList" v-loading="loading || parseLoading">
     <div class="list-header">
       <div class="list-header-left">
         <span>{{ t('overall.pcaps') }}</span>
@@ -97,7 +97,6 @@
       :infinite-scroll-distance="10"
     >
       <el-table
-        v-loading="loading || parseLoading"
         border
         :data="tableData"
         :default-sort="defaultSort"
@@ -410,8 +409,7 @@ const paginat = reactive({
   noMore: false,
 });
 
-const disabledLoad = computed(() => loading.value || paginat.noMore);
-
+const disabledLoad = computed(() => paginat.noMore || loading.value);
 const loadMore = () => {
   paginat.current++;
   fetchList(false);
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index a1c30cd..3eea28b 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="users" class="pageList">
+  <div id="users" class="pageList" v-loading="loading">
     <div class="list-header">
       <div class="list-header-left">
-        <span>{{t('overall.users')}}</span>
+        <span>{{ t('overall.users') }}</span>
         <span class="list-header-number">
           （{{ toThousands(paginat.total) }}）
         </span>
@@ -36,7 +36,6 @@
       :infinite-scroll-distance="10"
     >
       <el-table
-        v-loading="loading"
         border
         :data="tableData"
         :default-sort="defaultSort"
@@ -55,16 +54,25 @@
           :sort-orders="['ascending', 'descending']"
         >
           <template #default="scope">
-            <template v-if="item.prop === 'createTimestamp' || item.prop === 'lastLoginTimestamp'">
+            <template
+              v-if="
+                item.prop === 'createTimestamp' ||
+                item.prop === 'lastLoginTimestamp'
+              "
+            >
               <div class="primary-secondary">
-                <span>{{moment(scope.row[item.prop]).format('YYYY-MM-DD')}}</span>
-                <span class="secondary">{{moment(scope.row[item.prop]).format('HH:mm:ss')}}</span>
+                <span>{{
+                  moment(scope.row[item.prop]).format('YYYY-MM-DD')
+                }}</span>
+                <span class="secondary">{{
+                  moment(scope.row[item.prop]).format('HH:mm:ss')
+                }}</span>
               </div>
             </template>
             <template v-else-if="item.prop === 'name'">
               <div class="primary-secondary">
-                <span>{{scope.row.name}}</span>
-                <span class="secondary">@{{scope.row.userName}}</span>
+                <span>{{ scope.row.name }}</span>
+                <span class="secondary">@{{ scope.row.userName }}</span>
               </div>
             </template>
             <template v-else-if="scope.row[item.prop]">
@@ -83,14 +91,22 @@
             <el-tooltip
               effect="dark"
               :content="t('overall.edit')"
-              placement="top">
-              <i class="asw-icon icon-edit cp action-button" @click="tableEdit(scope.row)"></i>
+              placement="top"
+            >
+              <i
+                class="asw-icon icon-edit cp action-button"
+                @click="tableEdit(scope.row)"
+              ></i>
             </el-tooltip>
             <el-tooltip
               effect="dark"
               :content="t('overall.delete')"
-              placement="top">
-              <i class="asw-icon icon-Delete cp action-button" @click="tableDelete(scope.row)"></i>
+              placement="top"
+            >
+              <i
+                class="asw-icon icon-Delete cp action-button"
+                @click="tableDelete(scope.row)"
+              ></i>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -169,8 +185,7 @@ const paginat = reactive({
   noMore: false,
 });
 
-const disabledLoad = computed(() => loading.value || paginat.noMore);
-
+const disabledLoad = computed(() => paginat.noMore || loading.value);
 const loadMore = () => {
   paginat.current++;
   fetchList(false);
@@ -187,7 +202,7 @@ const fetchList = async (reset = true) => {
     q: keyword.value,
     current: paginat.current,
     size: paginat.size,
-    orderBy: orderBy.value
+    orderBy: orderBy.value,
   };
   const res = await userListApi(params);
   if (res.code == 200) {
@@ -198,7 +213,7 @@ const fetchList = async (reset = true) => {
       // 合并请求的数据
       tableData.value = [...tableData.value, ...records];
     }
-    paginat.total = res.data.total
+    paginat.total = res.data.total;
     // 判断是否有无更多的数据
     paginat.noMore = tableData.value.length >= res.data.total;
   } else {
@@ -225,7 +240,7 @@ const tableEdit = async (row) => {
     name: 'user_edit',
     params: {
       id: row.id,
-    }
+    },
   });
 };
 
@@ -235,18 +250,20 @@ const tableDelete = (row) => {
     confirmButtonText: t('overall.confirm'),
     cancelButtonText: t('overall.cancel'),
     type: 'warning',
-  }).then(async () => {
-    const params = {
-      ids: row.id,
-    };
-    const res = await userDeleteApi(params);
-    if (res.code == 200) {
-      fetchList();
-      ElMessage.success(t('message.save_success'));
-    } else {
-      ElMessage.error(res.msg || res.error);
-    }
-  }).catch(() => {});
+  })
+    .then(async () => {
+      const params = {
+        ids: row.id,
+      };
+      const res = await userDeleteApi(params);
+      if (res.code == 200) {
+        fetchList();
+        ElMessage.success(t('message.save_success'));
+      } else {
+        ElMessage.error(res.msg || res.error);
+      }
+    })
+    .catch(() => {});
 };
 
 onBeforeMount(() => {
diff --git a/src/views/workspaces/members/index.vue b/src/views/workspaces/members/index.vue
index ca95639..5d4339f 100644
--- a/src/views/workspaces/members/index.vue
+++ b/src/views/workspaces/members/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="workspaceMembers" class="pageList">
+  <div id="workspaceMembers" class="pageList" v-loading="loading">
     <div class="list-header">
       <div class="list-header-left">
         <span>{{ t('overall.workspace_members') }}</span>
@@ -40,7 +40,6 @@
       :infinite-scroll-distance="10"
     >
       <el-table
-        v-loading="loading"
         border
         :data="tableData"
         :default-sort="defaultSort"
@@ -296,8 +295,7 @@ const paginat = reactive({
   noMore: false,
 });
 
-const disabledLoad = computed(() => loading.value || paginat.noMore);
-
+const disabledLoad = computed(() => paginat.noMore || loading.value);
 const loadMore = () => {
   paginat.current++;
   fetchList(false);