From 798ab7d18b19976ed2391a5eeafacbfe0084a852 Mon Sep 17 00:00:00 2001
From: "meilin.huang" <954537473@qq.com>
Date: Sun, 20 Apr 2025 21:01:01 +0800
Subject: [PATCH] style: fix

---
 frontend/package.json                         |   2 +-
 .../src/components/monaco/MonacoEditor.vue    |   4 +-
 .../src/components/pagetable/PageTable.vue    | 374 ++++++------------
 frontend/src/layout/component/main.vue        |   9 -
 frontend/src/layout/main/columns.vue          |   8 +-
 frontend/src/layout/main/defaults.vue         |   8 +-
 frontend/src/views/ops/component/TagTree.vue  |  37 +-
 frontend/src/views/ops/db/DbList.vue          |   3 +-
 frontend/src/views/ops/db/DbSqlExecLog.vue    |   2 +-
 frontend/src/views/ops/db/SqlExec.vue         |  25 +-
 .../ops/db/component/table/DbTableData.vue    |  12 +-
 frontend/src/views/ops/machine/MachineOp.vue  |  16 +-
 .../ops/machine/cronjob/CronJobExecList.vue   |   1 +
 frontend/src/views/ops/mongo/MongoDataOp.vue  |  10 +-
 .../src/views/ops/redis/DataOperation.vue     |  13 +-
 15 files changed, 179 insertions(+), 345 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 92e989f0..107f012d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
         "crypto-js": "^4.2.0",
         "dayjs": "^1.11.13",
         "echarts": "^5.6.0",
-        "element-plus": "^2.9.7",
+        "element-plus": "^2.9.8",
         "js-base64": "^3.7.7",
         "jsencrypt": "^3.3.2",
         "mitt": "^3.0.1",
diff --git a/frontend/src/components/monaco/MonacoEditor.vue b/frontend/src/components/monaco/MonacoEditor.vue
index 223d92e7..788bdaba 100644
--- a/frontend/src/components/monaco/MonacoEditor.vue
+++ b/frontend/src/components/monaco/MonacoEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="monaco-editor" style="border: 1px solid var(--el-border-color-light, #ebeef5); height: 100%">
+    <div class="monaco-editor-custom h-full" style="border: 1px solid var(--el-border-color-light, #ebeef5)">
         <div class="monaco-editor-content" ref="monacoTextareaRef" :style="{ height: height }"></div>
         <el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage" filterable>
             <el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
@@ -309,7 +309,7 @@ defineExpose({ getEditor, format, focus });
 </script>
 
 <style lang="scss">
