perf: Added Tab drag and drop functionality

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/koko-base:20240904_072212 AS stage-build
+FROM jumpserver/koko-base:20240910_061253 AS stage-build
 WORKDIR /opt/koko
 ARG TARGETARCH
 COPY . .

ui/package.json

@@ -23,6 +23,7 @@
     "nora-zmodemjs": "^1.1.1",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
+    "sortablejs": "^1.15.3",
     "uuid": "^10.0.0",
     "vue": "^3.4.31",
     "vue-draggable-plus": "^0.5.2",
@@ -33,6 +34,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.14.11",
+    "@types/sortablejs": "^1.15.0",
     "@vicons/carbon": "^0.12.0",
     "@vicons/fa": "^0.12.0",
     "@vicons/fluent": "^0.12.0",

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

@@ -47,11 +47,7 @@
                     </n-watermark>
                 </n-scrollbar>
             </n-tab-pane>
-            <template v-slot:suffix>
-                <!-- <TabSuffix /> -->
-            </template>
         </n-tabs>
-        <!-- <Tip v-if="panels.length === 0" /> -->
     </n-layout>
     <Settings :settings="settings" />
 </template>
@@ -75,14 +71,12 @@ import { ArrowDown, ArrowUp, ArrowForward, ArrowBack } from '@vicons/ionicons5';
 import xtermTheme from 'xterm-theme';
 import mittBus from '@/utils/mittBus.ts';
 
-// import { useDraggable, type UseDraggableReturn } from 'vue-draggable-plus';
+import { useDraggable, type UseDraggableReturn } from 'vue-draggable-plus';
 
-// import Tip from './components/Tip/index.vue';
 import Share from '@/components/Share/index.vue';
 import Settings from '@/components/Settings/index.vue';
 import ThemeConfig from '@/components/ThemeConfig/index.vue';
 import CustomTerminal from '@/components/CustomTerminal/index.vue';
-// import TabSuffix from '@/components/Kubernetes/MainContent/components/TabSuffix/index.vue';
 
 import { NMessageProvider, TabPaneProps, useDialog, useNotification } from 'naive-ui';
 
@@ -299,9 +293,57 @@ const resetShareDialog = () => {
     dialog.destroyAll();
 };
 
-// const draggable = useDraggable<UseDraggableReturn>(el, panels.value, {
-//     animation: 150
-// });
+const initializeDraggable = () => {
+    const tabsContainer = document.querySelector('.n-tabs-wrapper'); // 使用合适的选择器
+
+    if (tabsContainer) {
+        // @ts-ignore
+        useDraggable<UseDraggableReturn>(tabsContainer, panels.value, {
+            animation: 150,
+            onStart: () => console.log('Drag started'),
+            onEnd: async event => {
+                const newIndex = event.newIndex;
+                const oldIndex = event.oldIndex;
+
+                if (typeof oldIndex === 'number' && typeof newIndex === 'number' && oldIndex !== newIndex) {
+                    // 获取索引，确保它们从 0 开始
+                    // ? 不减 1 默认会从 1 的索引开始
+                    const oldIndex = event.oldIndex! - 1;
+                    const newIndex = event.newIndex! - 1;
+
+                    if (
+                        oldIndex < 0 ||
+                        newIndex < 0 ||
+                        oldIndex >= panels.value.length ||
+                        newIndex >= panels.value.length
+                    ) {
+                        console.error('Invalid index values:', oldIndex, newIndex);
+                        return;
+                    }
+
+                    // 生成新的 panels 数组
+                    const movedPanel = panels.value[oldIndex];
+                    const updatedPanels = [...panels.value];
+
+                    updatedPanels.splice(oldIndex, 1);
+                    updatedPanels.splice(newIndex, 0, movedPanel);
+
+                    // await nextTick();
+
+                    panels.value = updatedPanels;
+
+                    // 更新当前激活的标签
+                    const newActiveTab: string = panels.value[newIndex]?.name as string;
+
+                    if (newActiveTab) {
+                        nameRef.value = newActiveTab;
+                        terminalStore.setTerminalConfig('currentTab', newActiveTab);
+                    }
+                }
+            }
+        });
+    }
+};
 
 const onSocketData = (msgType: string, msg: any, terminal: Terminal) => {
     switch (msgType) {
@@ -500,26 +542,9 @@ const handleWriteData = async (type: string) => {
 };
 
 onMounted(() => {
-    const tabsElement = el.value?.$el?.querySelector('.n-tabs-tab');
-
-    if (tabsElement) {
-        // 使用 useDraggable 使 n-tabs 支持拖拽排序
-        // draggable(tabsElement, panels.value, {
-        //     animation: 150,
-        //     onEnd: event => {
-        //         // 处理拖拽结束后的面板顺序更新
-        //         const movedPanel = panels.value.splice(event.oldIndex, 1)[0];
-        //         panels.value.splice(event.newIndex, 0, movedPanel);
-        //
-        //         // 更新当前选中的标签
-        //         if (panels.value.length > 0) {
-        //             nameRef.value = panels.value[Math.min(event.newIndex, panels.value.length - 1)]
-        //                 .name as string;
-        //             terminalStore.setTerminalConfig('currentTab', nameRef.value);
-        //         }
-        //     }
-        // });
-    }
+    nextTick(() => {
+        initializeDraggable();
+    });
 
     mittBus.on('connect-terminal', currentNode => {
         // 检查 currentNode.key 是否已经存在

ui/src/views/Connection/index.vue

@@ -279,10 +279,6 @@ const onEvent = (event: string, data: any) => {
 .common-terminal {
     :deep(.terminal-container) {
         overflow: hidden;
-        .terminal {
-            //padding-top: 10px;
-            //padding-left: 10px;
-        }
 
         .xterm-viewport {
             overflow: hidden;

ui/yarn.lock

@@ -401,6 +401,11 @@
   dependencies:
     undici-types "~6.13.0"
 
+"@types/sortablejs@^1.15.0":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.15.0.tgz#695e481752e2a0a311c5e73b51d5f666fc202f93"
+  integrity sha512-qrhtM7M41EhH4tZQTNw2/RJkxllBx3reiJpTbgWCM2Dx0U1sZ6LwKp9lfNln9uqE26ZMKUaPEYaD4rzvOWYtZw==
+
 "@types/sortablejs@^1.15.8":
   version "1.15.8"
   resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.15.8.tgz#11ed555076046e00869a5ef85d1e7651e7a66ef6"
@@ -1529,6 +1534,11 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+sortablejs@^1.15.3:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.3.tgz#033668db5ebfb11167d1249ab88e748f27959e29"
+  integrity sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"