feat: 新增系统全局分页size配置，可根据屏幕大小自行设置

2025-11-02 07:20:24 +08:00 · 2023-11-29 17:34:54 +08:00
parent c7bab3a71b
commit e221c2f42e
19 changed files with 151 additions and 130 deletions
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -16,8 +16,8 @@
    "countup.js": "^2.7.0",
    "cropperjs": "^1.5.11",
    "echarts": "^5.4.3",
-    "element-plus": "^2.4.2",
-    "jsencrypt": "^3.3.1",
+    "element-plus": "^2.4.3",
+    "jsencrypt": "^3.3.2",
    "lodash": "^4.17.21",
    "mitt": "^3.0.1",
    "monaco-editor": "^0.44.0",
@@ -25,13 +25,12 @@
    "monaco-themes": "^0.4.4",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
-    "qrcode.vue": "^3.4.0",
+    "qrcode.vue": "^3.4.1",
    "screenfull": "^6.0.2",
    "sortablejs": "^1.15.0",
    "sql-formatter": "^14.0.0",
    "uuid": "^9.0.1",
    "vue": "^3.3.9",
-    "vue-clipboard3": "^1.0.1",
    "vue-router": "^4.2.5",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0",
@@ -53,7 +52,7 @@
    "prettier": "^3.0.3",
    "sass": "^1.69.0",
    "typescript": "^5.3.2",