-.monaco-editor {
+.monaco-editor-custom {
     .code-mode-select {
         position: absolute;
         z-index: 2;
diff --git a/frontend/src/components/pagetable/PageTable.vue b/frontend/src/components/pagetable/PageTable.vue
index 28c04feb..061b9258 100644
--- a/frontend/src/components/pagetable/PageTable.vue
+++ b/frontend/src/components/pagetable/PageTable.vue
@@ -11,165 +11,143 @@
         </transition>
 
         <el-card class="h-full" body-class="h-full">
-            <div class="table-main">
-                <!-- 表格头部 操作按钮 -->
-                <div class="table-header">
-                    <div class="header-button-lf">
-                        <slot name="tableHeader" />
-                    </div>
+            <!-- 表格头部 操作按钮 -->
+            <div class="flex justify-between">
+                <div>
+                    <slot name="tableHeader" />
+                </div>
 
-                    <div v-if="toolButton" class="header-button-ri">
-                        <slot name="toolButton">
-                            <div class="tool-button">
-                                <!-- 简易单个搜索项 -->
-                                <div v-if="nowSearchItem" class="simple-search-form">
-                                    <el-dropdown v-if="searchItems?.length > 1">
-                                        <SvgIcon :size="16" name="CaretBottom" class="!mr-1 !mt-1.5 simple-search-form-btn" />
-                                        <template #dropdown>
-                                            <el-dropdown-menu>
-                                                <el-dropdown-item
-                                                    v-for="searchItem in searchItems"
-                                                    :key="searchItem.prop"
-                                                    @click="changeSimpleFormItem(searchItem)"
-                                                >
-                                                    {{ $t(searchItem.label) }}
-                                                </el-dropdown-item>
-                                            </el-dropdown-menu>
-                                        </template>
-                                    </el-dropdown>
+                <slot v-if="toolButton" name="toolButton">
+                    <div class="flex">
+                        <!-- 简易单个搜索项 -->
+                        <div v-if="nowSearchItem" class="flex">
+                            <el-dropdown v-if="searchItems?.length > 1">
+                                <SvgIcon :size="16" name="CaretBottom" class="!mr-1 !mt-1.5 simple-search-form-btn" />
+                                <template #dropdown>
+                                    <el-dropdown-menu>
+                                        <el-dropdown-item v-for="searchItem in searchItems" :key="searchItem.prop" @click="changeSimpleFormItem(searchItem)">
+                                            {{ $t(searchItem.label) }}
+                                        </el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </template>
+                            </el-dropdown>
 
-                                    <div class="simple-search-form-label mt-1">
-                                        <el-text truncated tag="b">{{ `${$t(nowSearchItem?.label)} : ` }}</el-text>
-                                    </div>
-
-                                    <el-form-item style="width: 200px" :key="nowSearchItem.prop">
-                                        <SearchFormItem
-                                            @keyup.enter.native="searchFormItemKeyUpEnter"
-                                            v-if="!nowSearchItem.slot"
-                                            :item="nowSearchItem"
-                                            v-model="queryForm[nowSearchItem.prop]"
-                                        />
-
-                                        <slot @keyup.enter.native="searchFormItemKeyUpEnter" v-else :name="nowSearchItem.slot"> </slot>
-                                    </el-form-item>
-                                </div>
-
-                                <div>
-                                    <el-button v-if="showToolButton('search') && searchItems?.length" icon="Search" circle @click="search" />
-
-                                    <!-- <el-button v-if="showToolButton('refresh')" icon="Refresh" circle @click="execQuery()" /> -->
-
-                                    <el-button
-                                        v-if="showToolButton('search') && searchItems?.length > 1"
-                                        :icon="isShowSearch ? 'ArrowDown' : 'ArrowUp'"
-                                        circle
-                                        @click="isShowSearch = !isShowSearch"
-                                    />
-
-                                    <el-popover
-                                        placement="bottom"
-                                        title="表格配置"
-                                        popper-style="max-height: 550px; overflow: auto; max-width: 450px"
-                                        width="auto"
-                                        trigger="click"
-                                    >
-                                        <div v-for="(item, index) in tableColumns" :key="index">
-                                            <el-checkbox v-model="item.show" :label="$t(item.label)" :true-value="true" :false-value="false" />
-                                        </div>
-                                        <template #reference>
-                                            <el-button icon="Operation" circle :size="props.size"></el-button>
-                                        </template>
-                                    </el-popover>
-                                </div>
+                            <div class="text-right mr-1.5 mt-1">
+                                <el-text truncated tag="b">{{ `${$t(nowSearchItem?.label)} : ` }}</el-text>
                             </div>
-                        </slot>
-                    </div>
-                </div>
 
-                <div class="h-[calc(100%-100px)]">
-                    <el-table
-                        ref="tableRef"
-                        v-bind="$attrs"
-                        height="100%"
-                        @selection-change="handleSelectionChange"
-                        :data="tableData"
-                        highlight-current-row
-                        v-loading="loading"
-                        :size="props.size as any"
-                        :border="border"
-                    >
-                        <el-table-column v-if="props.showSelection" :selectable="selectable" type="selection" width="40" />
+                            <el-form-item class="w-[200px]" :key="nowSearchItem.prop">
+                                <SearchFormItem
+                                    @keyup.enter.native="searchFormItemKeyUpEnter"
+                                    v-if="!nowSearchItem.slot"
+                                    :item="nowSearchItem"
+                                    v-model="queryForm[nowSearchItem.prop]"
+                                />
 
-                        <template v-for="(item, index) in tableColumns">
-                            <el-table-column
-                                :key="index"
-                                v-if="item.show"
-                                :prop="item.prop"
-                                :label="$t(item.label)"
-                                :fixed="item.fixed"
-                                :align="item.align"
-                                :show-overflow-tooltip="item.showOverflowTooltip"
-                                :min-width="item.minWidth"
-                                :sortable="item.sortable || false"
-                                :type="item.type"
-                                :width="item.width"
+                                <slot @keyup.enter.native="searchFormItemKeyUpEnter" v-else :name="nowSearchItem.slot"> </slot>
+                            </el-form-item>
+                        </div>
+
+                        <div class="ml-2">
+                            <el-button v-if="showToolButton('search') && searchItems?.length" icon="Search" circle @click="search" />
+
+                            <!-- <el-button v-if="showToolButton('refresh')" icon="Refresh" circle @click="execQuery()" /> -->
+
+                            <el-button
+                                v-if="showToolButton('search') && searchItems?.length > 1"
+                                :icon="isShowSearch ? 'ArrowDown' : 'ArrowUp'"
+                                circle
+                                @click="isShowSearch = !isShowSearch"
+                            />
+
+                            <el-popover
+                                placement="bottom"
+                                title="表格配置"
+                                popper-style="max-height: 550px; overflow: auto; max-width: 450px"
+                                width="auto"
+                                trigger="click"
                             >
-                                <!-- 插槽：预留功能 -->
-                                <template #default="scope" v-if="item.slot">
-                                    <slot :name="item.slotName ? item.slotName : item.prop" :data="scope.row"></slot>
+                                <div v-for="(item, index) in tableColumns" :key="index">
+                                    <el-checkbox v-model="item.show" :label="$t(item.label)" :true-value="true" :false-value="false" />
+                                </div>
+                                <template #reference>
+                                    <el-button icon="Operation" circle :size="props.size"></el-button>
                                 </template>
-
-                                <!-- 枚举类型使用tab展示 -->
-                                <template #default="scope" v-else-if="item.type == 'tag'">
-                                    <enum-tag :size="props.size" :enums="item.typeParam" :value="item.getValueByData(scope.row)"></enum-tag>
-                                </template>
-
-                                <template #default="scope" v-else>
-                                    <!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
-                                    <el-popover
-                                        v-if="item.isBeautify && item.getValueByData(scope.row)?.length > 35"
-                                        effect="light"
-                                        trigger="click"
-                                        placement="top"
-                                        width="600px"
-                                    >
-                                        <template #default>
-                                            <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
-                                        </template>
-                                        <template #reference>
-                                            <el-link
-                                                @click="formatText(item.getValueByData(scope.row))"
-                                                :underline="false"
-                                                type="success"
-                                                icon="MagicStick"
-                                                class="mr-1"
-                                            ></el-link>
-                                        </template>
-                                    </el-popover>
-
-                                    <span>{{ item.getValueByData(scope.row) }}</span>
-                                </template>
-                            </el-table-column>
-                        </template>
-                    </el-table>
-                </div>
-
-                <el-row v-if="props.pageable" class="!mt-4" type="flex" justify="end">
-                    <el-pagination
-                        :small="props.size == 'small'"
-                        @current-change="pageNumChange"
-                        @size-change="pageSizeChange"
-                        style="text-align: right"
-                        layout="prev, pager, next, total, sizes"
-                        :total="total"
-                        v-model:current-page="queryForm.pageNum"
-                        v-model:page-size="queryForm.pageSize"
-                        :page-sizes="pageSizes"
-                    />
-                </el-row>
+                            </el-popover>
+                        </div>
+                    </div>
+                </slot>
             </div>
 
-            <!-- <el-row v-if="props.pageable" class="!mt-4" type="flex" justify="end">
+            <div class="h-[calc(100%-90px)]">
+                <el-table
+                    ref="tableRef"
+                    v-bind="$attrs"
+                    height="100%"
+                    @selection-change="handleSelectionChange"
+                    :data="tableData"
+                    highlight-current-row
+                    v-loading="loading"
+                    :size="props.size as any"
+                    :border="border"
+                >
+                    <el-table-column v-if="props.showSelection" :selectable="selectable" type="selection" width="40" />
+
+                    <template v-for="(item, index) in tableColumns">
+                        <el-table-column
+                            :key="index"
+                            v-if="item.show"
+                            :prop="item.prop"
+                            :label="$t(item.label)"
+                            :fixed="item.fixed"
+                            :align="item.align"
+                            :show-overflow-tooltip="item.showOverflowTooltip"
+                            :min-width="item.minWidth"
+                            :sortable="item.sortable || false"
+                            :type="item.type"
+                            :width="item.width"
+                        >
+                            <!-- 插槽：预留功能 -->
+                            <template #default="scope" v-if="item.slot">
+                                <slot :name="item.slotName ? item.slotName : item.prop" :data="scope.row"></slot>
+                            </template>
+
+                            <!-- 枚举类型使用tab展示 -->
+                            <template #default="scope" v-else-if="item.type == 'tag'">
+                                <enum-tag :size="props.size" :enums="item.typeParam" :value="item.getValueByData(scope.row)"></enum-tag>
+                            </template>
+
+                            <template #default="scope" v-else>
+                                <!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
+                                <el-popover
+                                    v-if="item.isBeautify && item.getValueByData(scope.row)?.length > 35"
+                                    effect="light"
+                                    trigger="click"
+                                    placement="top"
+                                    width="600px"
+                                >
+                                    <template #default>
+                                        <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
+                                    </template>
+                                    <template #reference>
+                                        <el-link
+                                            @click="formatText(item.getValueByData(scope.row))"
+                                            :underline="false"
+                                            type="success"
+                                            icon="MagicStick"
+                                            class="mr-1"
+                                        ></el-link>
+                                    </template>
+                                </el-popover>
+
+                                <span>{{ item.getValueByData(scope.row) }}</span>
+                            </template>
+                        </el-table-column>
+                    </template>
+                </el-table>
+            </div>
+
+            <el-row v-if="props.pageable" class="mt-4" type="flex" justify="end">
                 <el-pagination
                     :small="props.size == 'small'"
                     @current-change="pageNumChange"
@@ -181,7 +159,7 @@
                     v-model:page-size="queryForm.pageSize"
                     :page-sizes="pageSizes"
                 />
-            </el-row> -->
+            </el-row>
         </el-card>
     </div>
 </template>
@@ -192,7 +170,6 @@ import { TableColumn } from './index';
 import EnumTag from '@/components/enumtag/EnumTag.vue';
 import { useThemeConfig } from '@/store/themeConfig';
 import { storeToRefs } from 'pinia';
-import { useEventListener } from '@vueuse/core';
 import Api from '@/common/Api';
 import SearchForm from '@/components/SearchForm/index.vue';
 import { SearchItem } from '../SearchForm/index';
@@ -294,10 +271,9 @@ const state = reactive({
     pageSizes: [] as any, // 可选每页显示的数据量
     // 输入框宽度
     formatVal: '', // 格式化后的值
-    tableMaxHeight: '500px',
 });
 
-const { pageSizes, formatVal, tableMaxHeight } = toRefs(state);
+const { pageSizes, formatVal } = toRefs(state);
 
 watch(tableData, (newValue: any) => {
     if (newValue && newValue.length > 0) {
@@ -309,10 +285,6 @@ watch(tableData, (newValue: any) => {
     }
 });
 
-watch(isShowSearch, () => {
-    calcuTableHeight();
-});
-
 watch(
     () => props.data,
     (newValue: any) => {
@@ -321,9 +293,6 @@ watch(
 );
 
 onMounted(async () => {
-    calcuTableHeight();
-    useEventListener(window, 'resize', calcuTableHeight);
-
     if (props.searchItems.length > 0) {
         nowSearchItem.value = props.searchItems[0];
     }
@@ -347,11 +316,6 @@ onMounted(async () => {
     }
 });
 
-const calcuTableHeight = () => {
-    const headerHeight = isShowSearch.value ? 330 : 250;
-    state.tableMaxHeight = window.innerHeight - headerHeight + 'px';
-};
-
 const searchFormItemKeyUpEnter = (event: any) => {
     event.preventDefault();
     search();
@@ -381,80 +345,4 @@ defineExpose({
     total,
 });
 </script>
-<style scoped lang="scss">
-.table-box,
-.table-main {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-
-    // 表格 header 样式
-    .table-header {
-        width: 100%;
-
-        .header-button-lf {
-            float: left;
-        }
-
-        .header-button-ri {
-            float: right;
-
-            .tool-button {
-                display: flex;
-                justify-content: space-between;
-            }
-
-            .simple-search-form {
-                margin-right: 10px;
-                display: flex;
-                justify-content: space-between;
-
-                ::v-deep(.el-form-item__content > *) {
-                    width: 100% !important;
-                }
-
-                .simple-search-form-label {
-                    text-align: right;
-                    margin-right: 5px;
-                }
-
-                .simple-search-form-btn:hover {
-                    color: var(--el-color-primary);
-                }
-            }
-        }
-
-        .el-button {
-            margin-bottom: 10px;
-        }
-    }
-
-    // el-table 表格样式
-    .el-table {
-        flex: 1;
-
-        // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
-        table {
-            width: 100%;
-        }
-
-        // 设置 el-table 中 header 文字不换行，并省略
-        .el-table__header .el-table__cell > .cell {
-            white-space: wrap;
-        }
-
-        // table 中 image 图片样式
-        .table-image {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-        }
-    }
-
-    ::v-deep(.el-form-item__label) {
-        font-weight: bold;
-    }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/frontend/src/layout/component/main.vue b/frontend/src/layout/component/main.vue
index f414e46a..9c2df5e6 100644
--- a/frontend/src/layout/component/main.vue
+++ b/frontend/src/layout/component/main.vue
@@ -33,7 +33,6 @@ const { proxy } = getCurrentInstance() as any;
 const { themeConfig } = storeToRefs(useThemeConfig());
 const route = useRoute();
 const state = reactive({
-    headerHeight: '',
     currentRouteMeta: {} as any,
     isShowLink: false,
 });
@@ -50,20 +49,12 @@ const initCurrentRouteMeta = (meta: object) => {
         state.isShowLink = true;
     }, 100);
 };
-// 设置 main 的高度
-const initHeaderHeight = () => {
-    let { isTagsview } = themeConfig.value;
-    if (isTagsview) return (state.headerHeight = `77px`);
-    else return (state.headerHeight = `50px`);
-};
 // 页面加载前
 onBeforeMount(() => {
     initCurrentRouteMeta(route.meta);
-    initHeaderHeight();
 });
 // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
 watch(themeConfig.value, (val) => {
-    state.headerHeight = val.isTagsview ? '77px' : '50px';
     if (val.isFixedHeaderChange !== val.isFixedHeader) {
         if (!proxy.$refs.layoutScrollbarRef) return false;
         proxy.$refs.layoutScrollbarRef.update();
diff --git a/frontend/src/layout/main/columns.vue b/frontend/src/layout/main/columns.vue
index 3430eeb7..882fd7e1 100644
--- a/frontend/src/layout/main/columns.vue
+++ b/frontend/src/layout/main/columns.vue
@@ -5,10 +5,10 @@
             <Aside />
             <el-container class="flex-center layout-backtop">
                 <Header v-if="isFixedHeader" />
-                <el-scrollbar>
-                    <Header v-if="!isFixedHeader" />
-                    <Main />
-                </el-scrollbar>
+                <!-- <el-scrollbar> -->
+                <Header v-if="!isFixedHeader" />
+                <Main />
+                <!-- </el-scrollbar> -->
             </el-container>
         </div>
         <el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
diff --git a/frontend/src/layout/main/defaults.vue b/frontend/src/layout/main/defaults.vue
index cbd2d95a..3a3887fb 100644
--- a/frontend/src/layout/main/defaults.vue
+++ b/frontend/src/layout/main/defaults.vue
@@ -3,10 +3,10 @@
         <Aside />
         <el-container class="flex-center layout-backtop">
             <Header v-if="isFixedHeader" />
-            <el-scrollbar ref="layoutDefaultsScrollbarRef">
-                <Header v-if="!isFixedHeader" />
-                <Main />
-            </el-scrollbar>
+            <!-- <el-scrollbar view-class="!h-full" ref="layoutDefaultsScrollbarRef"> -->
+            <Header v-if="!isFixedHeader" />
+            <Main />
+            <!-- </el-scrollbar> -->
         </el-container>
         <el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
     </el-container>
diff --git a/frontend/src/views/ops/component/TagTree.vue b/frontend/src/views/ops/component/TagTree.vue
index 0db84309..717f0ad2 100644
--- a/frontend/src/views/ops/component/TagTree.vue
+++ b/frontend/src/views/ops/component/TagTree.vue
@@ -1,8 +1,9 @@
 <template>
-    <div class="card !p-1">
+    <el-card class="h-full flex" body-class="!p-1 flex flex-col flex-1 overflow-auto">
         <el-input v-model="filterText" :placeholder="$t('tag.tagFilterPlaceholder')" clearable size="small" class="!mb-1 w-full" />
-        <el-scrollbar class="tag-tree">
+        <el-scrollbar>
             <el-tree
+                class="min-w-full inline-block"
                 ref="treeRef"
                 :highlight-current="true"
                 :indent="10"
@@ -21,7 +22,7 @@
                     <span
                         :id="node.key"
                         @dblclick="treeNodeDblclick(data, node)"
-                        class="node-container none-select"
+                        class="node-container flex items-center w-full cursor-pointer none-select"
                         :class="data.type.nodeDblclickFunc ? 'none-select' : ''"
                     >
                         <span v-if="data.type.value == TagTreeNode.TagPath">
@@ -40,7 +41,7 @@
                             </slot>
                         </span>
 
-                        <span class="label-suffix">
+                        <span class="absolute right-2.5 mt-0.5 text-[10px] text-gray-400">
                             <slot :node="node" :data="data" name="suffix"></slot>
                         </span>
                     </span>
@@ -49,7 +50,7 @@
 
             <contextmenu :dropdown="state.dropdown" :items="state.contextmenuItems" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" />
         </el-scrollbar>
-    </div>
+    </el-card>
 </template>
 
 <script lang="ts" setup>
@@ -240,28 +241,4 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.tag-tree {
-    height: calc(100vh - 143px);
-
-    .el-tree {
-        display: inline-block;
-        min-width: 100%;
-    }
-
-    .label-suffix {
-        position: absolute;
-        right: 10px;
-        color: #c4c9c4;
-        font-size: 10px;
-        margin-top: 2px;
-    }
-
-    .node-container {
-        display: flex;
-        align-items: center;
-        width: 100%; // 确保容器宽度占满整个节点区域
-        cursor: pointer; // 添加鼠标指针样式
-    }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/views/ops/db/DbList.vue b/frontend/src/views/ops/db/DbList.vue
index 0a0da9ef..858acc31 100644
--- a/frontend/src/views/ops/db/DbList.vue
+++ b/frontend/src/views/ops/db/DbList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="db-list h-full">
+    <div class="db-list">
         <el-drawer
             :title="title"
             v-model="dialogVisible"
@@ -153,6 +153,7 @@
             :close-on-click-modal="false"
             v-model="sqlExecLogDialog.visible"
             :destroy-on-close="true"
+            body-class="h-250"
         >
             <db-sql-exec-log :db-id="sqlExecLogDialog.dbId" :dbs="sqlExecLogDialog.dbs" />
         </el-dialog>
diff --git a/frontend/src/views/ops/db/DbSqlExecLog.vue b/frontend/src/views/ops/db/DbSqlExecLog.vue
index bb2e5595..f2c5ebba 100644
--- a/frontend/src/views/ops/db/DbSqlExecLog.vue
+++ b/frontend/src/views/ops/db/DbSqlExecLog.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="db-sql-exec-log">
+    <div class="db-sql-exec-log h-full">
         <page-table
             ref="pageTableRef"
             :page-api="dbApi.getSqlExecs"
diff --git a/frontend/src/views/ops/db/SqlExec.vue b/frontend/src/views/ops/db/SqlExec.vue
index 347b0f01..56e2c394 100644
--- a/frontend/src/views/ops/db/SqlExec.vue
+++ b/frontend/src/views/ops/db/SqlExec.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="db-sql-exec">
+    <div class="db-sql-exec h-full">
         <ResourceOpPanel>
             <template #left>
                 <tag-tree
@@ -54,7 +54,7 @@
             </template>
 
             <template #right>
-                <div class="card db-op !p-1">
+                <el-card class="h-full" body-class="h-full !p-1 flex flex-col flex-1">
                     <el-row>
                         <el-col :span="24" v-if="state.db">
                             <el-descriptions :column="4" size="small" border>
@@ -151,9 +151,8 @@
                             type="card"
                             @tab-remove="onRemoveTab"
                             @tab-change="onTabChange"
-                            style="width: 100%"
                             v-model="state.activeName"
-                            class="!h-full"
+                            class="!h-full w-full"
                         >
                             <el-tab-pane class="!h-full" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
                                 <template #label>
@@ -210,7 +209,7 @@
                             </el-tab-pane>
                         </el-tabs>
                     </div>
-                </div>
+                </el-card>
             </template>
         </ResourceOpPanel>
 
@@ -980,18 +979,14 @@ const getNowDbInfo = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .db-sql-exec {
-    .db-op {
-        height: calc(100vh - 106px);
-    }
-
     #data-exec {
-        .el-tabs {
+        ::v-deep(.el-tabs) {
             --el-tabs-header-height: 30px;
         }
 
-        .el-tabs__header {
+        ::v-deep(.el-tabs__header) {
             margin: 0 0 5px;
 
             .el-tabs__item {
@@ -999,8 +994,10 @@ const getNowDbInfo = () => {
             }
         }
 
-        .el-tabs__nav-next,
-        .el-tabs__nav-prev {
+        ::v-deep(.el-tabs__nav-next) {
+            line-height: 30px;
+        }
+        ::v-deep(.el-tabs__nav-prev) {
             line-height: 30px;
         }
     }
diff --git a/frontend/src/views/ops/db/component/table/DbTableData.vue b/frontend/src/views/ops/db/component/table/DbTableData.vue
index 8ee6bca7..42bdf73e 100644
--- a/frontend/src/views/ops/db/component/table/DbTableData.vue
+++ b/frontend/src/views/ops/db/component/table/DbTableData.vue
@@ -4,7 +4,7 @@
             <template #default="{ height, width }">
                 <el-table-v2
                     ref="tableRef"
-                    :header-height="showColumnTip && dbConfig.showColumnComment ? 45 : 30"
+                    :header-height="showColumnTip && dbConfig.showColumnComment ? 48 : 30"
                     :row-height="30"
                     :row-class="rowClass"
                     :row-key="null"
@@ -50,13 +50,13 @@
                                         </div>
 
                                         <!-- 字段备注信息 -->
-                                        <span
+                                        <div
                                             v-if="dbConfig.showColumnComment"
                                             style="color: var(--el-color-info-light-3)"
                                             class="!text-[10px] el-text el-text--small is-truncated"
                                         >
                                             {{ column.columnComment }}
-                                        </span>
+                                        </div>
                                     </div>
 
                                     <div v-else class="header-column-title">
@@ -107,7 +107,7 @@
                     </template>
 
                     <template v-if="state.loading" #overlay>
-                        <div class="el-loading-mask" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
+                        <div class="el-loading-mask flex flex-col items-center justify-center">
                             <div>
                                 <SvgIcon class="is-loading" name="loading" color="var(--el-color-primary)" :size="28" />
                                 <el-text class="ml-1" tag="b">{{ $t('db.execTime') }} - {{ state.execTime.toFixed(1) }}s</el-text>
@@ -119,9 +119,7 @@
                     </template>
 
                     <template #empty>
-                        <div style="text-align: center">
-                            <el-empty :description="props.emptyText" :image-size="100" />
-                        </div>
+                        <el-empty class="text-center" :description="props.emptyText" :image-size="60" />
                     </template>
                 </el-table-v2>
             </template>
diff --git a/frontend/src/views/ops/machine/MachineOp.vue b/frontend/src/views/ops/machine/MachineOp.vue
index ca11164e..02dad499 100644
--- a/frontend/src/views/ops/machine/MachineOp.vue
+++ b/frontend/src/views/ops/machine/MachineOp.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-all-center">
+    <div class="flex-all-center h-full">
         <ResourceOpPanel @resized="onResizeTagTree">
             <template #left>
                 <tag-tree
@@ -32,15 +32,8 @@
             </template>
 
             <template #right>
-                <div class="machine-terminal-tabs card !p-1">
-                    <el-tabs
-                        v-if="state.tabs.size > 0"
-                        type="card"
-                        @tab-remove="onRemoveTab"
-                        style="width: 100%"
-                        v-model="state.activeTermName"
-                        class="!h-full"
-                    >
+                <el-card class="h-full" body-class="machine-terminal-tabs h-full !p-1 flex flex-col flex-1">
+                    <el-tabs v-if="state.tabs.size > 0" type="card" @tab-remove="onRemoveTab" v-model="state.activeTermName" class="!h-full w-full">
                         <el-tab-pane class="!h-full" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
                             <template #label>
                                 <el-popconfirm @confirm="handleReconnect(dt, true)" :title="$t('machine.reConnTips')">
@@ -162,7 +155,7 @@
                     <machine-stats v-model:visible="machineStatsDialog.visible" :machineId="machineStatsDialog.machineId" :title="machineStatsDialog.title" />
 
                     <machine-rec v-model:visible="machineRecDialog.visible" :machineId="machineRecDialog.machineId" :title="machineRecDialog.title" />
-                </div>
+                </el-card>
             </template>
         </ResourceOpPanel>
     </div>
@@ -584,7 +577,6 @@ const handleReconnect = (tab: any, force = false) => {
 
 <style lang="scss">
 .machine-terminal-tabs {
-    height: calc(100vh - 108px);
     --el-tabs-header-height: 30px;
 
     .el-tabs {
diff --git a/frontend/src/views/ops/machine/cronjob/CronJobExecList.vue b/frontend/src/views/ops/machine/cronjob/CronJobExecList.vue
index f3aa52b2..64c53632 100644
--- a/frontend/src/views/ops/machine/cronjob/CronJobExecList.vue
+++ b/frontend/src/views/ops/machine/cronjob/CronJobExecList.vue
@@ -9,6 +9,7 @@
             :show-close="true"
             :destroy-on-close="true"
             width="65%"
+            body-class="h-200"
         >
             <page-table
                 ref="pageTableRef"
diff --git a/frontend/src/views/ops/mongo/MongoDataOp.vue b/frontend/src/views/ops/mongo/MongoDataOp.vue
index cf0bebd6..47e18060 100644
--- a/frontend/src/views/ops/mongo/MongoDataOp.vue
+++ b/frontend/src/views/ops/mongo/MongoDataOp.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-all-center">
+    <div class="flex-all-center h-full">
         <ResourceOpPanel>
             <template #left>
                 <tag-tree
@@ -43,7 +43,7 @@
             </template>
 
             <template #right>
-                <div class="mongo-data-tab card !p-1 !w-full">
+                <div class="mongo-data-tab card h-full !p-1 w-full">
                     <el-row v-if="nowColl">
                         <el-descriptions class="!w-full" :column="10" size="small" border>
                             <!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
@@ -546,12 +546,6 @@ const getNowDataTab = () => {
 }
 
 .mongo-data-tab {
-    height: calc(100vh - 108px);
-}
-
-.mongo-data-tab {
-    margin-top: 1px;
-
     .mongo-data-tab-data {
         height: calc(100vh - 230px);
     }
diff --git a/frontend/src/views/ops/redis/DataOperation.vue b/frontend/src/views/ops/redis/DataOperation.vue
index 7db51d03..f70ed247 100644
--- a/frontend/src/views/ops/redis/DataOperation.vue
+++ b/frontend/src/views/ops/redis/DataOperation.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="redis-data-op flex-all-center">
+    <div class="redis-data-op flex-all-center h-full">
         <ResourceOpPanel>
             <template #left>
                 <tag-tree
@@ -45,7 +45,7 @@
             <template #right>
                 <Splitpanes class="default-theme">
                     <Pane size="35" max-size="50">
-                        <div class="key-list-vtree card !p-1">
+                        <div class="key-list-vtree h-full card !p-1">
                             <el-scrollbar>
                                 <el-row :gutter="5">
                                     <el-col :span="2">
@@ -144,7 +144,7 @@
                     </Pane>
 
                     <Pane>
-                        <div class="key-detail card !p-1">
+                        <div class="h-full card !p-1">
                             <el-tabs @tab-remove="removeDataTab" v-model="state.activeName">
                                 <el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
                                     <key-detail :redis="redisInst" :key-info="dt.keyInfo" @change-key="searchKey()" @del-key="delKey" />
@@ -613,13 +613,8 @@ const delKey = async (key: string) => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .redis-data-op {
-    .key-list-vtree,
-    .key-detail {
-        height: calc(100vh - 108px);
-    }
-
     .key-list-vtree .folder-label {
         font-weight: bold;
     }