refactor: pacakge version upgrade

frontend/package.json

@@ -12,14 +12,17 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
         "@vueuse/core": "^12.7.0",
+        "@xterm/addon-fit": "^0.10.0",
+        "@xterm/addon-search": "^0.15.0",
+        "@xterm/addon-web-links": "^0.11.0",
+        "@xterm/xterm": "^5.5.0",
         "asciinema-player": "^3.9.0",
         "axios": "^1.6.2",
         "clipboard": "^2.0.11",
-        "cropperjs": "^1.6.1",
         "crypto-js": "^4.2.0",
         "dayjs": "^1.11.13",
         "echarts": "^5.6.0",
-        "element-plus": "^2.9.4",
+        "element-plus": "^2.9.5",
         "js-base64": "^3.7.7",
         "jsencrypt": "^3.3.2",
         "lodash": "^4.17.21",
@@ -39,11 +42,7 @@
         "vue": "^3.5.13",
         "vue-i18n": "^11.1.1",
         "vue-router": "^4.5.0",
-        "vuedraggable": "^4.1.0",
-        "xterm": "^5.3.0",
-        "xterm-addon-fit": "^0.8.0",
-        "xterm-addon-search": "^0.13.0",
-        "xterm-addon-web-links": "^0.9.0"
+        "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
         "@types/crypto-js": "^4.2.2",
@@ -62,7 +61,7 @@
         "prettier": "^3.2.5",
         "sass": "^1.85.0",
         "typescript": "^5.7.3",
-        "vite": "^6.1.1",
+        "vite": "^6.2.0",
         "vite-plugin-progress": "0.0.7",
         "vue-eslint-parser": "^9.4.3"
     },

frontend/src/components/cropper/index.vue

@@ -1,145 +0,0 @@
-<template>
-    <div>
-        <el-dialog title="更换头像" v-model="isShowDialog" width="769px">
-            <div class="cropper-warp">
-                <div class="cropper-warp-left">
-                    <img :src="cropperImg" class="cropper-warp-left-img" />
-                </div>
-                <div class="cropper-warp-right">
-                    <div class="cropper-warp-right-title">预览</div>
-                    <div class="cropper-warp-right-item">
-                        <div class="cropper-warp-right-value">
-                            <img :src="cropperImgBase64" class="cropper-warp-right-value-img" />
-                        </div>
-                        <div class="cropper-warp-right-label">100 x 100</div>
-                    </div>
-                    <div class="cropper-warp-right-item">
-                        <div class="cropper-warp-right-value">
-                            <img :src="cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
-                        </div>
-                        <div class="cropper-warp-right-label">50 x 50</div>
-                    </div>
-                </div>
-            </div>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="onCancel" size="small">取 消</el-button>
-                    <el-button type="primary" @click="onSubmit" size="small">更 换</el-button>
-                </span>
-            </template>
-        </el-dialog>
-    </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, nextTick } from 'vue';
-import Cropper from 'cropperjs';
-import 'cropperjs/dist/cropper.css';
-export default {
-    name: 'cropperIndex',
-    setup() {
-        const state = reactive({
-            isShowDialog: false,
-            cropperImg: '',
-            cropperImgBase64: '',
-        });
-        // 打开弹窗
-        const openDialog = (imgs: any) => {
-            state.cropperImg = imgs;
-            state.isShowDialog = true;
-            nextTick(() => {
-                initCropper();
-            });
-        };
-        // 关闭弹窗
-        const closeDialog = () => {
-            state.isShowDialog = false;
-        };
-        // 取消
-        const onCancel = () => {
-            closeDialog();
-        };
-        // 新增
-        const onSubmit = () => {};
-        // 初始化cropperjs图片裁剪
-        const initCropper = () => {
-            const letImg: any = document.querySelector('.cropper-warp-left-img');
-            const cropper = new Cropper(letImg, {
-                viewMode: 1,
-                dragMode: 'none',
-                initialAspectRatio: 1,
-                aspectRatio: 1,
-                preview: '.before',
-                background: false,
-                autoCropArea: 0.6,
-                zoomOnWheel: false,
-                crop: () => {
-                    state.cropperImgBase64 = cropper.getCroppedCanvas().toDataURL('image/jpeg');
-                },
-            });
-        };
-        return {
-            openDialog,
-            closeDialog,
-            onCancel,
-            onSubmit,
-            initCropper,
-            ...toRefs(state),
-        };
-    },
-};
-</script>
-
-<style scoped lang="scss">
-.cropper-warp {
-    display: flex;
-    .cropper-warp-left {
-        position: relative;
-        display: inline-block;
-        height: 350px;
-        flex: 1;
-        border: 1px solid #ebeef5;
-        background: #fff;
-        overflow: hidden;
-        background-repeat: no-repeat;
-        cursor: move;
-        border-radius: 3px;
-        .cropper-warp-left-img {
-            width: 100%;
-            height: 100%;
-        }
-    }
-    .cropper-warp-right {
-        width: 150px;
-        height: 350px;
-        .cropper-warp-right-title {
-            text-align: center;
-            height: 20px;
-            line-height: 20px;
-        }
-        .cropper-warp-right-item {
-            margin: 15px 0;
-            .cropper-warp-right-value {
-                display: flex;
-                .cropper-warp-right-value-img {
-                    width: 100px;
-                    height: 100px;
-                    border-radius: 100%;
-                    margin: auto;
-                }
-                .cropper-size {
-                    width: 50px;
-                    height: 50px;
-                }
-            }
-            .cropper-warp-right-label {
-                text-align: center;
-                font-size: 12px;
-                color: #666666;
-                height: 30px;
-                line-height: 30px;
-            }
-        }
-    }
-}
-</style>