-    "vite": "^5.0.2",
+    "vite": "^5.0.3",
    "vue-eslint-parser": "^9.3.1"
  },
  "browserslist": [
--- a/mayfly_go_web/src/components/pagetable/PageTable.vue
+++ b/mayfly_go_web/src/components/pagetable/PageTable.vue
@@ -26,14 +26,14 @@
                                >
                                    <!-- 这里只获取指定个数的筛选条件 -->
                                    <el-input
-                                        v-model="queryForm[item.prop]"
+                                        v-model="queryForm_[item.prop]"
                                        :placeholder="'输入' + item.label + '关键字'"
                                        clearable
                                        v-if="item.type == 'text'"
                                    ></el-input>

                                    <el-select-v2
-                                        v-model="queryForm[item.prop]"
+                                        v-model="queryForm_[item.prop]"
                                        :options="item.options"
                                        clearable
                                        :placeholder="'选择' + item.label + '关键字'"
@@ -41,7 +41,7 @@
                                    />

                                    <el-date-picker
-                                        v-model="queryForm[item.prop]"
+                                        v-model="queryForm_[item.prop]"
                                        clearable
                                        type="datetimerange"
                                        format="YYYY-MM-DD hh:mm:ss"
@@ -185,8 +185,10 @@
 import { toRefs, watch, reactive, onMounted } from 'vue';
 import { TableColumn, TableQuery } from './index';
 import EnumTag from '@/components/enumtag/EnumTag.vue';
+import { useThemeConfig } from '@/store/themeConfig';
+import { storeToRefs } from 'pinia';

-const emit = defineEmits(['update:queryForm', 'update:pageNum', 'update:pageSize', 'update:selectionData', 'pageChange'])
+const emit = defineEmits(['update:queryForm', 'update:pageNum', 'update:pageSize', 'update:selectionData', 'pageChange']);

 const props = defineProps({
    size: {
@@ -195,7 +197,7 @@ const props = defineProps({
    },
    inputWidth: {
        type: [Number, String],
-        default: 0,
+        default: '200px',
    },
    // 是否显示选择列
    showSelection: {
@@ -204,7 +206,7 @@ const props = defineProps({
    },
    // 当前选择的数据
    selectionData: {
-        type: Array<any>
+        type: Array<any>,
    },
    // 列信息
    columns: {
@@ -236,16 +238,18 @@ const props = defineProps({
        type: Array<TableQuery>,
        default: function () {
            return [];
-        }
+        },
    },
    // 绑定的查询表单
    queryForm: {
        type: Object,
        default: function () {
            return {};
-        }
+        },
    },
-})
+});
+
+const { themeConfig } = storeToRefs(useThemeConfig());

 const state = reactive({
    pageSizes: [] as any, // 可选每页显示的数据量
@@ -253,140 +257,144 @@ const state = reactive({
    pageNum: 1,
    isOpenMoreQuery: false,
    defaultQueryCount: 2, // 默认显示的查询参数个数，展开后每行显示查询条件个数为该值加1。第一行用最后一列来占用按钮
-    queryForm: {} as any,
+    queryForm_: {} as any,
    loadingData: false,
    // 输入框宽度
-    inputWidth: "200px" as any,
+    inputWidth_: '200px' as any,
    formatVal: '', // 格式化后的值
    tableMaxHeight: window.innerHeight - 240 + 'px',
-})
+});

-const {
-    pageSizes,
-    isOpenMoreQuery,
-    defaultQueryCount,
-    queryForm,
-    loadingData,
-    inputWidth,
-    formatVal,
-    tableMaxHeight,
-} = toRefs(state)
+const { pageSizes, isOpenMoreQuery, defaultQueryCount, queryForm_, inputWidth_, loadingData, tableMaxHeight } = toRefs(state);

-watch(() => props.queryForm, (newValue: any) => {
-    state.queryForm = newValue;
-})
-
-watch(() => props.pageNum, (newValue: any) => {
-    state.pageNum = newValue;
-})
-
-watch(() => props.pageSize, (newValue: any) => {
-    state.pageSize = newValue;
-})
-
-watch(() => props.data, (newValue: any) => {
-    if (newValue && newValue.length > 0) {
-        props.columns.forEach(item => {
-            if (item.autoWidth && item.show) {
-                item.autoCalculateMinWidth(props.data);
-            }
-        })
+watch(
+    () => props.queryForm,
+    (newValue: any) => {
+        state.queryForm_ = newValue;
    }
-})
+);
+
+watch(
+    () => props.pageNum,
+    (newValue: any) => {
+        state.pageNum = newValue;
+    }
+);
+
+watch(
+    () => props.pageSize,
+    (newValue: any) => {
+        state.pageSize = newValue;
+    }
+);
+
+watch(
+    () => props.data,
+    (newValue: any) => {
+        if (newValue && newValue.length > 0) {
+            props.columns.forEach((item) => {
+                if (item.autoWidth && item.show) {
+                    item.autoCalculateMinWidth(props.data);
+                }
+            });
+        }
+    }
+);

 onMounted(() => {
-    const pageSize = props.pageSize;
+    let pageSize = props.pageSize;
+
+    // 如果pageSize设为0，则使用系统全局配置的pageSize
+    if (!pageSize) {
+        pageSize = themeConfig.value.defaultListPageSize;
+        // 可能storage已经存在配置json，则可能没值，需要清storage重试
+        if (!pageSize) {
+            pageSize = 10;
+        }
+        emit('update:pageSize', pageSize);
+    }

    state.pageNum = props.pageNum;
    state.pageSize = pageSize;
-    state.queryForm = props.queryForm;
+    state.queryForm_ = props.queryForm;
    state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4, pageSize * 5];

    // 如果没传输入框宽度，则根据组件size设置默认宽度
    if (!props.inputWidth) {
-        state.inputWidth = props.size == 'small' ? '150px' : '200px';
+        state.inputWidth_ = props.size == 'small' ? '150px' : '200px';
    } else {
-        state.inputWidth = props.inputWidth;
+        state.inputWidth_ = props.inputWidth;
    }

    window.addEventListener('resize', () => {
        calcuTableHeight();
    });
-})
+});

 const calcuTableHeight = () => {
    state.tableMaxHeight = window.innerHeight - 240 + 'px';
-}
-
-const formatText = (data: any)=> {
-    state.formatVal = '';
-    try {
-        state.formatVal = JSON.stringify(JSON.parse(data), null, 4);
-    }  catch (e) {
-        state.formatVal = data;
-    }
-}
+};

 const getRowQueryItem = (row: number) => {
    // 第一行需要加个查询等按钮列
    if (row === 1) {
        const res = props.query.slice(row - 1, defaultQueryCount.value);
        // 查询等按钮列
-        res.push(TableQuery.slot("", "", "queryBtns"));
-        return res
+        res.push(TableQuery.slot('', '', 'queryBtns'));
+        return res;
    }
    const columnCount = defaultQueryCount.value + 1;
    return props.query.slice((row - 1) * columnCount - 1, row * columnCount - 1);
-}
+};

 const handleSelectionChange = (val: any) => {
    emit('update:selectionData', val);
-}
+};

 const handlePageChange = () => {
    emit('update:pageNum', state.pageNum);
    execQuery();
-}
+};

 const handleSizeChange = () => {
    changePageNum(1);
    emit('update:pageSize', state.pageSize);
    execQuery();
-}
+};

 const queryData = () => {
    changePageNum(1);
    execQuery();
-}
+};

 const reset = () => {
    // 将查询参数绑定的值置空，并重新粗发查询接口
    for (let qi of props.query) {
-        state.queryForm[qi.prop] = null;
+        state.queryForm_[qi.prop] = null;
    }

    changePageNum(1);
-    emit('update:queryForm', state.queryForm);
+    emit('update:queryForm', state.queryForm_);
    execQuery();
-}
+};

 const changePageNum = (pageNum: number) => {
    state.pageNum = pageNum;
    emit('update:pageNum', state.pageNum);
-}
+};

 const execQuery = () => {
    emit('pageChange');
-}
+};

 /**
 * 是否正在加载数据
 */
 const loading = (loading: boolean) => {
    state.loadingData = loading;
-}
+};

