fixed: Fixed an issue where users would be displayed even when disconnected

ui/src/components/Kubernetes/MainContent/index.vue

@@ -96,15 +96,7 @@ import Settings from '@/components/Settings/index.vue';
 import ThemeConfig from '@/components/ThemeConfig/index.vue';
 import CustomTerminal from '@/components/CustomTerminal/index.vue';
 
-import {
-    DropdownOption,
-    NIcon,
-    NMessageProvider,
-    TabPaneProps,
-    useDialog,
-    useMessage,
-    useNotification
-} from 'naive-ui';
+import { DropdownOption, NIcon, NMessageProvider, TabPaneProps, useDialog, useMessage } from 'naive-ui';
 import type { ISettingProp, shareUser } from '@/views/interface';
 import type { customTreeOption } from '@/hooks/interface';
 
@@ -126,7 +118,6 @@ const props = defineProps<{
 
 const { t } = useI18n();
 const dialog = useDialog();
-const notification = useNotification();
 
 const treeStore = useTreeStore();
 const paramsStore = useParamsStore();
@@ -139,6 +130,7 @@ const el = ref();
 
 const dropdownY = ref(0);
 const dropdownX = ref(0);
+const deleteUserCounter = ref(0);
 const nameRef = ref('');
 const sessionId = ref('');
 const waterMarkContent = ref('');
@@ -547,11 +539,25 @@ const onSocketData = (msgType: string, msg: any, terminal: Terminal) => {
         }
         case 'CLOSE': {
             enableShare.value = false;
+            break;
+        }
+        case 'K8S_CLOSE': {
+            enableShare.value = false;
+
+            deleteUserCounter.value--;
+
+            // 用于删除根用户
+            if (deleteUserCounter.value === 0) {
+                for (const key in onlineUsersMap) {
+                    delete onlineUsersMap[key];
+                }
+            }
+
+            // 用于删除分享的用户
+            if (onlineUsersMap.hasOwnProperty(msg.id)) {
+                delete onlineUsersMap[msg.id];
+            }
 
-            notification.error({
-                content: t('WebSocketClosed'),
-                duration: 50000
-            });
             break;
         }
         default:
@@ -746,6 +752,7 @@ onMounted(() => {
 
         nameRef.value = key;
         terminalStore.setTerminalConfig('currentTab', key);
+        deleteUserCounter.value++;
     });
 });
 

ui/src/views/Connection/index.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { useLogger } from '@/hooks/useLogger.ts';
-import { useDialog, useMessage, useNotification } from 'naive-ui';
+import { useDialog, useMessage } from 'naive-ui';
 import { useParamsStore } from '@/store/modules/params.ts';
 import { useTerminalStore } from '@/store/modules/terminal.ts';
 
@@ -51,11 +51,10 @@ const { setting } = storeToRefs(paramsStore);
 
 const dialog = useDialog();
 const message = useMessage();
-const notification = useNotification();
 
-const terminalType = ref<string>('common');
 const sessionId = ref<string>('');
 const themeName = ref<string>('Default');
+const terminalType = ref<string>('common');
 const enableShare = ref<boolean>(false);
 const userOptions = ref<shareUser[]>([]);
 
@@ -148,11 +147,22 @@ const settings = computed((): ISettingProp[] => {
     ];
 });
 
+/**
+ * 重置分享连接表单
+ */
 const resetShareDialog = () => {
     paramsStore.setShareId('');
     paramsStore.setShareCode('');
     dialog.destroyAll();
 };
+
+/**
+ * 抛出到外层的 Socket message 事件处理
+ *
+ * @param msgType
+ * @param msg
+ * @param terminal
+ */
 const onSocketData = (msgType: string, msg: any, terminal: Terminal) => {
     switch (msgType) {
         case 'TERMINAL_SESSION': {
@@ -245,10 +255,11 @@ const onSocketData = (msgType: string, msg: any, terminal: Terminal) => {
         case 'CLOSE': {
             enableShare.value = false;
 
-            notification.error({
-                content: t('WebSocketClosed'),
-                duration: 50000
-            });
+            // 用于删除分享的用户
+            if (onlineUsersMap.hasOwnProperty(msg.id)) {
+                delete onlineUsersMap[msg.id];
+            }
+
             break;
         }
         default:
@@ -257,6 +268,7 @@ const onSocketData = (msgType: string, msg: any, terminal: Terminal) => {
 
     debug('On WebSocket Data:', msg);
 };
+
 const onEvent = (event: string, data: any) => {
     switch (event) {
         case 'reconnect':