frontend/src/components/terminal/TerminalBody.vue

@@ -7,11 +7,11 @@
 </template>
 
 <script lang="ts" setup>
-import 'xterm/css/xterm.css';
-import { Terminal, ITheme } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
-import { SearchAddon } from 'xterm-addon-search';
-import { WebLinksAddon } from 'xterm-addon-web-links';
+import '@xterm/xterm/css/xterm.css';
+import { Terminal, ITheme } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { SearchAddon } from '@xterm/addon-search';
+import { WebLinksAddon } from '@xterm/addon-web-links';
 
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
@@ -238,7 +238,7 @@ const getTerminalTheme = () => {
     const terminalTheme = themeConfig.value.terminalTheme;
     // 如果不是自定义主题，则返回内置主题
     if (terminalTheme != 'custom') {
-        return themes[terminalTheme];
+        return (themes as any)[terminalTheme];
     }
 
     // 自定义主题

frontend/src/components/terminal/TerminalSearch.vue

@@ -46,7 +46,7 @@
 <script lang="ts" setup>
 import { ref, toRefs, nextTick, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
-import { SearchAddon, ISearchOptions } from 'xterm-addon-search';
+import { SearchAddon, ISearchOptions } from '@xterm/addon-search';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();

frontend/src/views/ops/db/InstanceEdit.vue

@@ -194,7 +194,7 @@ const DefaultForm = {
     name: null,
     host: '',
     port: getDbDialect(DbType.mysql).getInfo().defaultPort,
-    extra: '', // 连接需要的额外参数（json字符串）
+    extra: null, // 连接需要的额外参数（json字符串）
     params: null,
     remark: '',
     sshTunnelMachineId: null as any,
@@ -223,11 +223,7 @@ watchEffect(() => {
     if (dbInst) {
         state.form = { ...dbInst };
         state.form.tagCodePaths = dbInst.tags.map((t: any) => t.codePath) || [];
-        try {
-            state.extra = JSON.parse(state.form.extra);
-        } catch (e) {
-            state.extra = {};
-        }
+        state.extra = dbInst.extra || {};
     } else {
         state.form = { ...DefaultForm };
         state.form.authCerts = [];
@@ -242,7 +238,7 @@ const getReqForm = async () => {
         reqForm.sshTunnelMachineId = -1;
     }
     if (Object.keys(state.extra).length > 0) {
-        reqForm.extra = JSON.stringify(state.extra);
+        reqForm.extra = state.extra;
     }
     return reqForm;
 };