-defineExpose({ loading })
+defineExpose({ loading });
 </script>
 <style scoped lang="scss">
 .page-table {
@@ -420,15 +428,15 @@ defineExpose({ loading })
 }

 .el-select-v2 {
-    width: v-bind(inputWidth);
+    width: v-bind(inputWidth_);
 }

 .el-input {
-    width: v-bind(inputWidth);
+    width: v-bind(inputWidth_);
 }

 .el-select {
-    width: v-bind(inputWidth);
+    width: v-bind(inputWidth_);
 }

 .el-date-editor {
--- a/mayfly_go_web/src/layout/navBars/breadcrumb/setings.vue
+++ b/mayfly_go_web/src/layout/navBars/breadcrumb/setings.vue
@@ -61,6 +61,24 @@
                    </div>
                </div>

+                <!-- 全局设置 -->
+                <el-divider content-position="left">全局设置</el-divider>
+                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                    <div class="layout-breadcrumb-seting-bar-flex-label">分页size</div>
+                    <div class="layout-breadcrumb-seting-bar-flex-value">
+                        <el-input-number
+                            v-model="themeConfig.defaultListPageSize"
+                            controls-position="right"
+                            :min="10"
+                            :max="50"
+                            @change="setLocalThemeConfig"
+                            size="small"
+                            style="width: 90px"
+                        >
+                        </el-input-number>
+                    </div>
+                </div>
+
                <!-- 全局主题 -->
                <el-divider content-position="left">全局主题</el-divider>
                <div class="layout-breadcrumb-seting-bar-flex">
--- a/mayfly_go_web/src/store/themeConfig.ts
+++ b/mayfly_go_web/src/store/themeConfig.ts
@@ -135,6 +135,10 @@ export const useThemeConfig = defineStore('themeConfig', {
            globalI18n: 'zh-cn',
            // 默认全局组件大小，可选值"<|large|default|small>"，默认 ''
            globalComponentSize: '',
+
+            /** 全局设置 */
+            // 默认列表页的分页大小
+            defaultListPageSize: 15,
        },
    }),
    actions: {
--- a/mayfly_go_web/src/types/pinia.d.ts
+++ b/mayfly_go_web/src/types/pinia.d.ts
@@ -57,6 +57,8 @@ declare interface ThemeConfigState {
        terminalFontSize: number;
        terminalFontWeight: string | any;
        editorTheme: string;
+
+        defaultListPageSize: number;
    };
 }

--- a/mayfly_go_web/src/views/ops/db/DbList.vue
+++ b/mayfly_go_web/src/views/ops/db/DbList.vue
@@ -217,7 +217,7 @@ const state = reactive({
        tagPath: null,
        instanceId: null,
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
    },
    datas: [],
    total: 0,
--- a/mayfly_go_web/src/views/ops/db/InstanceList.vue
+++ b/mayfly_go_web/src/views/ops/db/InstanceList.vue
@@ -105,7 +105,7 @@ const state = reactive({
    query: {
        name: null,
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
    },
    datas: [],
    total: 0,
--- a/mayfly_go_web/src/views/ops/machine/MachineList.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineList.vue
@@ -242,7 +242,7 @@ const state = reactive({
    tags: [] as any,
    params: {
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
        ip: null,
        name: null,
        tagPath: null,
--- a/mayfly_go_web/src/views/ops/machine/authcert/AuthCertList.vue
+++ b/mayfly_go_web/src/views/ops/machine/authcert/AuthCertList.vue
@@ -38,7 +38,7 @@ import { AuthMethodEnum } from '../enums';
 const state = reactive({
    query: {
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
        name: null,
    },
    queryConfig: [TableQuery.text('name', '凭证名称')],
@@ -105,7 +105,9 @@ const deleteAc = async (data: any) => {
        await authCertApi.delete.request({ id: data.map((x: any) => x.id).join(',') });
        ElMessage.success('删除成功');
        search();
-    } catch (err) {}
+    } catch (err) {
+        //
+    }
 };
 </script>
 <style lang="scss"></style>
--- a/mayfly_go_web/src/views/ops/machine/cronjob/CronJobList.vue
+++ b/mayfly_go_web/src/views/ops/machine/cronjob/CronJobList.vue
@@ -69,7 +69,7 @@ const columns = ref([
 const state = reactive({
    params: {
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
        ip: null,
        name: null,
    },
@@ -121,7 +121,9 @@ const deleteCronJob = async () => {
        await cronJobApi.delete.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
        ElMessage.success('操作成功');
        search();
-    } catch (err) {}
+    } catch (err) {
+        //
+    }
 };

 /**
--- a/mayfly_go_web/src/views/ops/mongo/MongoList.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoList.vue
@@ -88,7 +88,7 @@ const state = reactive({
    selectionData: [],
    query: {
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
        tagPath: null,
    },
    mongoEditDialog: {
--- a/mayfly_go_web/src/views/ops/redis/RedisList.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisList.vue
@@ -191,7 +191,7 @@ const state = reactive({
    query: {
        tagPath: null,
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
    },
    detailDialog: {
        visible: false,
--- a/mayfly_go_web/src/views/ops/tag/TeamList.vue
+++ b/mayfly_go_web/src/views/ops/tag/TeamList.vue
@@ -157,7 +157,7 @@ const state = reactive({
    },
    query: {
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
        name: null,
    },
    queryConfig: [TableQuery.text('name', '团队名称')],
--- a/mayfly_go_web/src/views/system/account/AccountList.vue
+++ b/mayfly_go_web/src/views/system/account/AccountList.vue
@@ -129,7 +129,7 @@ const state = reactive({
    query: {
        username: '',
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
    },
    datas: [],
    total: 0,
@@ -252,7 +252,9 @@ const deleteAccount = async () => {
        await accountApi.del.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
        ElMessage.success('删除成功');
        search();
-    } catch (err) {}
+    } catch (err) {
+        //
+    }
 };
 </script>
 <style lang="scss"></style>
--- a/mayfly_go_web/src/views/system/config/ConfigList.vue
+++ b/mayfly_go_web/src/views/system/config/ConfigList.vue
@@ -99,7 +99,7 @@ const paramsFormRef: any = ref(null);
 const state = reactive({
    query: {
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
        name: null,
    },
    total: 0,
--- a/mayfly_go_web/src/views/system/role/RoleList.vue
+++ b/mayfly_go_web/src/views/system/role/RoleList.vue
@@ -78,7 +78,7 @@ const actionColumn = TableColumn.new('action', '操作').isSlot().setMinWidth(26
 const state = reactive({
    query: {
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
        name: null,
    },
    total: 0,
--- a/mayfly_go_web/src/views/system/syslog/SyslogList.vue
+++ b/mayfly_go_web/src/views/system/syslog/SyslogList.vue
@@ -43,7 +43,7 @@ const state = reactive({
        creatorId: null,
        description: null,
        pageNum: 1,
-        pageSize: 10,
+        pageSize: 0,
    },
    queryConfig: [
        TableQuery.slot('creatorId', '操作人', 'selectAccount'),
--- a/mayfly_go_web/yarn.lock
+++ b/mayfly_go_web/yarn.lock
@@ -24,16 +24,16 @@
  resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==

-"@element-plus/icons-vue@^2.0.6":
-  version "2.0.9"
-  resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.9.tgz"
-  integrity sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==
-
 "@element-plus/icons-vue@^2.1.0":
  version "2.1.0"
  resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a"
  integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==

+"@element-plus/icons-vue@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz#1f635ad5fdd5c85ed936481525570e82b5a8307a"
+  integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
+
 "@esbuild/android-arm64@0.19.8":
  version "0.19.8"
  resolved "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz#fb7130103835b6d43ea499c3f30cfb2b2ed58456"
@@ -764,15 +764,6 @@ clipboard@^2.0.11:
    select "^1.1.2"
    tiny-emitter "^2.0.0"

-clipboard@^2.0.6:
-  version "2.0.10"
-  resolved "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.10.tgz"
-  integrity sha512-cz3m2YVwFz95qSEbCDi2fzLN/epEN9zXBvfgAoGkvGOJZATMl9gtTDVOtBYkx2ODUJl2kvmud7n32sV2BpYR4g==
-  dependencies:
-    good-listener "^1.2.2"
-    select "^1.1.2"
-    tiny-emitter "^2.0.0"
-
 color-convert@^2.0.1:
  version "2.0.1"
  resolved "https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz"
@@ -910,13 +901,13 @@ echarts@^5.4.3:
    tslib "2.3.0"
    zrender "5.4.4"

-element-plus@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.2.tgz#2a24632e0904ccd7bbbd64c269704f6b9969833c"
-  integrity sha512-E/HwXX7JF1LPvQSjs0fZ8WblIoc0quoXsRXQZiL7QDq7xJdNGSUaXtdk7xiEv7axPmLfEFtxE5du9fFspDrmJw==
+element-plus@^2.4.3:
+  version "2.4.3"
+  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz#ff21d0207d71752eb6a47a46609bc667f222841f"
+  integrity sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==
  dependencies:
    "@ctrl/tinycolor" "^3.4.1"
-    "@element-plus/icons-vue" "^2.0.6"
+    "@element-plus/icons-vue" "^2.3.1"
    "@floating-ui/dom" "^1.0.1"
    "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
    "@types/lodash" "^4.14.182"
@@ -1373,7 +1364,7 @@ js-yaml@^4.1.0:
  dependencies:
    argparse "^2.0.1"

-jsencrypt@^3.3.1:
+jsencrypt@^3.3.2:
  version "3.3.2"
  resolved "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.3.2.tgz#b0f1a2278810c7ba1cb8957af11195354622df7c"
  integrity sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A==
@@ -1698,10 +1689,10 @@ punycode@^2.1.0:
  resolved "https://registry.nlark.com/punycode/download/punycode-2.1.1.tgz"
  integrity sha1-tYsBCsQMIsVldhbI0sLALHv0eew=

-qrcode.vue@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.4.0.tgz#4513ff1a4734cb7184086c2fd439f0d462c6d281"
-  integrity sha512-4XeImbv10Fin16Fl2DArCMhGyAdvIg2jb7vDT+hZiIAMg/6H6mz9nUZr/dR8jBcun5VzNzkiwKhiqOGbloinwA==
+qrcode.vue@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.4.1.tgz#dd8141da9c4ea07ee56b111cd13eadf123af822a"
+  integrity sha512-wq/zHsifH4FJ1GXQi8/wNxD1KfQkckIpjK1KPTc/qwYU5/Bkd4me0w4xZSg6EXk6xLBkVDE0zxVagewv5EMAVA==

 queue-microtask@^1.2.2:
  version "1.2.3"
@@ -1947,10 +1938,10 @@ uuid@^9.0.1:
  resolved "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==

-vite@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.npmmirror.com/vite/-/vite-5.0.2.tgz#3c94627dace83b9bf04b64eaf618038e30fb95c0"
-  integrity sha512-6CCq1CAJCNM1ya2ZZA7+jS2KgnhbzvxakmlIjN24cF/PXhRMzpM/z8QgsVJA/Dm5fWUWnVEsmtBoMhmerPxT0g==
+vite@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmmirror.com/vite/-/vite-5.0.3.tgz#febf6801604c618234de331bd04382cf9a149ec6"
+  integrity sha512-WgEq8WEKpZ8c0DL4M1+E+kBZEJyjBmGVrul6z8Ljfhv+PPbNF4aGq014DwNYxGz2FGq6NKL0N8usdiESWd2l2w==
  dependencies:
    esbuild "^0.19.3"
    postcss "^8.4.31"
@@ -1958,13 +1949,6 @@ vite@^5.0.2:
  optionalDependencies:
    fsevents "~2.3.3"

-vue-clipboard3@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmmirror.com/vue-clipboard3/-/vue-clipboard3-1.0.1.tgz"
-  integrity sha512-iJ2vrizowfA73W3pcxMAKhYSvfekJrQ3FhbveVe9esS1Vfu+xW3Fgc0UKE8N4Q6DyRtcAoNlef8txmD8tK8dIg==
-  dependencies:
-    clipboard "^2.0.6"
-
 vue-demi@*:
  version "0.13.11"
  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz"
--- a/server/internal/db/dbm/dialect_pgsql.go
+++ b/server/internal/db/dbm/dialect_pgsql.go
@@ -16,7 +16,7 @@ import (
 )

 func getPgsqlDB(d *DbInfo) (*sql.DB, error) {
-	driverName := "postgres"
+	driverName := string(d.Type)
 	// SSH Conect
 	if d.SshTunnelMachineId > 0 {
 		// 如果使用了隧道，则使用`postgres:ssh:隧道机器id`注册名